From a992912e109f4640f363c56851a4d7ee3e8dba0a Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Sun, 4 Aug 2024 15:40:09 +0200 Subject: [PATCH] show newly published account comments after pinned threads --- src/hooks/use-catalog-feed-rows.ts | 29 +++-- src/views/board/board.tsx | 177 +++++++++++++++-------------- 2 files changed, 111 insertions(+), 95 deletions(-) diff --git a/src/hooks/use-catalog-feed-rows.ts b/src/hooks/use-catalog-feed-rows.ts index 815bd311..fdd86b6a 100644 --- a/src/hooks/use-catalog-feed-rows.ts +++ b/src/hooks/use-catalog-feed-rows.ts @@ -31,29 +31,38 @@ const useCatalogFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolea const _feed = [...feed]; - // show account comments instantly in the feed instead of waiting for the next feed update, then hide them when they are in the feed - accountComments.forEach((comment) => { + // show account comments instantly in the feed once published (cid defined), instead of waiting for the feed to update + const filteredComments = accountComments.filter((comment) => { const { cid, deleted, link, postCid, removed, state, subplebbitAddress } = comment || {}; const commentMediaInfo = getCommentMediaInfo(comment); const isMediaShowed = getHasThumbnail(commentMediaInfo, link); - if ( + return ( !deleted && !removed && state === 'succeeded' && - (!showTextOnlyThreads || (showTextOnlyThreads && !isMediaShowed)) && + (showTextOnlyThreads || (!showTextOnlyThreads && isMediaShowed)) && cid && cid === postCid && subplebbitAddress === address && !_feed.some((feedItem) => feedItem.cid === cid) - ) { - _feed.unshift({ - ...comment, - isAccountComment: true, - }); - } + ); }); + // show newest account comment at the top of the feed but after pinned posts + const lastPinnedIndex = _feed.map((post) => post.pinned).lastIndexOf(true); + if (filteredComments.length > 0) { + _feed.splice( + lastPinnedIndex + 1, + 0, + ...filteredComments.map((comment) => ({ + ...comment, + isAccountComment: true, + })), + ); + } + + // add subplebbit description and rules as fake posts at the top of the feed if ((description && description.length > 0 && (showTextOnlyThreads || (!showTextOnlyThreads && suggested?.avatarUrl))) || isInAllView) { _feed.unshift({ isDescription: true, diff --git a/src/views/board/board.tsx b/src/views/board/board.tsx index b19671dd..f10ef3f2 100644 --- a/src/views/board/board.tsx +++ b/src/views/board/board.tsx @@ -20,28 +20,6 @@ import SubplebbitRules from '../../components/subplebbit-rules'; const lastVirtuosoStates: { [key: string]: StateSnapshot } = {}; -// show account comments instantly in the feed instead of waiting for the next feed update, then hide them when they are in the feed -const AccountCommentsNotYetInFeed = ({ subplebbitAddress, feed }: { subplebbitAddress: string; feed: any }) => { - const { accountComments } = useAccountComments(); - - const _feed = [...feed]; - - const filteredComments = accountComments.filter((comment) => { - const { cid, deleted, postCid, removed, state } = comment || {}; - return ( - !deleted && - !removed && - state === 'succeeded' && - cid && - cid === postCid && - comment?.subplebbitAddress === subplebbitAddress && - !_feed.some((post) => post.cid === cid) - ); - }); - - return filteredComments.map((comment) => ); -}; - const Board = () => { const { t } = useTranslation(); const location = useLocation(); @@ -67,22 +45,60 @@ const Board = () => { const { sortType } = useSortingStore(); const { timeFilterSeconds } = useTimeFilter(); - const feedOptions: any = { - subplebbitAddresses, - sortType, - postsPerPage: isInAllView || isInSubscriptionsView ? 5 : 25, - }; - - if (isInAllView || isInSubscriptionsView) { - feedOptions.newerThan = timeFilterSeconds; - } + const feedOptions: any = useMemo( + () => ({ + subplebbitAddresses, + sortType, + postsPerPage: isInAllView || isInSubscriptionsView ? 5 : 25, + ...(isInAllView || isInSubscriptionsView ? { newerThan: timeFilterSeconds } : {}), + }), + [subplebbitAddresses, sortType, timeFilterSeconds, isInAllView, isInSubscriptionsView], + ); const { feed, hasMore, loadMore, reset } = useFeed(feedOptions); + const { accountComments } = useAccountComments(); + + const resetTriggeredRef = useRef(false); const setResetFunction = useFeedResetStore((state) => state.setResetFunction); useEffect(() => { setResetFunction(reset); - }, [reset, setResetFunction]); + }, [reset, setResetFunction, feed]); + + // show account comments instantly in the feed once published (cid defined), instead of waiting for the feed to update + const filteredComments = useMemo( + () => + accountComments.filter((comment) => { + const { cid, deleted, postCid, removed, state } = comment || {}; + return ( + !deleted && + !removed && + state === 'succeeded' && + cid && + cid === postCid && + comment?.subplebbitAddress === subplebbitAddress && + !feed.some((post) => post.cid === cid) + ); + }), + [accountComments, subplebbitAddress, feed], + ); + + // show newest account comment at the top of the feed but after pinned posts + const combinedFeed = useMemo(() => { + const newFeed = [...feed]; + const lastPinnedIndex = newFeed.map((post) => post.pinned).lastIndexOf(true); + if (filteredComments.length > 0) { + newFeed.splice(lastPinnedIndex + 1, 0, ...filteredComments); + } + return newFeed; + }, [feed, filteredComments]); + + useEffect(() => { + if (filteredComments.length > 0 && !resetTriggeredRef.current) { + reset(); + resetTriggeredRef.current = true; + } + }, [filteredComments, reset]); const subplebbit = useSubplebbit({ subplebbitAddress }); const { createdAt, description, error, rules, shortAddress, state, suggested } = subplebbit || {}; @@ -90,6 +106,7 @@ const Board = () => { const { activeCid, closeModal, openReplyModal, showReplyModal, scrollY } = useReplyModal(); + const { blocked, unblock } = useBlock({ address: subplebbitAddress }); const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading'); const loadingString = (
@@ -97,6 +114,10 @@ const Board = () => { {state} ) : isInSubscriptionsView && subscriptions?.length === 0 ? ( t('not_subscribed_to_any_board') + ) : blocked ? ( + 'you have blocked this board' + ) : !hasMore && feed.length === 0 ? ( + t('no_posts') ) : ( )} @@ -109,40 +130,8 @@ const Board = () => {
); - const { blocked, unblock } = useBlock({ address: subplebbitAddress }); - const Footer = () => { - let footerContent; - if (feed.length === 0) { - if (blocked) { - footerContent = 'you have blocked this board'; - } else { - footerContent = t('no_posts'); - } - } - if (hasMore || subplebbitAddresses.length === 0) { - footerContent = loadingString; - } - return ( -
- {footerContent} - {blocked && ( - <> -   [ - { - unblock(); - reset(); - }} - > - Unblock - - ] - - )} -
- ); + return
{loadingString}
; }; // save the last Virtuoso state to restore it when navigating back @@ -170,7 +159,7 @@ const Board = () => {
{location.pathname.endsWith('/settings') && } {showReplyModal && activeCid && } - {feed.length > 0 && ( + {feed.length !== 0 ? ( <> {rules && rules.length > 0 && } {((description && description.length > 0) || isInAllView) && ( @@ -183,26 +172,44 @@ const Board = () => { title={title} /> )} - {subplebbitAddress && } - - )} - { - const { deleted, locked, removed } = post || {}; - const isThreadClosed = deleted || locked || removed; + { + const { deleted, locked, removed } = post || {}; + const isThreadClosed = deleted || locked || removed; - return alert(t('thread_closed_alert')) : openReplyModal} />; - }} - useWindowScroll={true} - components={{ Footer }} - endReached={loadMore} - ref={virtuosoRef} - restoreStateFrom={lastVirtuosoState} - initialScrollTop={lastVirtuosoState?.scrollTop} - /> + return alert(t('thread_closed_alert')) : openReplyModal} />; + }} + useWindowScroll={true} + components={{ Footer }} + endReached={loadMore} + ref={virtuosoRef} + restoreStateFrom={lastVirtuosoState} + initialScrollTop={lastVirtuosoState?.scrollTop} + /> + + ) : ( +
+ {loadingString} + {blocked && ( + <> +   [ + { + unblock(); + reset(); + }} + > + Unblock + + ] + + )} +
+ )}
); };