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: add "hidden threads" counter and button in catalog and board view, store and hook

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-05-30 18:01:37 +02:00
parent 32f52200b7
commit fd092f1bee
10 changed files with 153 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/board/board.tsx
+36 -17
View File
@@ -5,6 +5,8 @@ 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 useBlockedCommentsStore from '../../stores/useBlockedCommentsStore';
import useBlockedComments from '../../hooks/use-blocked-comments';
import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
import useFeedStateString from '../../hooks/use-feed-state-string';
import useReplyModal from '../../hooks/use-reply-modal';
@@ -42,6 +44,19 @@ const Board = () => {
const sortType = 'active';
const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType });
const { resetShowBlockedComments, showBlockedComments, setShowBlockedComments } = useBlockedCommentsStore();
const blockedComments = useBlockedComments(subplebbitAddress);
useEffect(() => {
resetShowBlockedComments();
}, [subplebbitAddress, resetShowBlockedComments]);
useEffect(() => {
if (blockedComments.length === 0) {
setShowBlockedComments(false);
}
}, [blockedComments, setShowBlockedComments]);
const subplebbit = useSubplebbit({ subplebbitAddress });
const { createdAt, description, rules, shortAddress, state, suggested } = subplebbit || {};
const title = isInAllView ? t('all') : isInSubscriptionsView ? t('subscriptions') : subplebbit?.title;
@@ -96,7 +111,7 @@ const Board = () => {
<div className={styles.content}>
{location.pathname.endsWith('/settings') && <SettingsModal />}
{showReplyModal && activeCid && <ReplyModal closeModal={closeModal} parentCid={activeCid} scrollY={scrollY} />}
{feed.length > 0 && (
{feed.length > 0 && !showBlockedComments && (
<>
{rules && rules.length > 0 && <SubplebbitRules subplebbitAddress={subplebbitAddress} createdAt={createdAt} rules={rules} />}
{((description && description.length > 0) || isInAllView) && (
@@ -111,23 +126,27 @@ const Board = () => {
)}
</>
)}
<Virtuoso
increaseViewportBy={{ bottom: 1200, top: 1200 }}
totalCount={feed?.length || 0}
data={feed}
itemContent={(index, post) => {
const { deleted, locked, removed } = post || {};
const isThreadClosed = deleted || locked || removed;
{showBlockedComments ? (
blockedComments.map((comment) => <Post key={comment.cid} post={comment} />)
) : (
<Virtuoso
increaseViewportBy={{ bottom: 1200, top: 1200 }}
totalCount={feed?.length || 0}
data={feed}
itemContent={(index, post) => {
const { deleted, locked, removed } = post || {};
const isThreadClosed = deleted || locked || removed;
return <Post index={index} post={post} openReplyModal={isThreadClosed ? () => alert(t('thread_closed_alert')) : openReplyModal} />;
}}
useWindowScroll={true}
components={{ Footer }}
endReached={loadMore}
ref={virtuosoRef}
restoreStateFrom={lastVirtuosoState}
initialScrollTop={lastVirtuosoState?.scrollTop}
/>
return <Post index={index} post={post} openReplyModal={isThreadClosed ? () => alert(t('thread_closed_alert')) : openReplyModal} />;
}}
useWindowScroll={true}
components={{ Footer }}
endReached={loadMore}
ref={virtuosoRef}
restoreStateFrom={lastVirtuosoState}
initialScrollTop={lastVirtuosoState?.scrollTop}
/>
)}
</div>
);
};
src/views/catalog/catalog.tsx
+25 -7
View File
@@ -4,6 +4,8 @@ import { useTranslation } from 'react-i18next';
import { useAccount, Subplebbit, useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils';
import useBlockedCommentsStore from '../../stores/useBlockedCommentsStore';
import useBlockedComments from '../../hooks/use-blocked-comments';
import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
import useFeedStateString from '../../hooks/use-feed-state-string';
import { useMultisubMetadata } from '../../hooks/use-default-subplebbits';
@@ -16,7 +18,7 @@ import _ from 'lodash';
const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
const useFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolean, subplebbit: Subplebbit) => {
const useFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolean, subplebbit: Subplebbit, includeDescriptionAndRules: boolean) => {
const { t } = useTranslation();
const { address, createdAt, description, rules, shortAddress, suggested, title } = subplebbit || {};
const { avatarUrl } = suggested || {};
@@ -29,7 +31,7 @@ const useFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolean, subp
if (!isFeedLoaded) {
return []; // prevent rules and description from appearing while feed is loading
}
if (!description && !rules && !isInAllView) {
if (!includeDescriptionAndRules || (!description && !rules && !isInAllView)) {
return feed;
}
const _feed = [...feed];
@@ -59,7 +61,7 @@ const useFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolean, subp
});
}
return _feed;
}, [feed, description, rules, address, isFeedLoaded, createdAt, title, shortAddress, avatarUrl, t, isInAllView, multisub]);
}, [feed, description, rules, address, isFeedLoaded, createdAt, title, shortAddress, avatarUrl, t, isInAllView, multisub, includeDescriptionAndRules]);
// Memoize rows calculation, ensuring it updates on changes to the modified feed or column count
const rows = useMemo(() => {
@@ -102,8 +104,25 @@ const Catalog = () => {
// eslint-disable-next-line
const postsPerPage = useMemo(() => (columnCount <= 2 ? 10 : columnCount === 3 ? 15 : columnCount === 4 ? 20 : 25), []);
const blockedComments = useBlockedComments(subplebbitAddress);
const blockedCommentsAddresses = useMemo(() => blockedComments.map((comment) => comment.cid), [blockedComments]);
const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType: 'active', postsPerPage });
const filteredFeed = useMemo(() => feed.filter((comment) => !blockedCommentsAddresses.includes(comment.cid)), [feed, blockedCommentsAddresses]);
const { resetShowBlockedComments, showBlockedComments, setShowBlockedComments } = useBlockedCommentsStore();
useEffect(() => {
resetShowBlockedComments();
}, [subplebbitAddress, resetShowBlockedComments]);
useEffect(() => {
if (blockedComments.length === 0) {
setShowBlockedComments(false);
}
}, [blockedComments, setShowBlockedComments]);
const subplebbit = useSubplebbit({ subplebbitAddress });
const { shortAddress, state, title } = subplebbit || {};
const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading');
@@ -121,7 +140,7 @@ const Catalog = () => {
const Footer = () => {
let footerContent;
if (feed.length === 0) {
if ((showBlockedComments ? blockedComments : filteredFeed).length === 0) {
footerContent = t('no_posts');
}
if (hasMore || subplebbitAddresses.length === 0) {
@@ -130,10 +149,9 @@ const Catalog = () => {
return <div className={styles.footer}>{footerContent}</div>;
};
const isFeedloaded = feed.length > 0 || state === 'failed';
const isFeedLoaded = (showBlockedComments ? blockedComments : filteredFeed).length > 0 || state === 'failed';
// split feed into rows
const rows = useFeedRows(columnCount, feed, isFeedloaded, subplebbit);
const rows = useFeedRows(columnCount, showBlockedComments ? blockedComments : filteredFeed, isFeedLoaded, subplebbit, !showBlockedComments);
// save the last Virtuoso state to restore it when navigating back
const virtuosoRef = useRef<VirtuosoHandle | null>(null);