mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
fix(topbar): only display the top 15 subs in the default list
the default list will be curated by PLEB token holders via gasless pubsub voting, so the highest voted subs will be at the top
This commit is contained in:
@@ -1,11 +1,11 @@
|
|||||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||||
import { useAccountComment } from '@plebbit/plebbit-react-hooks';
|
import { useAccount, useAccountComment } from '@plebbit/plebbit-react-hooks';
|
||||||
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
|
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
|
||||||
import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
|
import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { isAllView, isCatalogView, isSubscriptionsView } from '../../lib/utils/view-utils';
|
import { isAllView, isCatalogView, isSubscriptionsView } from '../../lib/utils/view-utils';
|
||||||
import styles from './topbar.module.css';
|
import styles from './topbar.module.css';
|
||||||
import useDefaultSubplebbits, { categorizeSubplebbits, useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
|
import useDefaultSubplebbits, { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
|
||||||
import _, { debounce } from 'lodash';
|
import _, { debounce } from 'lodash';
|
||||||
import { TimeFilter } from '../board-buttons';
|
import { TimeFilter } from '../board-buttons';
|
||||||
|
|
||||||
@@ -67,17 +67,7 @@ const SearchBar = ({ setShowSearchBar }: { setShowSearchBar: (show: boolean) =>
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const TopBarDesktop = () => {
|
const renderBoardsList = (subplebbits: any, isInCatalogView: boolean, subscriptions: string[]) =>
|
||||||
const { t } = useTranslation();
|
|
||||||
const location = useLocation();
|
|
||||||
const params = useParams();
|
|
||||||
const isInCatalogView = isCatalogView(location.pathname, params);
|
|
||||||
const subplebbits = useDefaultSubplebbits();
|
|
||||||
const [showSearchBar, setShowSearchBar] = useState(false);
|
|
||||||
|
|
||||||
const { plebbitSubs, interestsSubs, randomSubs, internationalSubs, projectsSubs } = categorizeSubplebbits(subplebbits);
|
|
||||||
|
|
||||||
const renderSubplebbits = (subplebbits: any) =>
|
|
||||||
subplebbits.length > 0 && (
|
subplebbits.length > 0 && (
|
||||||
<>
|
<>
|
||||||
[
|
[
|
||||||
@@ -85,23 +75,44 @@ const TopBarDesktop = () => {
|
|||||||
<span key={index}>
|
<span key={index}>
|
||||||
{index === 0 ? null : ' '}
|
{index === 0 ? null : ' '}
|
||||||
<Link to={`/p/${sub.address}${isInCatalogView ? '/catalog' : ''}`}>
|
<Link to={`/p/${sub.address}${isInCatalogView ? '/catalog' : ''}`}>
|
||||||
{sub.address.endsWith('.eth') || sub.address.endsWith('.sol') ? sub.address.slice(0, -4) : sub.address.slice(0, 10).concat('...')}
|
{sub.address.endsWith('.eth') || sub.address.endsWith('.sol') ? sub.address : sub.address.slice(0, 10).concat('...')}
|
||||||
</Link>
|
</Link>
|
||||||
{index !== subplebbits.length - 1 ? ' /' : null}
|
{index !== subplebbits.length - 1 ? ' /' : null}
|
||||||
</span>
|
</span>
|
||||||
))}
|
))}
|
||||||
]{' '}
|
]{' '}
|
||||||
|
{subscriptions.length > 0 && (
|
||||||
|
<>
|
||||||
|
[
|
||||||
|
{subscriptions.map((address: any, index: any) => (
|
||||||
|
<span key={index}>
|
||||||
|
{index === 0 ? null : ' '}
|
||||||
|
<Link to={`/p/${address}${isInCatalogView ? '/catalog' : ''}`}>
|
||||||
|
{address.endsWith('.eth') || address.endsWith('.sol') ? address : address.slice(0, 10).concat('...')}
|
||||||
|
</Link>
|
||||||
|
{index !== subscriptions.length - 1 ? ' /' : null}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
]{' '}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const TopBarDesktop = () => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const account = useAccount();
|
||||||
|
const location = useLocation();
|
||||||
|
const params = useParams();
|
||||||
|
const isInCatalogView = isCatalogView(location.pathname, params);
|
||||||
|
const subplebbits = useDefaultSubplebbits();
|
||||||
|
const [showSearchBar, setShowSearchBar] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.boardNavDesktop}>
|
<div className={styles.boardNavDesktop}>
|
||||||
<span className={styles.boardList}>
|
<span className={styles.boardList}>
|
||||||
[<Link to='/p/all'>all</Link> / <Link to='/p/subscriptions'>subscriptions</Link>] {renderSubplebbits(plebbitSubs)}
|
[<Link to='/p/all'>all</Link> / <Link to='/p/subscriptions'>subscriptions</Link>]{' '}
|
||||||
{renderSubplebbits(projectsSubs)}
|
{renderBoardsList(subplebbits.slice(0, 15), isInCatalogView, account?.subscriptions)}[
|
||||||
{renderSubplebbits(interestsSubs)}
|
|
||||||
{renderSubplebbits(randomSubs)}
|
|
||||||
{renderSubplebbits(internationalSubs)}[
|
|
||||||
<Link
|
<Link
|
||||||
className={styles.disabledButton}
|
className={styles.disabledButton}
|
||||||
to='boards/create'
|
to='boards/create'
|
||||||
|
|||||||
Reference in New Issue
Block a user