From 1cfd823ad9183e443c3786c819d995fa9819476a Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Wed, 11 Sep 2024 21:34:25 +0200
Subject: [PATCH] Revert "fix(catalog filters): clicking "hide threads without
 images" would run the filter before clicking save"

This reverts commit 319ff28b51fc5a538648f2fbcc417a6d68d7f68b.
---
 .../catalog-filters/catalog-filters.tsx       | 89 +++++--------------
 1 file changed, 24 insertions(+), 65 deletions(-)

diff --git a/src/views/catalog/catalog-filters/catalog-filters.tsx b/src/views/catalog/catalog-filters/catalog-filters.tsx
index 683b8373..c44aa579 100644
--- a/src/views/catalog/catalog-filters/catalog-filters.tsx
+++ b/src/views/catalog/catalog-filters/catalog-filters.tsx
@@ -5,21 +5,15 @@ import { isAllView, isCatalogView } from '../../../lib/utils/view-utils';
 import useCatalogFiltersStore from '../../../stores/use-catalog-filters-store';
 import styles from './catalog-filters.module.css';
 
-const FiltersTable = ({
-  localFilterItems,
-  setLocalFilterItems,
-  onSave,
-}: {
-  localFilterItems: any[];
-  setLocalFilterItems: React.Dispatch<React.SetStateAction<any[]>>;
-  onSave: () => void;
-}) => {
+const FiltersTable = ({ onSave }: { onSave: () => void }) => {
   const { t } = useTranslation();
-  const { saveAndApplyFilters } = useCatalogFiltersStore();
+  const { filterItems, saveAndApplyFilters } = useCatalogFiltersStore();
+
+  const [localFilterItems, setLocalFilterItems] = useState(filterItems);
 
   const handleAddFilter = useCallback(() => {
     setLocalFilterItems((prev) => [...prev, { text: '', enabled: true }]);
-  }, [setLocalFilterItems]);
+  }, []);
 
   const handleSave = useCallback(() => {
     const nonEmptyFilters = localFilterItems.filter((item) => item.text.trim() !== '');
@@ -27,31 +21,22 @@ const FiltersTable = ({
     onSave();
   }, [saveAndApplyFilters, localFilterItems, onSave]);
 
-  const updateLocalFilterItem = useCallback(
-    (index: number, item: any) => {
-      setLocalFilterItems((prev) => prev.map((f, i) => (i === index ? item : f)));
-    },
-    [setLocalFilterItems],
-  );
+  const updateLocalFilterItem = useCallback((index: number, item: any) => {
+    setLocalFilterItems((prev) => prev.map((f, i) => (i === index ? item : f)));
+  }, []);
 
-  const removeLocalFilterItem = useCallback(
-    (index: number) => {
-      setLocalFilterItems((prev) => prev.filter((_, i) => i !== index));
-    },
-    [setLocalFilterItems],
-  );
+  const removeLocalFilterItem = useCallback((index: number) => {
+    setLocalFilterItems((prev) => prev.filter((_, i) => i !== index));
+  }, []);
 
-  const moveLocalFilterItemUp = useCallback(
-    (index: number) => {
-      if (index === 0) return;
-      setLocalFilterItems((prev) => {
-        const newItems = [...prev];
-        [newItems[index - 1], newItems[index]] = [newItems[index], newItems[index - 1]];
-        return newItems;
-      });
-    },
-    [setLocalFilterItems],
-  );
+  const moveLocalFilterItemUp = useCallback((index: number) => {
+    if (index === 0) return;
+    setLocalFilterItems((prev) => {
+      const newItems = [...prev];
+      [newItems[index - 1], newItems[index]] = [newItems[index], newItems[index - 1]];
+      return newItems;
+    });
+  }, []);
 
   return (
     <table className={styles.filtersTable}>
@@ -115,38 +100,12 @@ const FiltersTable = ({
 
 const FiltersModal = ({ closeModal }: { closeModal: () => void }) => {
   const { t } = useTranslation();
-  const { showAdultBoards, setShowAdultBoards, showGoreBoards, setShowGoreBoards, showTextOnlyThreads, setShowTextOnlyThreads, filterItems, saveAndApplyFilters } =
-    useCatalogFiltersStore();
-
-  const [localShowAdultBoards, setLocalShowAdultBoards] = useState(showAdultBoards);
-  const [localShowGoreBoards, setLocalShowGoreBoards] = useState(showGoreBoards);
-  const [localShowTextOnlyThreads, setLocalShowTextOnlyThreads] = useState(showTextOnlyThreads);
-  const [localFilterItems, setLocalFilterItems] = useState(filterItems);
-
+  const { showAdultBoards, setShowAdultBoards, showGoreBoards, setShowGoreBoards, showTextOnlyThreads, setShowTextOnlyThreads } = useCatalogFiltersStore();
   const location = useLocation();
   const params = useParams();
   const isInCatalogView = isCatalogView(location.pathname, params);
   const isInAllView = isAllView(location.pathname, params);
 
-  const handleSave = useCallback(() => {
-    setShowAdultBoards(localShowAdultBoards);
-    setShowGoreBoards(localShowGoreBoards);
-    setShowTextOnlyThreads(localShowTextOnlyThreads);
-    const nonEmptyFilters = localFilterItems.filter((item) => item.text.trim() !== '');
-    saveAndApplyFilters(nonEmptyFilters);
-    closeModal();
-  }, [
-    localShowAdultBoards,
-    localShowGoreBoards,
-    localShowTextOnlyThreads,
-    localFilterItems,
-    setShowAdultBoards,
-    setShowGoreBoards,
-    setShowTextOnlyThreads,
-    saveAndApplyFilters,
-    closeModal,
-  ]);
-
   return (
     <>
       <div className={styles.overlay} onClick={closeModal} />
@@ -159,7 +118,7 @@ const FiltersModal = ({ closeModal }: { closeModal: () => void }) => {
           {isInCatalogView && (
             <div>
               <label className='capitalize'>
-                <input type='checkbox' checked={!localShowTextOnlyThreads} onChange={(e) => setLocalShowTextOnlyThreads(!e.target.checked)} />
+                <input type='checkbox' checked={!showTextOnlyThreads} onChange={(e) => setShowTextOnlyThreads(!e.target.checked)} />
                 {t('hide_threads_without_images')}
               </label>
             </div>
@@ -168,20 +127,20 @@ const FiltersModal = ({ closeModal }: { closeModal: () => void }) => {
             <div className={styles.nsfwLabels}>
               <div>
                 <label>
-                  <input type='checkbox' checked={!localShowGoreBoards} onChange={(e) => setLocalShowGoreBoards(!e.target.checked)} />
+                  <input type='checkbox' checked={!showGoreBoards} onChange={(e) => setShowGoreBoards(!e.target.checked)} />
                   hide gore content
                 </label>
               </div>
               <div>
                 <label>
-                  <input type='checkbox' checked={!localShowAdultBoards} onChange={(e) => setLocalShowAdultBoards(!e.target.checked)} />
+                  <input type='checkbox' checked={!showAdultBoards} onChange={(e) => setShowAdultBoards(!e.target.checked)} />
                   hide adult content
                 </label>
               </div>
             </div>
           )}
         </div>
-        {isInCatalogView && <FiltersTable localFilterItems={localFilterItems} setLocalFilterItems={setLocalFilterItems} onSave={handleSave} />}
+        {isInCatalogView && <FiltersTable onSave={closeModal} />}
       </div>
     </>
   );