[question][fix] fix search filters

apps/portal/src/components/questions/filter/FilterSection.tsx

@@ -63,22 +63,24 @@ export default function FilterSection<
             />
           )}
           {isSingleSelect ? (
-            <RadioList
-              label=""
-              value={options.find((option) => option.checked)?.value}
-              onChange={(value) => {
-                onOptionChange(value);
-              }}>
-              {options.map((option) => (
-                <RadioList.Item
-                  key={option.value}
-                  label={option.label}
-                  value={option.value}
-                />
-              ))}
-            </RadioList>
+            <div className="px-1.5">
+              <RadioList
+                label=""
+                value={options.find((option) => option.checked)?.value}
+                onChange={(value) => {
+                  onOptionChange(value);
+                }}>
+                {options.map((option) => (
+                  <RadioList.Item
+                    key={option.value}
+                    label={option.label}
+                    value={option.value}
+                  />
+                ))}
+              </RadioList>
+            </div>
           ) : (
-            <div className="mx-1">
+            <div className="px-1.5">
               {options.map((option) => (
                 <CheckboxInput
                   key={option.value}

apps/portal/src/pages/questions/index.tsx

@@ -1,5 +1,5 @@
 import { subMonths, subYears } from 'date-fns';
-import { useRouter } from 'next/router';
+import Router, { useRouter } from 'next/router';
 import { useEffect, useMemo, useState } from 'react';
 import { NoSymbolIcon } from '@heroicons/react/24/outline';
 import type { QuestionsQuestionType } from '@prisma/client';
@@ -120,8 +120,9 @@ export default function QuestionsHomePage() {
     }));
   }, [selectedLocations]);
 
-  const handleLandingQuery = (data: LandingQueryData) => {
+  const handleLandingQuery = async (data: LandingQueryData) => {
     const { company, location, questionType } = data;
+
     setSelectedCompanies([company]);
     setSelectedLocations([location]);
     setSelectedQuestionTypes([questionType as QuestionsQuestionType]);
@@ -142,11 +143,15 @@ export default function QuestionsHomePage() {
     areLocationsInitialized,
   ]);
 
+  const { pathname } = router;
+
   useEffect(() => {
-    if (areFiltersInitialized && !loaded) {
-      // Update query params
-      router.replace({
-        pathname: router.pathname,
+    if (areFiltersInitialized) {
+      // Router.replace used instead of router.replace to avoid
+      // the page reloading itself since the router.replace
+      // callback changes on every page load
+      Router.replace({
+        pathname,
         query: {
           companies: selectedCompanies,
           locations: selectedLocations,
@@ -169,7 +174,7 @@ export default function QuestionsHomePage() {
     areFiltersInitialized,
     hasLanded,
     loaded,
-    router,
+    pathname,
     selectedCompanies,
     selectedLocations,
     selectedQuestionAge,
@@ -181,7 +186,7 @@ export default function QuestionsHomePage() {
   }
 
   const filterSidebar = (
-    <div className="divide-y divide-slate-200 px-4">
+    <div className="mt-2 divide-y divide-slate-200 px-4">
       <FilterSection
         label="Company"
         options={companyFilterOptions}

apps/portal/src/utils/questions/useSearchFilter.ts

@@ -37,15 +37,8 @@ export const useSearchFilter = <Value extends string = string>(
     (newFilters: Array<Value>) => {
       setFilters(newFilters);
       localStorage.setItem(name, JSON.stringify(newFilters));
-      router.replace({
-        pathname: router.pathname,
-        query: {
-          ...router.query,
-          [name]: newFilters,
-        },
-      });
     },
-    [name, router],
+    [name],
   );
 
   return [filters, setFiltersCallback, isInitialized] as const;
@@ -66,9 +59,7 @@ export const useSearchFilterSingle = <Value extends string = string>(
 
   return [
     filters[0],
-    (value: Value) => {
-      setFilters([value]);
-    },
+    (value: Value) => setFilters([value]),
     isInitialized,
   ] as const;
 };