diff --git a/src/app.tsx b/src/app.tsx index f44994b8..26e70f2b 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -136,6 +136,7 @@ const App = () => { }> } /> + } /> } /> } /> }> diff --git a/src/components/topbar/topbar.tsx b/src/components/topbar/topbar.tsx index 4becc7ea..1dec0c2a 100644 --- a/src/components/topbar/topbar.tsx +++ b/src/components/topbar/topbar.tsx @@ -68,7 +68,7 @@ const SearchBar = ({ setShowSearchBar }: { setShowSearchBar: (show: boolean) => }; const renderBoardsList = (subplebbits: any, isInCatalogView: boolean, subscriptions: string[]) => - subplebbits.length > 0 && ( + subplebbits?.length > 0 && ( <> [ {subplebbits.map((sub: any, index: any) => ( @@ -77,11 +77,11 @@ const renderBoardsList = (subplebbits: any, isInCatalogView: boolean, subscripti {sub.address.endsWith('.eth') || sub.address.endsWith('.sol') ? sub.address : sub.address.slice(0, 10).concat('...')} - {index !== subplebbits?.length - 1 ? ' /' : null} + {index !== subplebbits.length - 1 ? ' /' : null} ))} ]{' '} - {subscriptions.length > 0 && ( + {subscriptions?.length > 0 && ( <> [ {subscriptions.map((address: any, index: any) => ( diff --git a/src/hooks/use-default-subplebbits-tags.ts b/src/hooks/use-default-subplebbits-tags.ts new file mode 100644 index 00000000..3d47768b --- /dev/null +++ b/src/hooks/use-default-subplebbits-tags.ts @@ -0,0 +1,17 @@ +import { useMemo } from 'react'; + +// Add this helper function to collect unique tags from subplebbits +const getUniqueTags = (multisub: any) => { + const allTags = new Set(); + Object.values(multisub).forEach((sub: any) => { + if (sub?.tags?.length) { + sub.tags.forEach((tag: string) => allTags.add(tag)); + } + }); + return Array.from(allTags).sort(); +}; + +// Export tags as a derived value where it's needed +export const useDefaultSubplebbitTags = (subplebbits: any) => { + return useMemo(() => getUniqueTags(subplebbits), [subplebbits]); +}; diff --git a/src/views/home/boards-list/boards-list.tsx b/src/views/home/boards-list/boards-list.tsx index 4a959d8a..ba2b1a38 100644 --- a/src/views/home/boards-list/boards-list.tsx +++ b/src/views/home/boards-list/boards-list.tsx @@ -1,19 +1,19 @@ -import { Link } from 'react-router-dom'; +import { Link, useLocation } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js'; import { Subplebbit } from '@plebbit/plebbit-react-hooks'; +import { useDefaultSubplebbitTags } from '../../../hooks/use-default-subplebbits-tags'; import useIsSubplebbitOffline from '../../../hooks/use-is-subplebbit-offline'; import styles from '../home.module.css'; import { nsfwTags } from '../home'; -import { useState } from 'react'; +import { useState, useEffect } from 'react'; -const Board = ({ subplebbit, subplebbits }: { subplebbit: Subplebbit; subplebbits: any; useCatalog?: boolean }) => { +const Board = ({ subplebbit }: { subplebbit: Subplebbit; useCatalog?: boolean }) => { const { t } = useTranslation(); const { address, title, tags } = subplebbit || {}; - const nsfwTag = tags.find((tag: string) => nsfwTags.includes(tag)); + const nsfwTag = tags?.find((tag: string) => nsfwTags.includes(tag)); - const subplebbitData = subplebbits && subplebbits.find((sub: Subplebbit) => sub?.address === address); - const { isOffline, isOnlineStatusLoading, offlineIconClass, offlineTitle } = useIsSubplebbitOffline(subplebbitData); + const { isOffline, isOnlineStatusLoading, offlineIconClass, offlineTitle } = useIsSubplebbitOffline(subplebbit); const displayAddress = address === 'all' ? 'all' : Plebbit.getShortAddress(address); const showOfflineIcon = address !== 'all' && (isOffline || isOnlineStatusLoading); @@ -31,28 +31,41 @@ const Board = ({ subplebbit, subplebbits }: { subplebbit: Subplebbit; subplebbit

{title || displayAddress}

-

{tags.join(', ')}

+

+ {tags.map((tag: string, index: number) => ( + <> + {tag === 'multiboard' ? {tag} : {tag}} + {index < tags.length - 1 && ', '} + + ))} +

); }; -const BoardsList = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebbits: any }) => { +const BoardsList = ({ multisub }: { multisub: Subplebbit[] }) => { const { t } = useTranslation(); + const location = useLocation(); const [displayCount, setDisplayCount] = useState(15); - const handleLoadMore = () => { - setDisplayCount((prevCount) => prevCount + 15); - }; + const currentTag = location.pathname.split('/').filter(Boolean)[0]; + const tags = useDefaultSubplebbitTags(multisub); + + useEffect(() => { + setDisplayCount(15); + }, [currentTag]); + + // First filter by tag, then limit by displayCount + const filteredBoards = (currentTag && tags.includes(currentTag) ? multisub.filter((sub) => sub?.tags?.includes(currentTag)) : multisub).slice(0, displayCount); - const visibleBoards = multisub.slice(0, displayCount); const hasMoreBoards = displayCount < multisub.length; const defaultBoard = { address: 'all', title: 'Temporary Default Subplebbits', tags: ['multiboard'], - }; + } as Subplebbit; return (
@@ -69,15 +82,19 @@ const BoardsList = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subpleb - - {visibleBoards.map((sub) => ( - + {!currentTag && } + {filteredBoards.map((sub) => ( + ))} +
+ displaying {filteredBoards.length} of {multisub.length} boards + {currentTag && tags.includes(currentTag) && ` tagged "${currentTag}"`} +
{hasMoreBoards && (
- [{t('load_more')}] + [ setDisplayCount((prevCount) => prevCount + 15)}>{t('load_more')}]
)}
diff --git a/src/views/home/home.module.css b/src/views/home/home.module.css index a6fc650c..1100060b 100644 --- a/src/views/home/home.module.css +++ b/src/views/home/home.module.css @@ -95,6 +95,12 @@ color: var(--topbar-separator-color); } +.displayCount { + font-size: 12px; + text-align: center; + margin-bottom: 10px; +} + .loadMoreButton span { color: var(--topbar-desktop-link-text-color); text-transform: capitalize; @@ -122,7 +128,7 @@ color: var(--homepage-box-bar-text-color); } -.boxBar h2, .infoboxBar h2{ +.boxBar h2, .infoboxBar h2 { font-size: 131%; font-weight: 700; } diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx index 67db5cd6..fe516573 100644 --- a/src/views/home/home.tsx +++ b/src/views/home/home.tsx @@ -214,7 +214,7 @@ const Home = () => { - +