From 3b813d32568aabe6904f06f280e274bf83632a0f Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 10 Sep 2024 10:12:07 -0600
Subject: [PATCH] Cleanup api search

---
 web/src/hooks/use-api-filter.ts | 100 +++++++++-----------------------
 1 file changed, 29 insertions(+), 71 deletions(-)

diff --git a/web/src/hooks/use-api-filter.ts b/web/src/hooks/use-api-filter.ts
index 8358b30d1..79269baee 100644
--- a/web/src/hooks/use-api-filter.ts
+++ b/web/src/hooks/use-api-filter.ts
@@ -1,6 +1,26 @@
 import { FilterType } from "@/types/filter";
 import { useCallback, useMemo, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
+
+function getStringifiedArgs(filter: FilterType) {
+  const search: { [key: string]: string } = {};
+
+  Object.entries(filter).forEach(([key, value]) => {
+    if (Array.isArray(value)) {
+      if (value.length == 0) {
+        // empty array means all so ignore
+      } else {
+        search[key] = value.join(",");
+      }
+    } else {
+      if (value != undefined) {
+        search[key] = `${value}`;
+      }
+    }
+  });
+
+  return search;
+}
 
 type useApiFilterReturn<F extends FilterType> = [
   filter: F | undefined,
@@ -21,23 +41,7 @@ export default function useApiFilter<
       return {};
     }
 
-    const search: { [key: string]: string } = {};
-
-    Object.entries(filter).forEach(([key, value]) => {
-      if (Array.isArray(value)) {
-        if (value.length == 0) {
-          // empty array means all so ignore
-        } else {
-          search[key] = value.join(",");
-        }
-      } else {
-        if (value != undefined) {
-          search[key] = `${value}`;
-        }
-      }
-    });
-
-    return search;
+    return getStringifiedArgs(filter);
   }, [filter]);
 
   return [filter, setFilter, searchParams];
@@ -46,51 +50,21 @@ export default function useApiFilter<
 export function useApiFilterArgs<
   F extends FilterType,
 >(): useApiFilterReturn<F> {
-  const location = useLocation();
-  const navigate = useNavigate();
+  const [rawParams, setRawParams] = useSearchParams();
 
   const setFilter = useCallback(
-    (filter: F) => {
-      let search = "";
-
-      Object.entries(filter).forEach(([key, value]) => {
-        let char = "";
-        if (search.length == 0) {
-          char = "?";
-        } else {
-          char = "&";
-        }
-
-        if (Array.isArray(value)) {
-          if (value.length == 0) {
-            // empty array means all so ignore
-          } else {
-            search += `${char}${key}=${value.join(",")}`;
-          }
-        } else {
-          if (value != undefined) {
-            search += `${char}${key}=${value}`;
-          }
-        }
-      });
-
-      navigate(`${location.pathname}${search}`, { ...location.state });
-    },
-    [location, navigate],
+    (newFilter: F) => setRawParams(getStringifiedArgs(newFilter)),
+    [setRawParams],
   );
 
   const filter = useMemo<F>(() => {
-    const search = location?.search?.substring(1);
-
-    if (search == undefined || search.length == 0) {
+    if (rawParams.size == 0) {
       return {} as F;
     }
 
     const filter: { [key: string]: unknown } = {};
 
-    search.split("&").forEach((full) => {
-      const [key, value] = full.split("=");
-
+    rawParams.forEach((value, key) => {
       if (isNaN(parseFloat(value))) {
         filter[key] = value.includes(",") ? value.split(",") : [value];
       } else {
@@ -101,30 +75,14 @@ export function useApiFilterArgs<
     });
 
     return filter as F;
-  }, [location?.search]);
+  }, [rawParams]);
 
   const searchParams = useMemo(() => {
     if (filter == undefined || Object.keys(filter).length == 0) {
       return {};
     }
 
-    const search: { [key: string]: string } = {};
-
-    Object.entries(filter).forEach(([key, value]) => {
-      if (Array.isArray(value)) {
-        if (value.length == 0) {
-          // empty array means all so ignore
-        } else {
-          search[key] = value.join(",");
-        }
-      } else {
-        if (value != undefined) {
-          search[key] = `${value}`;
-        }
-      }
-    });
-
-    return search;
+    return getStringifiedArgs(filter);
   }, [filter]);
 
   return [filter, setFilter, searchParams];