refactor: rebrand default subplebbits to 5chan directories

This commit is contained in:
plebeius
2026-01-28 16:51:27 +08:00
parent 7c8a7b8df8
commit 63ee8aa168
33 changed files with 329 additions and 348 deletions
+11 -32
View File
@@ -7,8 +7,8 @@ import { Trans, useTranslation } from 'react-i18next';
import styles from './board.module.css';
import { shouldShowSnow } from '../../lib/snow';
import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
import { useDefaultSubplebbitAddresses, useDefaultSubplebbits } from '../../hooks/use-default-subplebbits';
import { useFilteredDefaultSubplebbitAddresses } from '../../hooks/use-filtered-default-subplebbit-addresses';
import { useDirectoryAddresses, useDirectories } from '../../hooks/use-directories';
import { useFilteredDirectoryAddresses } from '../../hooks/use-filtered-directory-addresses';
import { useResolvedSubplebbitAddress, useBoardPath } from '../../hooks/use-resolved-subplebbit-address';
import { useFeedStateString } from '../../hooks/use-state-string';
import useTimeFilter, { timeFilterNameToSeconds } from '../../hooks/use-time-filter';
@@ -194,18 +194,18 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, t
const isInSubscriptionsView = viewType ? viewType === 'subs' : false;
const isInModView = viewType ? viewType === 'mod' : false;
const defaultSubplebbits = useDefaultSubplebbits();
const directories = useDirectories();
const resolvedAddressFromUrl = useResolvedSubplebbitAddress();
const subplebbitAddress = useMemo(() => {
if (boardIdentifierProp) {
return getSubplebbitAddress(boardIdentifierProp, defaultSubplebbits);
return getSubplebbitAddress(boardIdentifierProp, directories);
}
return resolvedAddressFromUrl;
}, [boardIdentifierProp, defaultSubplebbits, resolvedAddressFromUrl]);
}, [boardIdentifierProp, directories, resolvedAddressFromUrl]);
const boardPath = useBoardPath(subplebbitAddress);
const defaultSubplebbitAddresses = useDefaultSubplebbitAddresses();
const filteredDefaultSubplebbitAddresses = useFilteredDefaultSubplebbitAddresses();
const directoryAddresses = useDirectoryAddresses();
const filteredDirectoryAddresses = useFilteredDirectoryAddresses();
const account = useAccount();
const subscriptions = account?.subscriptions;
@@ -215,7 +215,7 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, t
const subplebbitAddresses = useMemo(() => {
if (isInAllView) {
return filteredDefaultSubplebbitAddresses;
return filteredDirectoryAddresses;
}
if (isInSubscriptionsView) {
return subscriptions || [];
@@ -224,16 +224,7 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, t
return accountSubplebbitAddresses;
}
return [subplebbitAddress];
}, [
isInAllView,
isInSubscriptionsView,
isInModView,
subplebbitAddress,
defaultSubplebbitAddresses,
filteredDefaultSubplebbitAddresses,
subscriptions,
accountSubplebbitAddresses,
]);
}, [isInAllView, isInSubscriptionsView, isInModView, subplebbitAddress, directoryAddresses, filteredDirectoryAddresses, subscriptions, accountSubplebbitAddresses]);
const { sortType } = useSortingStore();
const { timeFilterSeconds: timeFilterSecondsFromHook, timeFilterName: timeFilterNameFromHook } = useTimeFilter();
@@ -442,7 +433,7 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, t
useEffect(() => {
if (!isVisible) return;
const boardIdentifier = params.boardIdentifier || boardIdentifierProp;
const isDirectory = boardIdentifier ? isDirectoryBoard(boardIdentifier, defaultSubplebbits) : false;
const isDirectory = boardIdentifier ? isDirectoryBoard(boardIdentifier, directories) : false;
let boardTitle: string;
if (isInAllView) {
@@ -457,19 +448,7 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, t
boardTitle = title ? title : shortAddress || subplebbitAddress || '';
}
document.title = boardTitle + ' - 5chan';
}, [
title,
shortAddress,
subplebbitAddress,
isVisible,
params.boardIdentifier,
boardIdentifierProp,
defaultSubplebbits,
isInAllView,
isInSubscriptionsView,
isInModView,
t,
]);
}, [title, shortAddress, subplebbitAddress, isVisible, params.boardIdentifier, boardIdentifierProp, directories, isInAllView, isInSubscriptionsView, isInModView, t]);
const shouldShowErrorToUser = subplebbitError?.message && feed.length === 0;
+10 -10
View File
@@ -5,8 +5,8 @@ import { Comment, useAccount, useFeed, useSubplebbit, useBlock, useAccountCommen
import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
import useCatalogFeedRows from '../../hooks/use-catalog-feed-rows';
import { useDefaultSubplebbits } from '../../hooks/use-default-subplebbits';
import { useFilteredDefaultSubplebbitAddresses } from '../../hooks/use-filtered-default-subplebbit-addresses';
import { useDirectories } from '../../hooks/use-directories';
import { useFilteredDirectoryAddresses } from '../../hooks/use-filtered-directory-addresses';
import { useResolvedSubplebbitAddress, useBoardPath } from '../../hooks/use-resolved-subplebbit-address';
import { useFeedStateString } from '../../hooks/use-state-string';
import useTimeFilter, { timeFilterNameToSeconds } from '../../hooks/use-time-filter';
@@ -302,32 +302,32 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
const isInAllView = viewType ? viewType === 'all' : false;
const isInSubscriptionsView = viewType ? viewType === 'subs' : false;
const defaultSubplebbits = useDefaultSubplebbits();
const directories = useDirectories();
const resolvedAddressFromUrl = useResolvedSubplebbitAddress();
const subplebbitAddress = useMemo(() => {
if (boardIdentifierProp) {
return getSubplebbitAddress(boardIdentifierProp, defaultSubplebbits);
return getSubplebbitAddress(boardIdentifierProp, directories);
}
return resolvedAddressFromUrl;
}, [boardIdentifierProp, defaultSubplebbits, resolvedAddressFromUrl]);
}, [boardIdentifierProp, directories, resolvedAddressFromUrl]);
const boardPath = useBoardPath(subplebbitAddress);
const { showTextOnlyThreads, filterItems, searchText, clearMatchedFilters } = useCatalogFiltersStore();
const account = useAccount();
const subscriptions = account?.subscriptions;
const filteredDefaultSubplebbitAddresses = useFilteredDefaultSubplebbitAddresses();
const filteredDirectoryAddresses = useFilteredDirectoryAddresses();
const subplebbitAddresses = useMemo(() => {
if (isInAllView) {
return filteredDefaultSubplebbitAddresses;
return filteredDirectoryAddresses;
}
if (isInSubscriptionsView) {
return (subscriptions || []).filter(Boolean); // Filter out any undefined/null values
}
// Only include subplebbitAddress if it's defined
return subplebbitAddress ? [subplebbitAddress] : [];
}, [isInAllView, isInSubscriptionsView, subplebbitAddress, filteredDefaultSubplebbitAddresses, subscriptions]);
}, [isInAllView, isInSubscriptionsView, subplebbitAddress, filteredDirectoryAddresses, subscriptions]);
const { imageSize } = useCatalogStyleStore();
const columnWidth = imageSize === 'Large' ? 270 : 180;
@@ -601,7 +601,7 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
useEffect(() => {
if (!isVisible) return;
const boardIdentifier = params.boardIdentifier || boardIdentifierProp;
const isDirectory = boardIdentifier ? isDirectoryBoard(boardIdentifier, defaultSubplebbits) : false;
const isDirectory = boardIdentifier ? isDirectoryBoard(boardIdentifier, directories) : false;
let documentTitle: string;
if (isInAllView) {
@@ -614,7 +614,7 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
documentTitle = title ? title : shortAddress || subplebbitAddress || '';
}
document.title = documentTitle + ` - ${t('catalog')} - 5chan`;
}, [title, shortAddress, subplebbitAddress, isInAllView, isInSubscriptionsView, t, isVisible, params.boardIdentifier, boardIdentifierProp, defaultSubplebbits]);
}, [title, shortAddress, subplebbitAddress, isInAllView, isInSubscriptionsView, t, isVisible, params.boardIdentifier, boardIdentifierProp, directories]);
// Clear matched filters when component mounts or when subplebbit changes
useEffect(() => {
+7 -7
View File
@@ -1,6 +1,6 @@
import { Link, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useDefaultSubplebbitsState, useDefaultSubplebbits, MultisubSubplebbit } from '../../../hooks/use-default-subplebbits';
import { useDirectoriesState, useDirectories, 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';
@@ -9,7 +9,7 @@ import BoardsFilterModal from './boards-filter-modal';
import styles from '../home.module.css';
// Helper function to find board address by matching title pattern
const findBoardAddress = (multisub: MultisubSubplebbit[], titlePattern: string): string | null => {
const findBoardAddress = (multisub: DirectoryCommunity[], titlePattern: string): string | null => {
const entry = multisub.find((ms) => ms.title === titlePattern);
return entry?.address || null;
};
@@ -27,25 +27,25 @@ const NSFWBadge = () => {
);
};
const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
const BoardsList = ({ multisub }: { multisub: DirectoryCommunity[] }) => {
const { t } = useTranslation();
const navigate = useNavigate();
const { error } = useDefaultSubplebbitsState();
const { error } = useDirectoriesState();
const { showDisclaimerModal } = useDisclaimerModalStore();
const { openDirectoryModal } = useDirectoryModalStore();
const { useCatalogLinks, boardFilter } = useBoardsFilterStore();
const defaultSubplebbits = useDefaultSubplebbits();
const directories = useDirectories();
const handleLinkClick = (e: React.MouseEvent<HTMLAnchorElement>, address: string) => {
e.preventDefault();
const boardPath = getBoardPath(address, defaultSubplebbits);
const boardPath = getBoardPath(address, directories);
showDisclaimerModal(address, navigate, boardPath);
};
// Helper to generate link URL with optional catalog suffix
const getBoardLink = (address: string | null): string => {
if (!address) return '#';
const boardPath = getBoardPath(address, defaultSubplebbits);
const boardPath = getBoardPath(address, directories);
return `/${boardPath}${useCatalogLinks ? '/catalog' : ''}`;
};
+14 -14
View File
@@ -3,7 +3,7 @@ import { Link, useNavigate } from 'react-router-dom';
import { Trans, useTranslation } from 'react-i18next';
import { useSubplebbits } from '@plebbit/plebbit-react-hooks';
import styles from './home.module.css';
import { useDefaultSubplebbits, useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
import { useDirectories, useDirectoryAddresses } from '../../hooks/use-directories';
import { SubplebbitStatsCollector, useSubplebbitsStatsStore } from '../../hooks/use-subplebbits-stats';
import PopularThreadsBox from './popular-threads-box';
import BoardsList from './boards-list';
@@ -14,19 +14,19 @@ import DirectoryModal from '../../components/directory-modal';
import { getBoardPath } from '../../lib/utils/route-utils';
import _ from 'lodash';
// https://github.com/plebbit/lists/blob/master/5chan-multisub.json
// https://github.com/plebbit/lists/blob/master/5chan-directories.json
const SearchBar = () => {
const searchInputRef = useRef<HTMLInputElement>(null);
const { t } = useTranslation();
const navigate = useNavigate();
const defaultSubplebbits = useDefaultSubplebbits();
const directories = useDirectories();
const handleSearchSubmit = (e: FormEvent) => {
e.preventDefault();
const searchInput = searchInputRef.current?.value;
if (searchInput) {
const boardPath = getBoardPath(searchInput, defaultSubplebbits);
const boardPath = getBoardPath(searchInput, directories);
navigate(`/${boardPath}`);
}
};
@@ -73,7 +73,7 @@ const InfoBox = () => {
);
};
const Stats = ({ subplebbitAddresses }: { subplebbitAddresses: string[] }) => {
const Stats = ({ directoryAddresses }: { directoryAddresses: string[] }) => {
const { t } = useTranslation();
const subplebbitsStats = useSubplebbitsStatsStore((state) => state.subplebbitsStats);
@@ -82,7 +82,7 @@ const Stats = ({ subplebbitAddresses }: { subplebbitAddresses: string[] }) => {
let currentUsers = 0;
let boardsTracked = 0;
subplebbitAddresses.forEach((address) => {
directoryAddresses.forEach((address) => {
const stat = subplebbitsStats[address];
if (stat) {
totalPosts += stat.allPostCount || 0;
@@ -92,12 +92,12 @@ const Stats = ({ subplebbitAddresses }: { subplebbitAddresses: string[] }) => {
});
return { totalPosts, currentUsers, boardsTracked };
}, [subplebbitsStats, subplebbitAddresses]);
}, [subplebbitsStats, directoryAddresses]);
return (
<>
{/* Render collectors to fetch stats for each subplebbit */}
{subplebbitAddresses.map((address) => (
{directoryAddresses.map((address) => (
<SubplebbitStatsCollector key={address} subplebbitAddress={address} />
))}
<div className={styles.box}>
@@ -192,9 +192,9 @@ export const HomeLogo = () => {
};
const Home = () => {
const defaultSubplebbits = useDefaultSubplebbits();
const subplebbitAddresses = useDefaultSubplebbitAddresses();
const { subplebbits } = useSubplebbits({ subplebbitAddresses });
const directories = useDirectories();
const directoryAddresses = useDirectoryAddresses();
const { subplebbits } = useSubplebbits({ subplebbitAddresses: directoryAddresses });
const { closeDirectoryModal } = useDirectoryModalStore();
useEffect(() => {
@@ -216,9 +216,9 @@ const Home = () => {
<HomeLogo />
<SearchBar />
<InfoBox />
<BoardsList multisub={defaultSubplebbits} />
<PopularThreadsBox multisub={defaultSubplebbits} subplebbits={subplebbits} />
<Stats subplebbitAddresses={subplebbitAddresses} />
<BoardsList multisub={directories} />
<PopularThreadsBox directories={directories} subplebbits={subplebbits} />
<Stats directoryAddresses={directoryAddresses} />
<Footer />
</div>
</>
@@ -9,13 +9,13 @@ import { getCommentMediaInfo } from '../../../lib/utils/media-utils';
import { CatalogPostMedia } from '../../../components/catalog-row';
import LoadingEllipsis from '../../../components/loading-ellipsis';
import BoxModal from '../box-modal';
import { MultisubSubplebbit, useDefaultSubplebbits } from '../../../hooks/use-default-subplebbits';
import { DirectoryCommunity } from '../../../hooks/use-directories';
import { getBoardPath } from '../../../lib/utils/route-utils';
import { removeMarkdown } from '../../../lib/utils/post-utils';
interface PopularThreadProps {
post: Comment;
multisub: MultisubSubplebbit[];
directories: DirectoryCommunity[];
}
export const ContentPreview = ({ content, maxLength = 99 }: { content: string; maxLength?: number }) => {
@@ -27,15 +27,14 @@ export const ContentPreview = ({ content, maxLength = 99 }: { content: string; m
// Memoize to prevent rerenders when parent rerenders due to updatingState
const PopularThreadCard = memo(
({ post, multisub }: PopularThreadProps) => {
({ post, directories }: PopularThreadProps) => {
const { cid, content, link, linkHeight, linkWidth, subplebbitAddress, thumbnailUrl, title } = post || {};
const commentMediaInfo = getCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight);
const defaultSubplebbits = useDefaultSubplebbits();
// Find the matching MultisubSubplebbit entry and get its title
const multisubEntry = multisub.find((ms) => ms?.address === subplebbitAddress);
const boardTitle = multisubEntry?.title?.replace(/^\/[^/]+\/\s*-\s*/, '') || '';
const boardPath = subplebbitAddress ? getBoardPath(subplebbitAddress, defaultSubplebbits) : '';
// Find the matching DirectoryCommunity entry and get its title
const directoriesEntry = directories.find((ms) => ms?.address === subplebbitAddress);
const boardTitle = directoriesEntry?.title?.replace(/^\/[^/]+\/\s*-\s*/, '') || '';
const boardPath = subplebbitAddress ? getBoardPath(subplebbitAddress, directories) : '';
return (
<div className={styles.popularThread} key={cid}>
@@ -57,37 +56,37 @@ const PopularThreadCard = memo(
</div>
);
},
// Custom equality: rerender if post.cid or multisub entry title changes
// Custom equality: rerender if post.cid or directories entry title changes
(prevProps, nextProps) => {
if (prevProps.post?.cid !== nextProps.post?.cid) return false;
// Compare the relevant multisub entry for this post's subplebbitAddress
const prevEntry = prevProps.multisub.find((ms) => ms?.address === prevProps.post?.subplebbitAddress);
const nextEntry = nextProps.multisub.find((ms) => ms?.address === nextProps.post?.subplebbitAddress);
// Compare the relevant directories entry for this post's subplebbitAddress
const prevEntry = prevProps.directories.find((ms) => ms?.address === prevProps.post?.subplebbitAddress);
const nextEntry = nextProps.directories.find((ms) => ms?.address === nextProps.post?.subplebbitAddress);
return prevEntry?.title === nextEntry?.title;
},
);
const PopularThreadsBox = ({ multisub, subplebbits }: { multisub: MultisubSubplebbit[]; subplebbits: any }) => {
const PopularThreadsBox = ({ directories, subplebbits }: { directories: DirectoryCommunity[]; subplebbits: any }) => {
const { t } = useTranslation();
const { showWorksafeContentOnly, showNsfwContentOnly } = usePopularThreadsOptionsStore();
const getFilteredSubplebbits = () => {
if (showWorksafeContentOnly) {
return subplebbits.filter((sub: Subplebbit) => {
const multisubEntry = multisub.find((ms) => ms?.address === sub?.address);
return multisubEntry ? !multisubEntry.nsfw : true;
const directoriesEntry = directories.find((ms) => ms?.address === sub?.address);
return directoriesEntry ? !directoriesEntry.nsfw : true;
});
}
if (showNsfwContentOnly) {
return subplebbits.filter((sub: Subplebbit) => {
const multisubEntry = multisub.find((ms) => ms?.address === sub?.address);
return multisubEntry ? multisubEntry.nsfw : false;
const directoriesEntry = directories.find((ms) => ms?.address === sub?.address);
return directoriesEntry ? directoriesEntry.nsfw : false;
});
}
return subplebbits;
};
const filteredSubplebbits = useMemo(getFilteredSubplebbits, [subplebbits, showWorksafeContentOnly, showNsfwContentOnly, multisub]);
const filteredSubplebbits = useMemo(getFilteredSubplebbits, [subplebbits, showWorksafeContentOnly, showNsfwContentOnly, directories]);
const { popularPosts } = usePopularPosts(filteredSubplebbits);
const isLoading = popularPosts.length === 0;
@@ -98,7 +97,11 @@ const PopularThreadsBox = ({ multisub, subplebbits }: { multisub: MultisubSubple
<BoxModal />
</div>
<div className={`${styles.boxContent} ${styles.popularThreads} ${isLoading ? styles.popularThreadsLoading : ''}`}>
{isLoading ? <LoadingEllipsis string={t('loading')} /> : popularPosts.map((post: any) => <PopularThreadCard key={post.cid} post={post} multisub={multisub} />)}
{isLoading ? (
<LoadingEllipsis string={t('loading')} />
) : (
popularPosts.map((post: any) => <PopularThreadCard key={post.cid} post={post} directories={directories} />)
)}
</div>
</div>
);
+17 -18
View File
@@ -4,7 +4,6 @@ import { useParams, Link } from 'react-router-dom';
import { useFeed, Comment, usePublishCommentModeration, useEditedComment, useSubplebbit, useComment } from '@plebbit/plebbit-react-hooks';
import useAccountsStore from '@plebbit/plebbit-react-hooks/dist/stores/accounts';
import { Virtuoso } from 'react-virtuoso';
import { formatDistanceToNow } from 'date-fns';
import styles from './mod-queue.module.css';
import useModQueueStore from '../../stores/use-mod-queue-store';
import { useAccountSubplebbitsWithMetadata } from '../../hooks/use-account-subplebbits-with-metadata';
@@ -12,7 +11,7 @@ import LoadingEllipsis from '../../components/loading-ellipsis';
import ErrorDisplay from '../../components/error-display/error-display';
import { useFeedStateString } from '../../hooks/use-state-string';
import { getSubplebbitAddress, getBoardPath } from '../../lib/utils/route-utils';
import { useDefaultSubplebbits, MultisubSubplebbit } from '../../hooks/use-default-subplebbits';
import { useDirectories, DirectoryCommunity } from '../../hooks/use-directories';
import { useBoardPath } from '../../hooks/use-resolved-subplebbit-address';
import { getHasThumbnail, getCommentMediaInfo } from '../../lib/utils/media-utils';
import { getFormattedDate, getFormattedTimeAgo } from '../../lib/utils/time-utils';
@@ -430,10 +429,10 @@ const ModQueueFeedPost = ({ comment }: { comment: Comment }) => {
};
interface ModQueueBoardFilterProps {
subplebbits: MultisubSubplebbit[];
communities: DirectoryCommunity[];
}
const ModQueueBoardFilter = ({ subplebbits }: ModQueueBoardFilterProps) => {
const ModQueueBoardFilter = ({ communities }: ModQueueBoardFilterProps) => {
const { t } = useTranslation();
const { selectedBoardFilter, setSelectedBoardFilter } = useModQueueStore();
@@ -442,12 +441,12 @@ const ModQueueBoardFilter = ({ subplebbits }: ModQueueBoardFilterProps) => {
setSelectedBoardFilter(value);
};
if (!subplebbits || subplebbits.length === 0) {
if (!communities || communities.length === 0) {
return null;
}
// Default to first board if none selected
const firstBoardAddress = subplebbits.find((sub) => sub.address)?.address;
const firstBoardAddress = communities.find((sub) => sub.address)?.address;
const currentFilter = selectedBoardFilter || firstBoardAddress || '';
// Auto-select first board if none is selected
@@ -461,12 +460,12 @@ const ModQueueBoardFilter = ({ subplebbits }: ModQueueBoardFilterProps) => {
<div className={styles.filterContainer}>
<label>{t('filter_by_board')}:</label>
<select value={currentFilter} onChange={handleChange}>
{subplebbits.map((sub) => {
{communities.map((sub) => {
const address = sub.address;
if (!address) return null;
return (
<option key={address} value={address}>
/{getBoardPath(address, subplebbits)}/
/{getBoardPath(address, communities)}/
</option>
);
})}
@@ -594,7 +593,7 @@ export const ModQueueButton = ({ boardIdentifier, isMobile }: ModQueueButtonProp
(state) => {
const activeAccountId = state.activeAccountId;
const activeAccount = activeAccountId ? state.accounts[activeAccountId] : undefined;
const accountSubplebbits = activeAccount?.subplebbits || {};
const accountSubplebbits = activeAccount?.communities || {};
return Object.keys(accountSubplebbits);
},
(prev, next) => {
@@ -603,14 +602,14 @@ export const ModQueueButton = ({ boardIdentifier, isMobile }: ModQueueButtonProp
},
);
const defaultSubplebbits = useDefaultSubplebbits();
const directories = useDirectories();
const resolvedAddress = useMemo(() => {
if (boardIdentifier) {
return getSubplebbitAddress(boardIdentifier, defaultSubplebbits);
return getSubplebbitAddress(boardIdentifier, directories);
}
return undefined;
}, [boardIdentifier, defaultSubplebbits]);
}, [boardIdentifier, directories]);
const subplebbitAddresses = useMemo(() => {
if (resolvedAddress) {
@@ -652,7 +651,7 @@ export const ModQueueView = ({ boardIdentifier: propBoardIdentifier }: ModQueueV
(state) => {
const activeAccountId = state.activeAccountId;
const activeAccount = activeAccountId ? state.accounts[activeAccountId] : undefined;
const accountSubplebbits = activeAccount?.subplebbits || {};
const accountSubplebbits = activeAccount?.communities || {};
return Object.keys(accountSubplebbits);
},
(prev, next) => {
@@ -661,18 +660,18 @@ export const ModQueueView = ({ boardIdentifier: propBoardIdentifier }: ModQueueV
},
);
const defaultSubplebbits = useDefaultSubplebbits();
const directories = useDirectories();
const boardIdentifier = propBoardIdentifier || params.boardIdentifier;
const resolvedAddress = useMemo(() => {
if (boardIdentifier) {
return getSubplebbitAddress(boardIdentifier, defaultSubplebbits);
return getSubplebbitAddress(boardIdentifier, directories);
}
return undefined;
}, [boardIdentifier, defaultSubplebbits]);
}, [boardIdentifier, directories]);
const subplebbitsWithMetadata = useAccountSubplebbitsWithMetadata();
const communitiesWithMetadata = useAccountSubplebbitsWithMetadata();
const subplebbitAddresses = useMemo(() => {
if (resolvedAddress) {
@@ -740,7 +739,7 @@ export const ModQueueView = ({ boardIdentifier: propBoardIdentifier }: ModQueueV
{!resolvedAddress && (
<div className={styles.controls}>
<div className={styles.controlsLeft}>
<ModQueueBoardFilter subplebbits={subplebbitsWithMetadata} />
<ModQueueBoardFilter communities={communitiesWithMetadata} />
</div>
</div>
)}
+3 -3
View File
@@ -1,7 +1,7 @@
import { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { useSubplebbitField } from '../../hooks/use-stable-subplebbit';
import { useDefaultSubplebbits } from '../../hooks/use-default-subplebbits';
import { useDirectories } from '../../hooks/use-directories';
import { getSubplebbitAddress } from '../../lib/utils/route-utils';
import { HomeLogo } from '../home';
import styles from './not-found.module.css';
@@ -18,8 +18,8 @@ const NotFound = () => {
// Extract boardIdentifier from pathname (could be directory code or address)
const pathParts = location.pathname.split('/').filter(Boolean);
const boardIdentifier = pathParts[0] && pathParts[0] !== 'not-found' && pathParts[0] !== 'faq' ? pathParts[0] : '';
const defaultSubplebbits = useDefaultSubplebbits();
const subplebbitAddress = boardIdentifier ? getSubplebbitAddress(boardIdentifier, defaultSubplebbits) : '';
const directories = useDirectories();
const subplebbitAddress = boardIdentifier ? getSubplebbitAddress(boardIdentifier, directories) : '';
// Only subscribe to address and shortAddress to avoid rerenders from updatingState changes
const address = useSubplebbitField(subplebbitAddress, (subplebbit) => subplebbit?.address);
const shortAddress = useSubplebbitField(subplebbitAddress, (subplebbit) => subplebbit?.shortAddress);
+4 -4
View File
@@ -1,7 +1,7 @@
import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useAccountComment, useAccountComments } from '@plebbit/plebbit-react-hooks';
import { useDefaultSubplebbits } from '../../hooks/use-default-subplebbits';
import { useDirectories } from '../../hooks/use-directories';
import { getBoardPath } from '../../lib/utils/route-utils';
import { Post } from '../post';
@@ -11,7 +11,7 @@ const PendingPost = () => {
const commentIndex = accountCommentIndex ? parseInt(accountCommentIndex) : undefined;
const post = useAccountComment({ commentIndex });
const navigate = useNavigate();
const defaultSubplebbits = useDefaultSubplebbits();
const directories = useDirectories();
useEffect(() => window.scrollTo(0, 0), []);
@@ -31,10 +31,10 @@ const PendingPost = () => {
useEffect(() => {
if (post?.cid && post?.subplebbitAddress) {
const boardPath = getBoardPath(post.subplebbitAddress, defaultSubplebbits);
const boardPath = getBoardPath(post.subplebbitAddress, directories);
navigate(`/${boardPath}/thread/${post.cid}`, { replace: true });
}
}, [post, navigate, defaultSubplebbits]);
}, [post, navigate, directories]);
return <Post post={post} />;
};
+4 -4
View File
@@ -5,7 +5,7 @@ import { useSubplebbitField } from '../../hooks/use-stable-subplebbit';
import { useLocation, useNavigate, useParams } from 'react-router-dom';
import { isAllView } from '../../lib/utils/view-utils';
import { useResolvedSubplebbitAddress } from '../../hooks/use-resolved-subplebbit-address';
import { useDefaultSubplebbits } from '../../hooks/use-default-subplebbits';
import { useDirectories } from '../../hooks/use-directories';
import { isDirectoryBoard } from '../../lib/utils/route-utils';
import useIsMobile from '../../hooks/use-is-mobile';
import ErrorDisplay from '../../components/error-display/error-display';
@@ -113,7 +113,7 @@ const PostPage = () => {
const subplebbit = useSubplebbit({ subplebbitAddress });
const { error: subplebbitError, shortAddress, title } = subplebbit || {};
const defaultSubplebbits = useDefaultSubplebbits();
const directories = useDirectories();
// if the comment is a reply, return the post comment instead, then the reply will be highlighted in the thread
const postComment = useComment({ commentCid: comment?.postCid });
@@ -133,7 +133,7 @@ const PostPage = () => {
useEffect(() => {
const boardIdentifier = params.boardIdentifier;
const isDirectory = boardIdentifier ? isDirectoryBoard(boardIdentifier, defaultSubplebbits) : false;
const isDirectory = boardIdentifier ? isDirectoryBoard(boardIdentifier, directories) : false;
let boardTitle: string;
if (isInAllView) {
@@ -147,7 +147,7 @@ const PostPage = () => {
const postTitle = post?.title?.slice(0, 30) || post?.content?.slice(0, 30);
const postTitlePart = postTitle ? ` - ${postTitle.trim()}...` : '';
document.title = `${boardTitle}${postTitlePart} - 5chan`;
}, [title, shortAddress, subplebbitAddress, post?.title, post?.content, isInAllView, t, params.boardIdentifier, defaultSubplebbits]);
}, [title, shortAddress, subplebbitAddress, post?.title, post?.content, isInAllView, t, params.boardIdentifier, directories]);
const shouldShowCommentError = comment?.error?.message && !comment?.cid;
const shouldShowPostError = post?.error && post?.replyCount > 0 && post?.replies?.length === 0;
+9 -9
View File
@@ -1,7 +1,7 @@
import { useEffect, useState, FormEvent } from 'react';
import { useSubplebbit } from '@plebbit/plebbit-react-hooks';
import { Footer, HomeLogo } from '../home';
import { useDefaultSubplebbits, MultisubSubplebbit } from '../../hooks/use-default-subplebbits';
import { useDirectories, DirectoryCommunity } from '../../hooks/use-directories';
import styles from './rules.module.css';
const getBoardShortCode = (title?: string): string => {
@@ -16,7 +16,7 @@ const getBoardName = (title?: string): string => {
return match ? match[1] : title;
};
const BoardRulesDisplay = ({ subplebbitAddress, defaultSubplebbits }: { subplebbitAddress: string; defaultSubplebbits: MultisubSubplebbit[] }) => {
const BoardRulesDisplay = ({ subplebbitAddress, directories }: { subplebbitAddress: string; directories: DirectoryCommunity[] }) => {
const subplebbit = useSubplebbit({ subplebbitAddress });
const { rules, state, title, shortAddress } = subplebbit || {};
@@ -42,7 +42,7 @@ const BoardRulesDisplay = ({ subplebbitAddress, defaultSubplebbits }: { subplebb
const isLoaded = state === 'succeeded';
const defaultSub = defaultSubplebbits.find((sub) => sub.address === subplebbitAddress);
const defaultSub = directories.find((sub) => sub.address === subplebbitAddress);
let displayTitle: string;
if (defaultSub?.title) {
const shortCode = getBoardShortCode(defaultSub.title);
@@ -87,11 +87,11 @@ const BoardRulesDisplay = ({ subplebbitAddress, defaultSubplebbits }: { subplebb
};
const BoardSelector = ({
defaultSubplebbits,
directories,
selectedAddress,
onSelect,
}: {
defaultSubplebbits: MultisubSubplebbit[];
directories: DirectoryCommunity[];
selectedAddress: string;
onSelect: (address: string) => void;
}) => {
@@ -121,7 +121,7 @@ const BoardSelector = ({
<div className={styles.selectorRow}>
<select value={selectedAddress} onChange={handleSelectChange} className={styles.boardSelect}>
<option value=''>Select board...</option>
{defaultSubplebbits.map((sub) => {
{directories.map((sub) => {
const shortCode = getBoardShortCode(sub.title);
const boardName = getBoardName(sub.title);
return (
@@ -151,7 +151,7 @@ const BoardSelector = ({
};
const Rules = () => {
const defaultSubplebbits = useDefaultSubplebbits();
const directories = useDirectories();
const [selectedAddress, setSelectedAddress] = useState('');
useEffect(() => {
@@ -175,8 +175,8 @@ const Rules = () => {
Please read and respect the rules of whatever board you decide to post to.
</div>
</div>
<BoardSelector defaultSubplebbits={defaultSubplebbits} selectedAddress={selectedAddress} onSelect={setSelectedAddress} />
{selectedAddress && <BoardRulesDisplay subplebbitAddress={selectedAddress} defaultSubplebbits={defaultSubplebbits} />}
<BoardSelector directories={directories} selectedAddress={selectedAddress} onSelect={setSelectedAddress} />
{selectedAddress && <BoardRulesDisplay subplebbitAddress={selectedAddress} directories={directories} />}
<Footer />
</div>
</div>