diff --git a/src/app.tsx b/src/app.tsx index b28f0b92..98a56633 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -37,7 +37,7 @@ const BoardLayout = () => { - + {subplebbitAddress && isValidSubplebbitAddress && } @@ -71,6 +71,12 @@ const App = () => { } /> } /> + } /> + } /> + + } /> + } /> + } /> } /> diff --git a/src/lib/utils/view-utils.ts b/src/lib/utils/view-utils.ts index 230e81e5..dbb6b595 100644 --- a/src/lib/utils/view-utils.ts +++ b/src/lib/utils/view-utils.ts @@ -4,8 +4,13 @@ export type ParamsType = { subplebbitAddress?: string; }; -export const isHomeView = (pathname: string): boolean => { - return pathname === '/'; +export const isAllView = (pathname: string): boolean => { + return pathname === '/p/all'; +}; + +export const isCatalogView = (pathname: string, params: ParamsType): boolean => { + const decodedPathname = decodeURIComponent(pathname); + return params.subplebbitAddress ? decodedPathname.startsWith(`/p/${params.subplebbitAddress}/catalog`) : false; }; export const isDescriptionView = (pathname: string, params: ParamsType): boolean => { @@ -13,9 +18,12 @@ export const isDescriptionView = (pathname: string, params: ParamsType): boolean return params.subplebbitAddress ? decodedPathname.startsWith(`/p/${params.subplebbitAddress}/description`) : false; }; -export const isRulesView = (pathname: string, params: ParamsType): boolean => { - const decodedPathname = decodeURIComponent(pathname); - return params.subplebbitAddress ? decodedPathname.startsWith(`/p/${params.subplebbitAddress}/rules`) : false; +export const isHomeView = (pathname: string): boolean => { + return pathname === '/'; +}; + +export const isPendingPostView = (pathname: string, params: ParamsType): boolean => { + return pathname === `/profile/${params.accountCommentIndex}`; }; export const isPostPageView = (pathname: string, params: ParamsType): boolean => { @@ -26,22 +34,22 @@ export const isPostPageView = (pathname: string, params: ParamsType): boolean => return params.subplebbitAddress && params.commentCid ? decodedPathname.startsWith(`/p/${params.subplebbitAddress}/c/${params.commentCid}`) : false; }; -export const isCatalogView = (pathname: string, params: ParamsType): boolean => { +export const isRulesView = (pathname: string, params: ParamsType): boolean => { const decodedPathname = decodeURIComponent(pathname); - return params.subplebbitAddress ? decodedPathname.startsWith(`/p/${params.subplebbitAddress}/catalog`) : false; + return params.subplebbitAddress ? decodedPathname.startsWith(`/p/${params.subplebbitAddress}/rules`) : false; }; -export const isPendingPostView = (pathname: string, params: ParamsType): boolean => { - return pathname === `/profile/${params.accountCommentIndex}`; +export const isSubscriptionsView = (pathname: string): boolean => { + return pathname === '/p/subscriptions'; }; export const isNotFoundView = (pathname: string, params: ParamsType): boolean => { return ( - !isHomeView(pathname) && - !isDescriptionView(pathname, params) && - !isRulesView(pathname, params) && - !isPostPageView(pathname, params) && !isCatalogView(pathname, params) && - !isPendingPostView(pathname, params) + !isDescriptionView(pathname, params) && + !isHomeView(pathname) && + !isPendingPostView(pathname, params) && + !isPostPageView(pathname, params) && + !isRulesView(pathname, params) ); }; diff --git a/src/views/board/board.tsx b/src/views/board/board.tsx index 3571bf8e..6b855979 100644 --- a/src/views/board/board.tsx +++ b/src/views/board/board.tsx @@ -1,9 +1,11 @@ import { useEffect, useMemo, useRef } from 'react'; import { useLocation, useParams } from 'react-router-dom'; -import { useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks'; +import { useAccount, useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso'; import { useTranslation } from 'react-i18next'; import styles from './board.module.css'; +import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils'; +import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits'; import useFeedStateString from '../../hooks/use-feed-state-string'; import useReplyModal from '../../hooks/use-reply-modal'; import LoadingEllipsis from '../../components/loading-ellipsis'; @@ -19,12 +21,30 @@ const Board = () => { const { t } = useTranslation(); const location = useLocation(); const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>(); - const subplebbitAddresses = useMemo(() => [subplebbitAddress], [subplebbitAddress]) as string[]; + + const isInAllView = isAllView(location.pathname); + const defaultSubplebbitAddresses = useDefaultSubplebbitAddresses(); + + const account = useAccount(); + const subscriptions = account?.subscriptions; + const isInSubscriptionsView = isSubscriptionsView(location.pathname); + + const subplebbitAddresses = useMemo(() => { + if (isInAllView) { + return defaultSubplebbitAddresses; + } + if (isInSubscriptionsView) { + return subscriptions || []; + } + return [subplebbitAddress]; + }, [isInAllView, isInSubscriptionsView, subplebbitAddress, defaultSubplebbitAddresses, subscriptions]); + const sortType = 'active'; const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType }); const subplebbit = useSubplebbit({ subplebbitAddress }); - const { createdAt, description, rules, shortAddress, state, suggested, title } = subplebbit || {}; + const { createdAt, description, rules, shortAddress, state, suggested } = subplebbit || {}; + const title = isInAllView ? t('all') : isInSubscriptionsView ? t('subscriptions') : subplebbit?.title; const { activeCid, closeModal, openReplyModal, showReplyModal, scrollY } = useReplyModal(); @@ -69,16 +89,17 @@ const Board = () => { {feed.length > 0 && ( <> {rules && rules.length > 0 && } - {description && description.length > 0 && ( - - )} + {(description && description.length > 0) || + (isInAllView && ( + + ))} > )} + Multiboards + + + All + + + Subscriptions + + Plebbit {plebbitSubs.map((sub) => (