From 09f05ac8a0eb5b655e31f21e45c83e6e7ef8b57d Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Fri, 17 May 2024 17:25:25 +0200 Subject: [PATCH] feat(p/all): add description view --- src/app.tsx | 20 ++++++----- .../board-buttons/board-buttons.tsx | 11 ++++--- src/components/catalog-row/catalog-row.tsx | 9 +++-- .../post/post-desktop/post-desktop.tsx | 8 ++++- src/lib/utils/view-utils.ts | 2 +- src/views/board/board.tsx | 6 ++-- src/views/catalog/catalog.tsx | 33 ++++++++++++++----- 7 files changed, 60 insertions(+), 29 deletions(-) diff --git a/src/app.tsx b/src/app.tsx index 40638493..89b51355 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -70,17 +70,8 @@ const App = () => { }> } /> } /> - } /> - } /> - } /> - } /> - } /> } /> - } /> - } /> - } /> - } /> } /> } /> @@ -89,6 +80,17 @@ const App = () => { } /> } /> + } /> + } /> + } /> + } /> + } /> + + } /> + } /> + } /> + } /> + } /> } /> diff --git a/src/components/board-buttons/board-buttons.tsx b/src/components/board-buttons/board-buttons.tsx index 2a4418e6..6571fd2f 100644 --- a/src/components/board-buttons/board-buttons.tsx +++ b/src/components/board-buttons/board-buttons.tsx @@ -56,11 +56,14 @@ const BottomButton = () => { export const MobileBoardButtons = () => { const params = useParams(); const location = useLocation(); - const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any }); - const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress; - const isInPostView = isPostPageView(location.pathname, params); + const isInAllView = isAllView(location.pathname); const isInCatalogView = isCatalogView(location.pathname); const isInPendingPostPage = isPendingPostView(location.pathname, params); + const isInPostView = isPostPageView(location.pathname, params); + const isInSubscriptionsView = isSubscriptionsView(location.pathname); + + const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any }); + const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress; return (
@@ -77,7 +80,7 @@ export const MobileBoardButtons = () => { ) : ( <> - + )} diff --git a/src/components/catalog-row/catalog-row.tsx b/src/components/catalog-row/catalog-row.tsx index fa9d8eb7..db5cc4ca 100644 --- a/src/components/catalog-row/catalog-row.tsx +++ b/src/components/catalog-row/catalog-row.tsx @@ -1,8 +1,9 @@ import { useEffect, useState } from 'react'; -import { Link } from 'react-router-dom'; +import { Link, useLocation } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { Comment } from '@plebbit/plebbit-react-hooks'; import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils'; +import { isAllView } from '../../lib/utils/view-utils'; import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame'; import useCountLinksInReplies from '../../hooks/use-count-links-in-replies'; import styles from './catalog-row.module.css'; @@ -60,7 +61,11 @@ const CatalogPost = ({ openMenu, post, toggleMenu }: CatalogPostProps) => { } const thumbnailDimensions = { '--width': displayWidth, '--height': displayHeight } as React.CSSProperties; - const postLink = `/p/${subplebbitAddress}/${isDescription ? 'description' : isRules ? 'rules' : `c/${cid}`}`; + + const location = useLocation(); + const isInAllView = isAllView(location.pathname); + + const postLink = isInAllView && isDescription ? `/p/all/description` : `/p/${subplebbitAddress}/${isDescription ? 'description' : isRules ? 'rules' : `c/${cid}`}`; const linkCount = useCountLinksInReplies(post); diff --git a/src/components/post/post-desktop/post-desktop.tsx b/src/components/post/post-desktop/post-desktop.tsx index 66364455..6207e2a9 100644 --- a/src/components/post/post-desktop/post-desktop.tsx +++ b/src/components/post/post-desktop/post-desktop.tsx @@ -114,7 +114,13 @@ const PostInfo = ({ openReplyModal, post, roles }: PostProps) => { )} {!isInPostView && !isReply && ( - [{_.capitalize(t('reply'))}] + [ + + {_.capitalize(t('reply'))} + + ] )} diff --git a/src/lib/utils/view-utils.ts b/src/lib/utils/view-utils.ts index 855f5dad..cb209a3d 100644 --- a/src/lib/utils/view-utils.ts +++ b/src/lib/utils/view-utils.ts @@ -14,7 +14,7 @@ export const isCatalogView = (pathname: string): boolean => { export const isDescriptionView = (pathname: string, params: ParamsType): boolean => { const decodedPathname = decodeURIComponent(pathname); - return params.subplebbitAddress ? decodedPathname.startsWith(`/p/${params.subplebbitAddress}/description`) : false; + return pathname === '/p/all/description' ? true : params.subplebbitAddress ? decodedPathname.startsWith(`/p/${params.subplebbitAddress}/description`) : false; }; export const isHomeView = (pathname: string): boolean => { diff --git a/src/views/board/board.tsx b/src/views/board/board.tsx index 409c928d..792c9cff 100644 --- a/src/views/board/board.tsx +++ b/src/views/board/board.tsx @@ -78,15 +78,15 @@ const Board = () => { const setLastVirtuosoState = () => { virtuosoRef.current?.getState((snapshot: StateSnapshot) => { if (snapshot?.ranges?.length) { - lastVirtuosoStates[subplebbitAddress + sortType] = snapshot; + lastVirtuosoStates[location.pathname] = snapshot; } }); }; window.addEventListener('scroll', setLastVirtuosoState); return () => window.removeEventListener('scroll', setLastVirtuosoState); - }, [subplebbitAddress, sortType]); + }, [location.pathname]); - const lastVirtuosoState = lastVirtuosoStates?.[subplebbitAddress + sortType]; + const lastVirtuosoState = lastVirtuosoStates?.[location.pathname]; useEffect(() => { document.title = title ? title : shortAddress; diff --git a/src/views/catalog/catalog.tsx b/src/views/catalog/catalog.tsx index ad44a5ff..dc735a48 100644 --- a/src/views/catalog/catalog.tsx +++ b/src/views/catalog/catalog.tsx @@ -6,6 +6,7 @@ import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso'; import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils'; import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits'; import useFeedStateString from '../../hooks/use-feed-state-string'; +import { useMultisubMetadata } from '../../hooks/use-default-subplebbits'; import useWindowWidth from '../../hooks/use-window-width'; import CatalogRow from '../../components/catalog-row'; import LoadingEllipsis from '../../components/loading-ellipsis'; @@ -20,23 +21,27 @@ const useFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolean, subp const { address, createdAt, description, rules, shortAddress, suggested, title } = subplebbit || {}; const { avatarUrl } = suggested || {}; + const location = useLocation(); + const isInAllView = isAllView(location.pathname); + const multisub = useMultisubMetadata(); + const feedWithDescriptionAndRules = useMemo(() => { if (!isFeedLoaded) { return []; // prevent rules and description from appearing while feed is loading } - if (!description && !rules) { + if (!description && !rules && !isInAllView) { return feed; } const _feed = [...feed]; - if (description && description.length > 0) { + if ((description && description.length > 0) || isInAllView) { _feed.unshift({ isDescription: true, subplebbitAddress: address, timestamp: createdAt, author: { displayName: '## Board Mods' }, - content: description, + content: isInAllView ? multisub?.description : description, link: avatarUrl, - title: t('welcome_to_board', { board: title || `p/${shortAddress}` }), + title: t('welcome_to_board', { board: isInAllView ? multisub?.title : title || `p/${shortAddress}` }), pinned: true, locked: true, }); @@ -54,7 +59,7 @@ const useFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolean, subp }); } return _feed; - }, [feed, description, rules, address, isFeedLoaded, createdAt, title, shortAddress, avatarUrl, t]); + }, [feed, description, rules, address, isFeedLoaded, createdAt, title, shortAddress, avatarUrl, t, isInAllView, multisub]); // Memoize rows calculation, ensuring it updates on changes to the modified feed or column count const rows = useMemo(() => { @@ -102,7 +107,17 @@ const Catalog = () => { const subplebbit = useSubplebbit({ subplebbitAddress }); const { shortAddress, state, title } = subplebbit || {}; const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading'); - const loadingString =
{state === 'failed' ? state : }
; + const loadingString = ( +
+ {state === 'failed' ? ( + state + ) : isInSubscriptionsView && subscriptions?.length === 0 ? ( + `You haven't subscribed to any board yet.` + ) : ( + + )} +
+ ); const Footer = () => { let footerContent; @@ -126,14 +141,14 @@ const Catalog = () => { const setLastVirtuosoState = () => virtuosoRef.current?.getState((snapshot: StateSnapshot) => { if (snapshot?.ranges?.length) { - lastVirtuosoStates[subplebbitAddress + 'catalog'] = snapshot; + lastVirtuosoStates[location.pathname] = snapshot; } }); window.addEventListener('scroll', setLastVirtuosoState); return () => window.removeEventListener('scroll', setLastVirtuosoState); - }, [subplebbitAddress]); + }, [location.pathname]); - const lastVirtuosoState = lastVirtuosoStates?.[subplebbitAddress + 'catalog']; + const lastVirtuosoState = lastVirtuosoStates?.[location.pathname]; useEffect(() => { let documentTitle = title ? title : shortAddress;