chore(react/note_icon): add back filter by text

apps/client/src/widgets/note_icon.ts.bak

@@ -88,19 +88,7 @@ export default class NoteIconWidget extends NoteContextAwareWidget {
         const categoryId = parseInt(String(this.$iconCategory.find("option:selected")?.val()));
         const search = String(this.$iconSearch.val())?.trim()?.toLowerCase();
 
-        const filteredIcons = icons.filter((icon) => {
+        const filteredIcons = icons.filter
-            if (categoryId && icon.category_id !== categoryId) {
-                return false;
-            }
-
-            if (search) {
-                if (!icon.name.includes(search) && !icon.term?.find((t) => t.includes(search))) {
-                    return false;
-                }
-            }
-
-            return true;
-        });
 
         if (iconToCount) {
             filteredIcons.sort((a, b) => {

apps/client/src/widgets/note_icon.tsx

@@ -48,7 +48,8 @@ export default function NoteIcon() {
 }
 
 function NoteIconList() {
-    const [ filter, setFilter ] = useState<string>();
+    const [ search, setSearch ] = useState<string>();
+    const [ categoryId, setCategoryId ] = useState<number>();
     const [ iconData, setIconData ] = useState<IconData>();
 
     useEffect(() => {
@@ -58,14 +59,31 @@ function NoteIconList() {
                 fullIconData = (await import("./icon_list.js")).default;
             }
 
+            let icons: Icon[] = fullIconData.icons;
+            if (search || categoryId) {
+                icons = icons.filter((icon) => {
+                    if (categoryId && icon.category_id !== categoryId) {
+                        return false;
+                    }
+
+                    if (search) {
+                        if (!icon.name.includes(search) && !icon.term?.find((t) => t.includes(search))) {
+                            return false;
+                        }
+                    }
+
+                    return true;
+                });
+            }
+
             setIconData({
                 iconToCount,
-                icons: fullIconData.icons
+                icons
             })
         }
 
         loadIcons();
-    }, []);
+    }, [ search, categoryId ]);
 
     return (
         <>
@@ -76,7 +94,7 @@ function NoteIconList() {
                 <FormTextBox
                     type="text"
                     name="icon-search"
-                    currentValue={filter} onChange={setFilter}
+                    currentValue={search} onChange={setSearch}
                 />
             </div>