From 9a6682d3c137440eda21c8e492a4816e269f77c8 Mon Sep 17 00:00:00 2001
From: Jeff Sieu <jeffsy00@gmail.com>
Date: Mon, 10 Oct 2022 01:26:29 +0800
Subject: [PATCH] [questions][fix] fix index refreshing constantly

---
 apps/portal/src/pages/questions/index.tsx     | 44 +++----------------
 .../src/utils/questions/useSearchFilter.ts    | 25 ++++++++---
 2 files changed, 27 insertions(+), 42 deletions(-)

diff --git a/apps/portal/src/pages/questions/index.tsx b/apps/portal/src/pages/questions/index.tsx
index cfa6bf44..0db97b18 100644
--- a/apps/portal/src/pages/questions/index.tsx
+++ b/apps/portal/src/pages/questions/index.tsx
@@ -40,7 +40,7 @@ export default function QuestionsHomePage() {
     useSearchFilter('locations');
 
   const [hasLanded, setHasLanded] = useState(false);
-  // Const [loaded, setLoaded] = useState(false);
+  const [loaded, setLoaded] = useState(false);
 
   const companyFilterOptions = useMemo(() => {
     return COMPANIES.map((company) => ({
@@ -102,44 +102,14 @@ export default function QuestionsHomePage() {
       if (hasFilter) {
         setHasLanded(true);
       }
-      // Console.log('shit');
-      // setLoaded(true);
+      // Console.log('landed', hasLanded);
+      setLoaded(true);
     }
-  }, [areFiltersInitialized, router.query]);
+  }, [areFiltersInitialized, hasLanded, router.query]);
 
-  // Update url query params
-  useEffect(() => {
-    if (router.isReady && areFiltersInitialized) {
-      router.replace(
-        {
-          query: {
-            companies: selectedCompanies,
-            locations: selectedLocations,
-            questionTypes: selectedQuestionTypes,
-            ...(selectedQuestionAge !== 'all'
-              ? {
-                  questionAge: selectedQuestionAge,
-                }
-              : {}),
-          },
-        },
-        undefined,
-        { shallow: true },
-      );
-    }
-  }, [
-    selectedCompanies,
-    selectedQuestionTypes,
-    selectedQuestionAge,
-    selectedLocations,
-    router,
-    router.isReady,
-    areFiltersInitialized,
-  ]);
-
-  // If (!loaded) {
-  //   return <div>hi</div>;
-  // }
+  if (!loaded) {
+    return null;
+  }
 
   return !hasLanded ? (
     <LandingComponent onLanded={handleLandingQuery}></LandingComponent>
diff --git a/apps/portal/src/utils/questions/useSearchFilter.ts b/apps/portal/src/utils/questions/useSearchFilter.ts
index 2ede6db8..711f5ead 100644
--- a/apps/portal/src/utils/questions/useSearchFilter.ts
+++ b/apps/portal/src/utils/questions/useSearchFilter.ts
@@ -21,22 +21,37 @@ export const useSearchFilter = (
         // Try to load from local storage
         const localStorageValue = localStorage.getItem(name);
         if (localStorageValue !== null) {
-          setFilters(JSON.parse(localStorageValue));
+          const loadedFilters = JSON.parse(localStorageValue);
+          setFilters(loadedFilters);
+          router.replace({
+            pathname: router.pathname,
+            query: {
+              ...router.query,
+              [name]: loadedFilters,
+            },
+          });
         }
       }
       setIsInitialized(true);
     }
-  }, [router.isReady, isInitialized, router.query, name]);
+  }, [isInitialized, name, router]);
 
-  const setFiltersAndSaveToLocalStorage = useCallback(
+  const setFiltersCallback = useCallback(
     (newFilters: Array<string>) => {
       setFilters(newFilters);
       localStorage.setItem(name, JSON.stringify(newFilters));
+      router.replace({
+        pathname: router.pathname,
+        query: {
+          ...router.query,
+          [name]: newFilters,
+        },
+      });
     },
-    [name],
+    [name, router],
   );
 
-  return [filters, setFiltersAndSaveToLocalStorage, isInitialized] as const;
+  return [filters, setFiltersCallback, isInitialized] as const;
 };
 
 export const useSearchFilterSingle = (name: string, defaultValue: string) => {