From 8f0efaf15ff4fbc7fefad5d5f7c000cb7ec32faa Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Thu, 5 Sep 2024 16:01:45 +0200
Subject: [PATCH] prevent catalog filter with empty value

---
 src/stores/use-catalog-filters-store.ts       | 12 ++++++----
 .../catalog-filters.module.css                |  8 +++++--
 .../catalog-filters/catalog-filters.tsx       | 24 +++++++++----------
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/stores/use-catalog-filters-store.ts b/src/stores/use-catalog-filters-store.ts
index 9ddccde8..543f7478 100644
--- a/src/stores/use-catalog-filters-store.ts
+++ b/src/stores/use-catalog-filters-store.ts
@@ -22,7 +22,7 @@ interface CatalogFiltersStore {
 
 const useCatalogFiltersStore = create(
   persist<CatalogFiltersStore>(
-    (set, get) => ({
+    (set) => ({
       showTextOnlyThreads: false,
       setShowTextOnlyThreads: (value: boolean) => set({ showTextOnlyThreads: value }),
       showAdultBoards: false,
@@ -32,11 +32,13 @@ const useCatalogFiltersStore = create(
       filterText: '',
       setFilterText: (value: string) => set({ filterText: value }),
       filterItems: [],
-      setFilterItems: (items: FilterItem[]) => set({ filterItems: items }),
+      setFilterItems: (items: FilterItem[]) => {
+        const nonEmptyItems = items.filter((item) => item.text.trim() !== '');
+        set({ filterItems: nonEmptyItems });
+      },
       saveAndApplyFilters: (items: FilterItem[]) => {
-        set({ filterItems: items });
-        console.log('Filters saved and applied:', items);
-        // Example: refreshCatalog();
+        const nonEmptyItems = items.filter((item) => item.text.trim() !== '');
+        set({ filterItems: nonEmptyItems });
       },
     }),
     {
diff --git a/src/views/catalog/catalog-filters/catalog-filters.module.css b/src/views/catalog/catalog-filters/catalog-filters.module.css
index fd2f7abf..e5039403 100644
--- a/src/views/catalog/catalog-filters/catalog-filters.module.css
+++ b/src/views/catalog/catalog-filters/catalog-filters.module.css
@@ -140,9 +140,13 @@
   margin: 0 2px;
   padding: 1px;
   outline: none;
-  border: 1px solid #aaa;
+  border: var(--reply-modal-field-input-border, revert);
   font-size: 11px;
-  width: 180px;
+  width: 200px;
+}
+
+.filtersTable input[type='text']:focus {
+  border: var(--reply-modal-field-input-border-focus, revert);
 }
 
 .filtersTable span {
diff --git a/src/views/catalog/catalog-filters/catalog-filters.tsx b/src/views/catalog/catalog-filters/catalog-filters.tsx
index 1c378c37..cc5d3db9 100644
--- a/src/views/catalog/catalog-filters/catalog-filters.tsx
+++ b/src/views/catalog/catalog-filters/catalog-filters.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { isAllView, isCatalogView } from '../../../lib/utils/view-utils';
@@ -8,32 +8,30 @@ import styles from './catalog-filters.module.css';
 const FiltersTable = () => {
   const { t } = useTranslation();
   const { filterItems, saveAndApplyFilters } = useCatalogFiltersStore();
-  const [localFilterItems, setLocalFilterItems] = useState<any[]>([]);
 
-  useEffect(() => {
-    setLocalFilterItems(filterItems);
-  }, [filterItems]);
+  const [localFilterItems, setLocalFilterItems] = useState(filterItems);
 
   const handleAddFilter = useCallback(() => {
-    setLocalFilterItems([...localFilterItems, { text: '', enabled: true }]);
-  }, [localFilterItems]);
+    setLocalFilterItems((prev) => [...prev, { text: '', enabled: true }]);
+  }, []);
 
   const handleSave = useCallback(() => {
-    saveAndApplyFilters(localFilterItems);
+    const nonEmptyFilters = localFilterItems.filter((item) => item.text.trim() !== '');
+    saveAndApplyFilters(nonEmptyFilters);
   }, [saveAndApplyFilters, localFilterItems]);
 
   const updateLocalFilterItem = useCallback((index: number, item: any) => {
-    setLocalFilterItems((items) => items.map((f, i) => (i === index ? item : f)));
+    setLocalFilterItems((prev) => prev.map((f, i) => (i === index ? item : f)));
   }, []);
 
   const removeLocalFilterItem = useCallback((index: number) => {
-    setLocalFilterItems((items) => items.filter((_, i) => i !== index));
+    setLocalFilterItems((prev) => prev.filter((_, i) => i !== index));
   }, []);
 
   const moveLocalFilterItemUp = useCallback((index: number) => {
     if (index === 0) return;
-    setLocalFilterItems((items) => {
-      const newItems = [...items];
+    setLocalFilterItems((prev) => {
+      const newItems = [...prev];
       [newItems[index - 1], newItems[index]] = [newItems[index], newItems[index - 1]];
       return newItems;
     });
@@ -134,7 +132,7 @@ const FiltersModal = ({ closeModal }: { closeModal: () => void }) => {
             </div>
           )}
         </div>
-        <FiltersTable />
+        {isInCatalogView && <FiltersTable />}
       </div>
     </>
   );