From 55ba2525d19e6503f5ee0105aa64f22afac3fe3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Wed, 10 Apr 2024 16:13:39 -0500
Subject: [PATCH] fix: query ignorance on filter change

---
 .../components/TankSearch/index.tsx           | 24 ++++++++-----------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/app/tools/tankopedia/components/TankSearch/index.tsx b/src/app/tools/tankopedia/components/TankSearch/index.tsx
index 55417901b..da1e3abd5 100644
--- a/src/app/tools/tankopedia/components/TankSearch/index.tsx
+++ b/src/app/tools/tankopedia/components/TankSearch/index.tsx
@@ -400,7 +400,15 @@ export function TankSearch({
       .filter(([name]) => name !== 'page')
       .map(([, value]) => value),
   ]);
-  const [searchResults, setSearchedList] = useState(searchableTanks);
+  const [searchQuery, setSearchQuery] = useState('');
+  const searchResults = useMemo(
+    () =>
+      go(searchQuery, searchableTanks, {
+        keys: ['name', 'nameFull', 'id'] satisfies (keyof TankDefinition)[],
+        all: true,
+      }).map(({ obj }) => obj),
+    [searchQuery, searchableTanks],
+  );
   const page = useTankopediaPersistent((state) => state.filters.page);
   const searchResultsPageSlice = searchResults.slice(
     page * tanksPerPage,
@@ -414,9 +422,6 @@ export function TankSearch({
     Math.ceil(searchResultsPageSlice.length / 2),
   );
 
-  useEffect(() => {
-    setSearchedList(searchableTanks);
-  }, [searchableTanks]);
   useEffect(() => {
     mutateTankopediaPersistent((draft) => {
       draft.filters.page = Math.min(
@@ -435,16 +440,7 @@ export function TankSearch({
             ref={input}
             placeholder="Search tanks..."
             onChange={(event) => {
-              const results = go(event.target.value, searchableTanks, {
-                keys: [
-                  'name',
-                  'nameFull',
-                  'id',
-                ] satisfies (keyof TankDefinition)[],
-                all: true,
-              }).map(({ obj }) => obj);
-
-              setSearchedList(results);
+              setSearchQuery(event.target.value);
             }}
             onKeyDown={(event) => {
               if (event.key === 'Enter') {