From 6e472b2b17fb7b94790388567eb061e8f164a8e7 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Sun, 8 Sep 2024 14:47:52 +0200
Subject: [PATCH] perf(catalog): optimize filtered feed

---
 src/views/catalog/catalog.tsx | 68 ++++++++++++++++-------------------
 1 file changed, 30 insertions(+), 38 deletions(-)

diff --git a/src/views/catalog/catalog.tsx b/src/views/catalog/catalog.tsx
index ee7bc0fc..280064fb 100644
--- a/src/views/catalog/catalog.tsx
+++ b/src/views/catalog/catalog.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef, useCallback } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Comment, useAccount, useFeed, useSubplebbit, useBlock } from '@plebbit/plebbit-react-hooks';
@@ -21,25 +21,6 @@ import styles from './catalog.module.css';
 
 const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
 
-const threadsWithImagesFilter = (comment: Comment) => {
-  const commentMediaInfo = getCommentMediaInfo(comment);
-  const hasThumbnail = getHasThumbnail(commentMediaInfo, comment?.link);
-  return hasThumbnail;
-};
-
-const textFilter = (comment: Comment, filterItems: any[]) => {
-  if (!filterItems) return true;
-  if (filterItems.length === 0) return true;
-  const titleLower = comment?.title?.toLowerCase() || '';
-  const contentLower = comment?.content?.toLowerCase() || '';
-
-  return filterItems.every((item) => {
-    if (!item.enabled) return true;
-    const pattern = item.text.toLowerCase();
-    return !(titleLower.includes(pattern) || contentLower.includes(pattern));
-  });
-};
-
 const Catalog = () => {
   const { t } = useTranslation();
   const location = useLocation();
@@ -47,7 +28,7 @@ const Catalog = () => {
 
   const isInAllView = isAllView(location.pathname, useParams());
   const defaultSubplebbits = useDefaultSubplebbits();
-  const { showAdultBoards, showGoreBoards, showTextOnlyThreads, filterItems } = useCatalogFiltersStore();
+  const { showAdultBoards, showGoreBoards } = useCatalogFiltersStore();
 
   const account = useAccount();
   const subscriptions = account?.subscriptions;
@@ -76,31 +57,42 @@ const Catalog = () => {
     return [subplebbitAddress];
   }, [isInAllView, isInSubscriptionsView, subplebbitAddress, defaultSubplebbits, subscriptions, showAdultBoards, showGoreBoards]);
 
+  const { showTextOnlyThreads, filterItems } = useCatalogFiltersStore();
+
+  const filter = useCallback(
+    (comment: Comment) => {
+      if (!showTextOnlyThreads && !getHasThumbnail(getCommentMediaInfo(comment), comment?.link)) {
+        return false;
+      }
+
+      const title = comment?.title?.toLowerCase() || '';
+      const content = comment?.content?.toLowerCase() || '';
+
+      return !filterItems
+        .filter((item) => item.enabled)
+        .some((item) => {
+          const text = item.text.toLowerCase();
+          return title.includes(text) || content.includes(text);
+        });
+    },
+    [filterItems, showTextOnlyThreads],
+  );
+
   const { imageSize } = useCatalogStyleStore();
   const columnWidth = imageSize === 'Large' ? 270 : 180;
 
   const columnCount = Math.floor(useWindowWidth() / columnWidth);
-  // postPerPage based on columnCount for optimized feed, dont change value after first render
-  // eslint-disable-next-line
-  const postsPerPage = useMemo(() => (columnCount <= 2 ? 10 : columnCount === 3 ? 15 : columnCount === 4 ? 20 : 25), []);
+  const postsPerPage = columnCount <= 2 ? 10 : columnCount === 3 ? 15 : columnCount === 4 ? 20 : 25;
 
   const { timeFilterSeconds } = useTimeFilter();
   const { sortType } = useSortingStore();
 
-  const feedOptions: any = useMemo(
-    () => ({
-      subplebbitAddresses,
-      sortType,
-      postsPerPage: isInAllView || isInSubscriptionsView ? 10 : postsPerPage,
-      filter: (comment: Comment) => {
-        if (!showTextOnlyThreads && !threadsWithImagesFilter(comment)) {
-          return false;
-        }
-        return textFilter(comment, filterItems);
-      },
-    }),
-    [subplebbitAddresses, sortType, isInAllView, isInSubscriptionsView, postsPerPage, showTextOnlyThreads, filterItems],
-  );
+  const feedOptions: any = {
+    subplebbitAddresses,
+    sortType,
+    postsPerPage: isInAllView || isInSubscriptionsView ? 10 : postsPerPage,
+    filter,
+  };
 
   if (isInAllView || isInSubscriptionsView) {
     feedOptions.newerThan = timeFilterSeconds;