[questions][fix] fix search params loading wrongly

apps/portal/src/components/questions/LandingComponent.tsx

@@ -118,7 +118,7 @@ export default function LandingComponent({
             onClick={() => {
               if (company !== undefined && location !== undefined) {
                 return handleLandingQuery({
-                  company: company.value,
+                  company: company.label,
                   location: location.value,
                   questionType,
                 });

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

@@ -9,7 +9,6 @@ import { Button, SlideOut } from '@tih/ui';
 
 import QuestionOverviewCard from '~/components/questions/card/question/QuestionOverviewCard';
 import ContributeQuestionCard from '~/components/questions/ContributeQuestionCard';
-import type { FilterOption } from '~/components/questions/filter/FilterSection';
 import FilterSection from '~/components/questions/filter/FilterSection';
 import QuestionSearchBar from '~/components/questions/QuestionSearchBar';
 import CompanyTypeahead from '~/components/questions/typeahead/CompanyTypeahead';
@@ -195,17 +194,17 @@ export default function QuestionsBrowsePage() {
   const [loaded, setLoaded] = useState(false);
   const [filterDrawerOpen, setFilterDrawerOpen] = useState(false);
 
-  const [selectedCompanyOptions, setSelectedCompanyOptions] = useState<
+  // Const [selectedCompanyOptions, setSelectedCompanyOptions] = useState<
-    Array<FilterOption>
+  //   Array<FilterOption>
-  >([]);
+  // >([]);
 
-  const [selectedRoleOptions, setSelectedRoleOptions] = useState<
+  // const [selectedRoleOptions, setSelectedRoleOptions] = useState<
-    Array<FilterOption>
+  //   Array<FilterOption>
-  >([]);
+  // >([]);
 
-  const [selectedLocationOptions, setSelectedLocationOptions] = useState<
+  // const [selectedLocationOptions, setSelectedLocationOptions] = useState<
-    Array<FilterOption>
+  //   Array<FilterOption>
-  >([]);
+  // >([]);
 
   const questionTypeFilterOptions = useMemo(() => {
     return QUESTION_TYPES.map((questionType) => ({
@@ -275,9 +274,37 @@ export default function QuestionsBrowsePage() {
     sortType,
   ]);
 
+  const selectedCompanyOptions = useMemo(() => {
+    return selectedCompanies.map((company) => ({
+      checked: true,
+      id: company,
+      label: company,
+      value: company,
+    }));
+  }, [selectedCompanies]);
+
+  const selectedRoleOptions = useMemo(() => {
+    return selectedRoles.map((role) => ({
+      checked: true,
+      id: role,
+      label: role,
+      value: role,
+    }));
+  }, [selectedRoles]);
+
+  const selectedLocationOptions = useMemo(() => {
+    return selectedLocations.map((location) => ({
+      checked: true,
+      id: location,
+      label: location,
+      value: location,
+    }));
+  }, [selectedLocations]);
+
   if (!loaded) {
     return null;
   }
+
   const filterSidebar = (
     <div className="divide-y divide-slate-200 px-4">
       <Button
@@ -293,9 +320,9 @@ export default function QuestionsBrowsePage() {
           setSelectedQuestionAge('all');
           setSelectedRoles([]);
           setSelectedLocations([]);
-          setSelectedCompanyOptions([]);
+          // SetSelectedCompanyOptions([]);
-          setSelectedRoleOptions([]);
+          // setSelectedRoleOptions([]);
-          setSelectedLocationOptions([]);
+          // setSelectedLocationOptions([]);
         }}
       />
       <FilterSection
@@ -306,8 +333,8 @@ export default function QuestionsBrowsePage() {
             {...field}
             clearOnSelect={true}
             filterOption={(option) => {
-              return !selectedCompanyOptions.some((selectedOption) => {
+              return !selectedCompanies.some((company) => {
-                return selectedOption.value === option.value;
+                return company === option.value;
               });
             }}
             isLabelHidden={true}
@@ -323,19 +350,10 @@ export default function QuestionsBrowsePage() {
         onOptionChange={(option) => {
           if (option.checked) {
             setSelectedCompanies([...selectedCompanies, option.label]);
-            setSelectedCompanyOptions((prevOptions) => [
-              ...prevOptions,
-              { ...option, checked: true },
-            ]);
           } else {
             setSelectedCompanies(
               selectedCompanies.filter((company) => company !== option.label),
             );
-            setSelectedCompanyOptions((prevOptions) =>
-              prevOptions.filter(
-                (prevOption) => prevOption.label !== option.label,
-              ),
-            );
           }
         }}
       />
@@ -347,8 +365,8 @@ export default function QuestionsBrowsePage() {
             {...field}
             clearOnSelect={true}
             filterOption={(option) => {
-              return !selectedRoleOptions.some((selectedOption) => {
+              return !selectedRoles.some((role) => {
-                return selectedOption.value === option.value;
+                return role === option.value;
               });
             }}
             isLabelHidden={true}
@@ -364,19 +382,10 @@ export default function QuestionsBrowsePage() {
         onOptionChange={(option) => {
           if (option.checked) {
             setSelectedRoles([...selectedRoles, option.value]);
-            setSelectedRoleOptions((prevOptions) => [
-              ...prevOptions,
-              { ...option, checked: true },
-            ]);
           } else {
             setSelectedRoles(
               selectedCompanies.filter((role) => role !== option.value),
             );
-            setSelectedRoleOptions((prevOptions) =>
-              prevOptions.filter(
-                (prevOption) => prevOption.value !== option.value,
-              ),
-            );
           }
         }}
       />
@@ -413,8 +422,8 @@ export default function QuestionsBrowsePage() {
             {...field}
             clearOnSelect={true}
             filterOption={(option) => {
-              return !selectedLocationOptions.some((selectedOption) => {
+              return !selectedLocations.some((location) => {
-                return selectedOption.value === option.value;
+                return location === option.value;
               });
             }}
             isLabelHidden={true}
@@ -430,19 +439,10 @@ export default function QuestionsBrowsePage() {
         onOptionChange={(option) => {
           if (option.checked) {
             setSelectedLocations([...selectedLocations, option.value]);
-            setSelectedLocationOptions((prevOptions) => [
-              ...prevOptions,
-              { ...option, checked: true },
-            ]);
           } else {
             setSelectedLocations(
               selectedLocations.filter((role) => role !== option.value),
             );
-            setSelectedLocationOptions((prevOptions) =>
-              prevOptions.filter(
-                (prevOption) => prevOption.value !== option.value,
-              ),
-            );
           }
         }}
       />

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

@@ -25,7 +25,7 @@ export const useSearchParam = <Value = string>(
   const [isInitialized, setIsInitialized] = useState(false);
   const router = useRouter();
 
-  const [filters, setFilters] = useState<Array<Value>>(defaultValues || []);
+  const [params, setParams] = useState<Array<Value>>(defaultValues || []);
 
   useEffect(() => {
     if (router.isReady && !isInitialized) {
@@ -33,7 +33,7 @@ export const useSearchParam = <Value = string>(
       const query = router.query[name];
       if (query) {
         const queryValues = Array.isArray(query) ? query : [query];
-        setFilters(
+        setParams(
           queryValues
             .map(stringToParam)
             .filter((value) => value !== null) as Array<Value>,
@@ -43,27 +43,27 @@ export const useSearchParam = <Value = string>(
         const localStorageValue = localStorage.getItem(name);
         if (localStorageValue !== null) {
           const loadedFilters = JSON.parse(localStorageValue);
-          setFilters(loadedFilters);
+          setParams(loadedFilters);
         }
       }
       setIsInitialized(true);
     }
   }, [isInitialized, name, stringToParam, router]);
 
-  const setFiltersCallback = useCallback(
+  const setParamsCallback = useCallback(
-    (newFilters: Array<Value>) => {
+    (newParams: Array<Value>) => {
-      setFilters(newFilters);
+      setParams(newParams);
       localStorage.setItem(
         name,
         JSON.stringify(
-          newFilters.map(valueToQueryParam).filter((param) => param !== null),
+          newParams.map(valueToQueryParam).filter((param) => param !== null),
         ),
       );
     },
     [name, valueToQueryParam],
   );
 
-  return [filters, setFiltersCallback, isInitialized] as const;
+  return [params, setParamsCallback, isInitialized] as const;
 };
 
 export const useSearchParamSingle = <Value = string>(
@@ -73,14 +73,14 @@ export const useSearchParamSingle = <Value = string>(
   },
 ) => {
   const { defaultValue, ...restOpts } = opts ?? {};
-  const [filters, setFilters, isInitialized] = useSearchParam<Value>(name, {
+  const [params, setParams, isInitialized] = useSearchParam<Value>(name, {
     defaultValues: defaultValue !== undefined ? [defaultValue] : undefined,
     ...restOpts,
   } as SearchParamOptions<Value>);
 
   return [
-    filters[0],
+    params[0],
-    (value: Value) => setFilters([value]),
+    (value: Value) => setParams([value]),
     isInitialized,
   ] as const;
 };