diff --git a/src/views/home/__tests__/home.test.tsx b/src/views/home/__tests__/home.test.tsx index 3dc2f3e4..95fb5cd9 100644 --- a/src/views/home/__tests__/home.test.tsx +++ b/src/views/home/__tests__/home.test.tsx @@ -60,8 +60,8 @@ vi.mock('../boards-list', () => ({ })); vi.mock('../popular-threads-box', () => ({ - default: ({ directories, communities }: { directories: unknown[]; communities: Record }) => - createElement('div', { 'data-testid': 'popular-threads-box' }, `popular:${directories.length}:${Object.keys(communities).length}`), + default: ({ directories, directoryAddresses }: { directories: unknown[]; directoryAddresses: string[] }) => + createElement('div', { 'data-testid': 'popular-threads-box' }, `popular:${directories.length}:${directoryAddresses.length}`), })); vi.mock('../../../components/site-legal-meta', () => ({ diff --git a/src/views/home/boards-list/boards-list.tsx b/src/views/home/boards-list/boards-list.tsx index 7520aec4..db9c4488 100644 --- a/src/views/home/boards-list/boards-list.tsx +++ b/src/views/home/boards-list/boards-list.tsx @@ -1,7 +1,7 @@ import { Link, useNavigate } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { useAccountCommunityAddresses } from '../../../hooks/use-account-community-addresses'; -import { useDirectoriesState, useDirectories, DirectoryCommunity } from '../../../hooks/use-directories'; +import { useDirectoriesState, DirectoryCommunity } from '../../../hooks/use-directories'; import { getBoardPath } from '../../../lib/utils/route-utils'; import useDisclaimerModalStore from '../../../stores/use-disclaimer-modal-store'; import useDirectoryModalStore from '../../../stores/use-directory-modal-store'; @@ -55,20 +55,37 @@ const BoardLink = ({ boardName, address, getBoardLink, onLinkClick, onPlaceholde ); }; +const DirectoriesErrorMessage = () => { + const error = useDirectoriesState().error; + return error?.message ?
{error.message}
: null; +}; + +const ModeratedBoardsLink = () => { + const { t } = useTranslation(); + const accountCommunityAddresses = useAccountCommunityAddresses(); + + if (accountCommunityAddresses.length === 0) { + return null; + } + + return ( +
  • + {t('boards_you_moderate_nav')} +
  • + ); +}; + const BoardsList = ({ multisub }: { multisub: DirectoryCommunity[] }) => { const { t } = useTranslation(); const navigate = useNavigate(); - const { error } = useDirectoriesState(); - const { showDisclaimerModal } = useDisclaimerModalStore(); - const { openDirectoryModal } = useDirectoryModalStore(); - const { useCatalogLinks, boardFilter } = useBoardsFilterStore(); - const directories = useDirectories(); - - const accountCommunityAddresses = useAccountCommunityAddresses(); + const showDisclaimerModal = useDisclaimerModalStore((state) => state.showDisclaimerModal); + const openDirectoryModal = useDirectoryModalStore((state) => state.openDirectoryModal); + const useCatalogLinks = useBoardsFilterStore((state) => state.useCatalogLinks); + const boardFilter = useBoardsFilterStore((state) => state.boardFilter); const handleLinkClick = (e: React.MouseEvent, address: string) => { e.preventDefault(); - const boardPath = getBoardPath(address, directories); + const boardPath = getBoardPath(address, multisub); const targetPath = boardPath + (useCatalogLinks ? '/catalog' : ''); showDisclaimerModal(address, navigate, targetPath); }; @@ -76,7 +93,7 @@ const BoardsList = ({ multisub }: { multisub: DirectoryCommunity[] }) => { // Helper to generate link URL with optional catalog suffix const getBoardLink = (address: string | null): string => { if (!address) return '#'; - const boardPath = getBoardPath(address, directories); + const boardPath = getBoardPath(address, multisub); return `/${boardPath}${useCatalogLinks ? '/catalog' : ''}`; }; @@ -101,8 +118,6 @@ const BoardsList = ({ multisub }: { multisub: DirectoryCommunity[] }) => { onPlaceholderClick: handlePlaceholderClick, }; - const errorMessage = error?.message; - // Filtering logic: determine which categories to show const showAll = boardFilter === 'all'; const showNsfwOnly = boardFilter === 'nsfw'; @@ -125,7 +140,7 @@ const BoardsList = ({ multisub }: { multisub: DirectoryCommunity[] }) => {
    - {errorMessage &&
    {errorMessage}
    } + {/* Column 1: Japanese Culture + Video Games */} {(showJapaneseCulture || showVideoGames) && (
    @@ -598,11 +613,7 @@ const BoardsList = ({ multisub }: { multisub: DirectoryCommunity[] }) => {
  • Subscriptions
  • - {accountCommunityAddresses.length > 0 && ( -
  • - {t('boards_you_moderate_nav')} -
  • - )} +
    )} diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx index 21072345..dd0026ac 100644 --- a/src/views/home/home.tsx +++ b/src/views/home/home.tsx @@ -1,10 +1,8 @@ import { useEffect, useMemo, useRef, FormEvent } from 'react'; import { Link, useNavigate } from 'react-router-dom'; import { Trans, useTranslation } from 'react-i18next'; -import { useCommunities } from '@bitsocialnet/bitsocial-react-hooks'; import styles from './home.module.css'; import { useDirectories, useDirectoryAddresses } from '../../hooks/use-directories'; -import { useCommunityIdentifiers } from '../../hooks/use-community-identifiers'; import { CommunityStatsCollector, useCommunitiesStatsStore } from '../../hooks/use-communities-stats'; import PopularThreadsBox from './popular-threads-box'; import BoardsList from './boards-list'; @@ -190,8 +188,6 @@ export const HomeLogo = () => { const Home = () => { const directories = useDirectories(); const directoryAddresses = useDirectoryAddresses(); - const directoryCommunities = useCommunityIdentifiers(directoryAddresses); - const { communities } = useCommunities({ communities: directoryCommunities }); const { closeDirectoryModal } = useDirectoryModalStore(); useEffect(() => { @@ -214,7 +210,7 @@ const Home = () => { - +
    diff --git a/src/views/home/popular-threads-box/popular-threads-box.tsx b/src/views/home/popular-threads-box/popular-threads-box.tsx index df5207e3..2f1b0005 100644 --- a/src/views/home/popular-threads-box/popular-threads-box.tsx +++ b/src/views/home/popular-threads-box/popular-threads-box.tsx @@ -1,7 +1,7 @@ import { memo, useMemo } from 'react'; import { Link } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; -import { Comment, Community } from '@bitsocialnet/bitsocial-react-hooks'; +import { Comment, useCommunities } from '@bitsocialnet/bitsocial-react-hooks'; import styles from '../home.module.css'; import usePopularPosts from '../../../hooks/use-popular-posts'; import { useFeedStateString } from '../../../hooks/use-state-string'; @@ -11,6 +11,7 @@ import { CatalogPostMedia } from '../../../components/catalog-row'; import LoadingEllipsis from '../../../components/loading-ellipsis'; import BoxModal from '../box-modal'; import { DirectoryCommunity, findDirectoryByAddress } from '../../../hooks/use-directories'; +import { useCommunityIdentifiers } from '../../../hooks/use-community-identifiers'; import { getBoardPath } from '../../../lib/utils/route-utils'; import { removeMarkdown } from '../../../lib/utils/post-utils'; @@ -55,18 +56,12 @@ const PopularThreadCard = memo( (prevProps, nextProps) => prevProps.post?.cid === nextProps.post?.cid && prevProps.boardTitle === nextProps.boardTitle && prevProps.boardPath === nextProps.boardPath, ); -const PopularThreadsBox = ({ - directories, - directoryAddresses, - communities, -}: { - directories: DirectoryCommunity[]; - directoryAddresses: string[]; - communities: Array; -}) => { +const PopularThreadsBox = ({ directories, directoryAddresses }: { directories: DirectoryCommunity[]; directoryAddresses: string[] }) => { const { t } = useTranslation(); const { showWorksafeContentOnly, showNsfwContentOnly } = usePopularThreadsOptionsStore(); const getCommentCommunityAddress = (post: Comment) => post.communityAddress || post.subplebbitAddress; + const directoryCommunities = useCommunityIdentifiers(directoryAddresses); + const { communities } = useCommunities({ communities: directoryCommunities }); const { filteredBoardAddresses, filteredCommunities } = useMemo(() => { const filteredEntries = directoryAddresses.flatMap((address, index) => {