External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(p/all): add description view

Browse Source
This commit is contained in:
plebeius.eth
2024-05-17 17:25:25 +02:00
parent b07a06fa12
commit 09f05ac8a0
7 changed files with 60 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.tsx
+11 -9
View File
@@ -70,17 +70,8 @@ const App = () => {
<Route element={<BoardLayout />}>
<Route path='/p/:subplebbitAddress' element={<Board />} />
<Route path='/p/:subplebbitAddress/settings' element={<Board />} />
<Route path='/p/all' element={<Board />} />
<Route path='/p/all/settings' element={<Board />} />
<Route path='/p/subscriptions' element={<Board />} />
<Route path='/p/subscriptions/settings' element={<Board />} />
<Route path='/p/:subplebbitAddress/catalog' element={<Catalog />} />
<Route path='/p/:subplebbitAddress/catalog/settings' element={<Catalog />} />
<Route path='/p/all/catalog' element={<Catalog />} />
<Route path='/p/all/catalog/settings' element={<Catalog />} />
<Route path='/p/subscriptions/catalog' element={<Catalog />} />
<Route path='/p/subscriptions/catalog/settings' element={<Catalog />} />
<Route path='/p/:subplebbitAddress/c/:commentCid' element={<PostPage />} />
<Route path='/p/:subplebbitAddress/c/:commentCid/settings' element={<PostPage />} />
@@ -89,6 +80,17 @@ const App = () => {
<Route path='/p/:subplebbitAddress/rules' element={<PostPage />} />
<Route path='/p/:subplebbitAddress/rules/settings' element={<PostPage />} />
<Route path='/p/all' element={<Board />} />
<Route path='/p/all/description' element={<PostPage />} />
<Route path='/p/all/settings' element={<Board />} />
<Route path='/p/all/catalog' element={<Catalog />} />
<Route path='/p/all/catalog/settings' element={<Catalog />} />
<Route path='/p/subscriptions' element={<Board />} />
<Route path='/p/subscriptions/settings' element={<Board />} />
<Route path='/p/subscriptions/catalog' element={<Catalog />} />
<Route path='/p/subscriptions/catalog/settings' element={<Catalog />} />
<Route path='/profile/:accountCommentIndex' element={<PendingPost />} />
<Route path='/profile/:accountCommentIndex/settings' element={<PendingPost />} />
</Route>
src/components/board-buttons/board-buttons.tsx
+7 -4
View File
@@ -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 (
<div className={styles.mobileBoardButtons}>
@@ -77,7 +80,7 @@ export const MobileBoardButtons = () => {
) : (
<>
<OptionsButton />
<CatalogButton address={subplebbitAddress} isInCatalogView={isInCatalogView} />
<CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInCatalogView={isInCatalogView} isInSubscriptionsView={isInSubscriptionsView} />
<SubscribeButton address={subplebbitAddress} />
</>
)}
src/components/catalog-row/catalog-row.tsx
+7 -2
View File
@@ -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);
src/components/post/post-desktop/post-desktop.tsx
+7 -1
View File
@@ -114,7 +114,13 @@ const PostInfo = ({ openReplyModal, post, roles }: PostProps) => {
)}
{!isInPostView && !isReply && (
<span className={styles.replyButton}>
[<Link to={`/p/${subplebbitAddress}/${isDescription ? 'description' : isRules ? 'rules' : `c/${postCid}`}`}>{_.capitalize(t('reply'))}</Link>]
[
<Link
to={isInAllView && isDescription ? '/p/all/description' : `/p/${subplebbitAddress}/${isDescription ? 'description' : isRules ? 'rules' : `c/${postCid}`}`}
>
{_.capitalize(t('reply'))}
</Link>
]
</span>
)}
</span>
src/lib/utils/view-utils.ts
+1 -1
View File
@@ -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 => {
src/views/board/board.tsx
+3 -3
View File
@@ -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;
src/views/catalog/catalog.tsx
+24 -9
View File
@@ -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 = <div className={styles.stateString}>{state === 'failed' ? state : <LoadingEllipsis string={loadingStateString} />}</div>;
const loadingString = (
<div className={styles.stateString}>
{state === 'failed' ? (
state
) : isInSubscriptionsView && subscriptions?.length === 0 ? (
`You haven't subscribed to any board yet.`
) : (
<LoadingEllipsis string={loadingStateString} />
)}
</div>
);
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;