revert "hidden threads" feat, must wait for 'filterHidden: false' API

src/components/board-buttons/board-buttons.tsx

@@ -3,8 +3,6 @@ import { Link, useLocation, useParams } from 'react-router-dom';
 import { useAccountComment, useSubscribe } from '@plebbit/plebbit-react-hooks';
 import styles from './board-buttons.module.css';
 import { isAllView, isCatalogView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
-import useBlockedComments from '../../hooks/use-blocked-comments';
-import useBlockedCommentsStore from '../../stores/useBlockedCommentsStore';
 
 interface BoardButtonsProps {
   isInAllView?: boolean;
@@ -107,9 +105,6 @@ export const DesktopBoardButtons = () => {
   const isInPostView = isPostPageView(location.pathname, params);
   const isInSubscriptionsView = isSubscriptionsView(location.pathname);
 
-  const { showBlockedComments, setShowBlockedComments } = useBlockedCommentsStore();
-  const blockedComments = useBlockedComments(params?.subplebbitAddress);
-
   return (
     <div className={styles.desktopBoardButtons}>
       <hr />
@@ -125,16 +120,6 @@ export const DesktopBoardButtons = () => {
         <>
           [<OptionsButton />] [
           <CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInCatalogView={isInCatalogView} isInSubscriptionsView={isInSubscriptionsView} />]
-          {blockedComments?.length > 0 && (
-            <span className={styles.blockedAddresses}>
-              {' '}
-              — Hidden threads: <strong>{blockedComments.length}</strong> [
-              <span className={styles.showBlockedButton} onClick={() => setShowBlockedComments(!showBlockedComments)}>
-                {showBlockedComments ? 'Back' : 'Show'}
-              </span>
-              ]
-            </span>
-          )}
           {!(isInAllView || isInSubscriptionsView) && (
             <span className={styles.subscribeButton}>
               [<SubscribeButton address={subplebbitAddress} />]

src/hooks/use-blocked-comments.ts

@@ -1,31 +0,0 @@
-import { useMemo } from 'react';
-import { Comment, useAccount, useComments } from '@plebbit/plebbit-react-hooks';
-
-const useBlockedComments = (subplebbitAddress?: string): Comment[] => {
-  const account = useAccount();
-
-  const commentCids = useMemo(() => {
-    return Object.entries(account.blockedAddresses)
-      .filter(([address, isBlocked]) => {
-        const isValidCommentCid = !address || /^Qm[a-zA-Z0-9]{44}$/.test(address);
-        return isBlocked && isValidCommentCid;
-      })
-      .map(([address]) => address);
-  }, [account]);
-
-  const { comments } = useComments({ commentCids });
-
-  const filteredComments = useMemo(() => {
-    const validComments = comments.filter((comment): comment is Comment => comment !== undefined);
-
-    if (!subplebbitAddress) {
-      return validComments;
-    }
-
-    return validComments.filter((comment: Comment) => comment.subplebbitAddress === subplebbitAddress);
-  }, [comments, subplebbitAddress]);
-
-  return filteredComments;
-};
-
-export default useBlockedComments;

src/stores/useBlockedCommentsStore.ts

@@ -1,15 +0,0 @@
-import { create } from 'zustand';
-
-interface StoreState {
-  showBlockedComments: boolean;
-  setShowBlockedComments: (show: boolean) => void;
-  resetShowBlockedComments: () => void;
-}
-
-const useStore = create<StoreState>((set) => ({
-  showBlockedComments: false,
-  setShowBlockedComments: (show) => set({ showBlockedComments: show }),
-  resetShowBlockedComments: () => set({ showBlockedComments: false }),
-}));
-
-export default useStore;

src/views/board/board.tsx

@@ -5,8 +5,6 @@ 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';
@@ -44,19 +42,6 @@ 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;
@@ -111,7 +96,7 @@ const Board = () => {
     <div className={styles.content}>
       {location.pathname.endsWith('/settings') && <SettingsModal />}
       {showReplyModal && activeCid && <ReplyModal closeModal={closeModal} parentCid={activeCid} scrollY={scrollY} />}
-      {feed.length > 0 && !showBlockedComments && (
+      {feed.length > 0 && (
         <>
           {rules && rules.length > 0 && <SubplebbitRules subplebbitAddress={subplebbitAddress} createdAt={createdAt} rules={rules} />}
           {((description && description.length > 0) || isInAllView) && (
@@ -126,27 +111,23 @@ const Board = () => {
           )}
         </>
       )}
-      {showBlockedComments ? (
+      <Virtuoso
-        blockedComments.map((comment) => <Post key={comment.cid} post={comment} />)
+        increaseViewportBy={{ bottom: 1200, top: 1200 }}
-      ) : (
+        totalCount={feed?.length || 0}
-        <Virtuoso
+        data={feed}
-          increaseViewportBy={{ bottom: 1200, top: 1200 }}
+        itemContent={(index, post) => {
-          totalCount={feed?.length || 0}
+          const { deleted, locked, removed } = post || {};
-          data={feed}
+          const isThreadClosed = deleted || locked || removed;
-          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} />;
+          return <Post index={index} post={post} openReplyModal={isThreadClosed ? () => alert(t('thread_closed_alert')) : openReplyModal} />;
-          }}
+        }}
-          useWindowScroll={true}
+        useWindowScroll={true}
-          components={{ Footer }}
+        components={{ Footer }}
-          endReached={loadMore}
+        endReached={loadMore}
-          ref={virtuosoRef}
+        ref={virtuosoRef}
-          restoreStateFrom={lastVirtuosoState}
+        restoreStateFrom={lastVirtuosoState}
-          initialScrollTop={lastVirtuosoState?.scrollTop}
+        initialScrollTop={lastVirtuosoState?.scrollTop}
-        />
+      />
-      )}
     </div>
   );
 };

src/views/catalog/catalog.tsx

@@ -4,8 +4,6 @@ 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';
@@ -18,7 +16,7 @@ import _ from 'lodash';
 
 const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
 
-const useFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolean, subplebbit: Subplebbit, includeDescriptionAndRules: boolean) => {
+const useFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolean, subplebbit: Subplebbit) => {
   const { t } = useTranslation();
   const { address, createdAt, description, rules, shortAddress, suggested, title } = subplebbit || {};
   const { avatarUrl } = suggested || {};
@@ -31,7 +29,7 @@ const useFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolean, subp
     if (!isFeedLoaded) {
       return []; // prevent rules and description from appearing while feed is loading
     }
-    if (!includeDescriptionAndRules || (!description && !rules && !isInAllView)) {
+    if (!description && !rules && !isInAllView) {
       return feed;
     }
     const _feed = [...feed];
@@ -61,7 +59,7 @@ const useFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolean, subp
       });
     }
     return _feed;
-  }, [feed, description, rules, address, isFeedLoaded, createdAt, title, shortAddress, avatarUrl, t, isInAllView, multisub, includeDescriptionAndRules]);
+  }, [feed, description, rules, address, isFeedLoaded, createdAt, title, shortAddress, avatarUrl, t, isInAllView, multisub]);
 
   const rows = useMemo(() => {
     const rows = [];
@@ -103,25 +101,8 @@ 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');
@@ -139,7 +120,7 @@ const Catalog = () => {
 
   const Footer = () => {
     let footerContent;
-    if ((showBlockedComments ? blockedComments : filteredFeed).length === 0) {
+    if (feed.length === 0) {
       footerContent = t('no_posts');
     }
     if (hasMore || subplebbitAddresses.length === 0) {
@@ -148,9 +129,9 @@ const Catalog = () => {
     return <div className={styles.footer}>{footerContent}</div>;
   };
 
-  const isFeedLoaded = (showBlockedComments ? blockedComments : filteredFeed).length > 0 || state === 'failed';
+  const isFeedLoaded = feed.length > 0 || state === 'failed';
 
-  const rows = useFeedRows(columnCount, showBlockedComments ? blockedComments : filteredFeed, isFeedLoaded, subplebbit, !showBlockedComments);
+  const rows = useFeedRows(columnCount, feed, isFeedLoaded, subplebbit);
 
   // save the last Virtuoso state to restore it when navigating back
   const virtuosoRef = useRef<VirtuosoHandle | null>(null);
@@ -177,22 +158,18 @@ const Catalog = () => {
       {location.pathname.endsWith('/settings') && <SettingsModal />}
       <hr />
       <div className={styles.catalog}>
-        {showBlockedComments ? (
+        <Virtuoso
-          rows.map((row, index) => <CatalogRow key={index} index={index} row={row} />)
+          increaseViewportBy={{ bottom: 1200, top: 1200 }}
-        ) : (
+          totalCount={rows?.length || 0}
-          <Virtuoso
+          data={rows}
-            increaseViewportBy={{ bottom: 1200, top: 1200 }}
+          itemContent={(index, row) => <CatalogRow index={index} row={row} />}
-            totalCount={rows?.length || 0}
+          useWindowScroll={true}
-            data={rows}
+          components={{ Footer }}
-            itemContent={(index, row) => <CatalogRow index={index} row={row} />}
+          endReached={loadMore}
-            useWindowScroll={true}
+          ref={virtuosoRef}
-            components={{ Footer }}
+          restoreStateFrom={lastVirtuosoState}
-            endReached={loadMore}
+          initialScrollTop={lastVirtuosoState?.scrollTop}
-            ref={virtuosoRef}
+        />
-            restoreStateFrom={lastVirtuosoState}
-            initialScrollTop={lastVirtuosoState?.scrollTop}
-          />
-        )}
       </div>
     </div>
   );