diff --git a/src/components/topbar/topbar.tsx b/src/components/topbar/topbar.tsx index 86bd5fd7..b9e343b4 100644 --- a/src/components/topbar/topbar.tsx +++ b/src/components/topbar/topbar.tsx @@ -1,11 +1,11 @@ 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 { Link, useLocation, useNavigate, useParams } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { isAllView, isCatalogView, isSubscriptionsView } from '../../lib/utils/view-utils'; 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 { TimeFilter } from '../board-buttons'; @@ -67,41 +67,52 @@ const SearchBar = ({ setShowSearchBar }: { setShowSearchBar: (show: boolean) => ); }; +const renderBoardsList = (subplebbits: any, isInCatalogView: boolean, subscriptions: string[]) => + subplebbits.length > 0 && ( + <> + [ + {subplebbits.map((sub: any, index: any) => ( + + {index === 0 ? null : ' '} + + {sub.address.endsWith('.eth') || sub.address.endsWith('.sol') ? sub.address : sub.address.slice(0, 10).concat('...')} + + {index !== subplebbits.length - 1 ? ' /' : null} + + ))} + ]{' '} + {subscriptions.length > 0 && ( + <> + [ + {subscriptions.map((address: any, index: any) => ( + + {index === 0 ? null : ' '} + + {address.endsWith('.eth') || address.endsWith('.sol') ? address : address.slice(0, 10).concat('...')} + + {index !== subscriptions.length - 1 ? ' /' : null} + + ))} + ]{' '} + + )} + + ); + 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); - const { plebbitSubs, interestsSubs, randomSubs, internationalSubs, projectsSubs } = categorizeSubplebbits(subplebbits); - - const renderSubplebbits = (subplebbits: any) => - subplebbits.length > 0 && ( - <> - [ - {subplebbits.map((sub: any, index: any) => ( - - {index === 0 ? null : ' '} - - {sub.address.endsWith('.eth') || sub.address.endsWith('.sol') ? sub.address.slice(0, -4) : sub.address.slice(0, 10).concat('...')} - - {index !== subplebbits.length - 1 ? ' /' : null} - - ))} - ]{' '} - - ); - return (
- [all / subscriptions] {renderSubplebbits(plebbitSubs)} - {renderSubplebbits(projectsSubs)} - {renderSubplebbits(interestsSubs)} - {renderSubplebbits(randomSubs)} - {renderSubplebbits(internationalSubs)}[ + [all / subscriptions]{' '} + {renderBoardsList(subplebbits.slice(0, 15), isInCatalogView, account?.subscriptions)}[