From 8ebb06fe8f414fe5d500b1f21038a0410a99623a Mon Sep 17 00:00:00 2001
From: Jeff Sieu <jeffsy00@gmail.com>
Date: Mon, 10 Oct 2022 15:43:43 +0800
Subject: [PATCH] [questions][fix] fix query params updating wrongly

---
 .../questions/QuestionSearchBar.tsx           | 16 +++++----
 apps/portal/src/pages/questions/index.tsx     | 35 ++++++++++++++-----
 .../src/utils/questions/useSearchFilter.ts    |  7 ----
 3 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/apps/portal/src/components/questions/QuestionSearchBar.tsx b/apps/portal/src/components/questions/QuestionSearchBar.tsx
index a27f043b..d57c8a48 100644
--- a/apps/portal/src/components/questions/QuestionSearchBar.tsx
+++ b/apps/portal/src/components/questions/QuestionSearchBar.tsx
@@ -46,13 +46,15 @@ export default function QuestionSearchBar<
         value={sortValue}
         onChange={onSortChange}
       />
-      <Button
-        addonPosition="start"
-        icon={AdjustmentsHorizontalIcon}
-        label="Filter options"
-        variant="tertiary"
-        onClick={onFilterOptionsToggle}
-      />
+      <div className="lg:hidden">
+        <Button
+          addonPosition="start"
+          icon={AdjustmentsHorizontalIcon}
+          label="Filter options"
+          variant="tertiary"
+          onClick={onFilterOptionsToggle}
+        />
+      </div>
     </div>
   );
 }
diff --git a/apps/portal/src/pages/questions/index.tsx b/apps/portal/src/pages/questions/index.tsx
index d7558bb0..d77a96f2 100644
--- a/apps/portal/src/pages/questions/index.tsx
+++ b/apps/portal/src/pages/questions/index.tsx
@@ -143,19 +143,38 @@ export default function QuestionsHomePage() {
   ]);
 
   useEffect(() => {
-    if (areFiltersInitialized) {
+    if (areFiltersInitialized && !loaded) {
+      // Update query params
+      router.replace({
+        pathname: router.pathname,
+        query: {
+          companies: selectedCompanies,
+          locations: selectedLocations,
+          questionAge: selectedQuestionAge,
+          questionTypes: selectedQuestionTypes,
+        },
+      });
       const hasFilter =
-        router.query.companies ||
-        router.query.questionTypes ||
-        router.query.questionAge ||
-        router.query.locations;
+        selectedCompanies.length > 0 ||
+        selectedLocations.length > 0 ||
+        selectedQuestionAge !== 'all' ||
+        selectedQuestionTypes.length > 0;
       if (hasFilter) {
         setHasLanded(true);
       }
-      // Console.log('landed', hasLanded);
+
       setLoaded(true);
     }
-  }, [areFiltersInitialized, hasLanded, router.query]);
+  }, [
+    areFiltersInitialized,
+    hasLanded,
+    loaded,
+    router,
+    selectedCompanies,
+    selectedLocations,
+    selectedQuestionAge,
+    selectedQuestionTypes,
+  ]);
 
   if (!loaded) {
     return null;
@@ -291,7 +310,7 @@ export default function QuestionsHomePage() {
           <h2 className="px-4 text-xl font-semibold">Filter by</h2>
           {filterSidebar}
         </aside>
-        <div className="hidden">
+        <div className="lg:hidden">
           <SlideOut
             enterFrom="end"
             isShown={filterDrawerOpen}
diff --git a/apps/portal/src/utils/questions/useSearchFilter.ts b/apps/portal/src/utils/questions/useSearchFilter.ts
index 1a7bd199..193e7165 100644
--- a/apps/portal/src/utils/questions/useSearchFilter.ts
+++ b/apps/portal/src/utils/questions/useSearchFilter.ts
@@ -27,13 +27,6 @@ export const useSearchFilter = <Value extends string = string>(
         if (localStorageValue !== null) {
           const loadedFilters = JSON.parse(localStorageValue);
           setFilters(loadedFilters);
-          router.replace({
-            pathname: router.pathname,
-            query: {
-              ...router.query,
-              [name]: loadedFilters,
-            },
-          });
         }
       }
       setIsInitialized(true);