fix: Use search params for default filters

hackerspace-ntnu · Sep 15, 2024 · a9ab1a9 · a9ab1a9
1 parent 71b3cc0
commit a9ab1a9
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 6 deletions.
diff --git a/src/app/[locale]/(default)/storage/page.tsx b/src/app/[locale]/(default)/storage/page.tsx
@@ -106,6 +106,7 @@ export default function StoragePage({
             sort: t_ui('sort'),
             defaultPlaceholder: t('select.defaultPlaceholder'),
           }}
+          searchParams={searchParams}
         />
         <CategorySelector
           categories={categories}
@@ -115,6 +116,7 @@ export default function StoragePage({
             defaultDescription: t('combobox.defaultDescription'),
             defaultPlaceholder: t('combobox.defaultPlaceholder'),
           }}
+          searchParams={searchParams}
         />
       </div>
       <div className='grid grid-cols-1 xs:grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-4'>

diff --git a/src/components/storage/CategorySelector.tsx b/src/components/storage/CategorySelector.tsx
@@ -15,12 +15,17 @@ type CategorySelectorProps = {
     defaultDescription: string;
     defaultPlaceholder: string;
   };
+  searchParams: Record<string, string | string[] | undefined>;
 };
 
-function CategorySelector({ categories, t }: CategorySelectorProps) {
+function CategorySelector({
+  categories,
+  t,
+  searchParams,
+}: CategorySelectorProps) {
   const [category, setCategory] = useQueryState(
     t.category,
-    parseAsString.withDefault(''),
+    parseAsString.withDefault(searchParams.category?.toString() ?? ''),
   );
 
   function valueCallback(category: string | null) {
@@ -35,6 +40,7 @@ function CategorySelector({ categories, t }: CategorySelectorProps) {
       buttonClassName='w-full lg:w-[250px]'
       contentClassName='w-full lg:w-[200px]'
       valueCallback={valueCallback}
+      initialValue={category}
     />
   );
 }

diff --git a/src/components/storage/SortSelector.tsx b/src/components/storage/SortSelector.tsx
@@ -13,16 +13,17 @@ type SortSelectorProps = {
     name: string;
     urlName: string;
   }[];
-  filtersUrlNames: string;
   t: {
     sort: string;
     defaultPlaceholder: string;
   };
+  searchParams: Record<string, string | string[] | undefined>;
 };
-function SortSelector({ filters, t }: SortSelectorProps) {
+
+function SortSelector({ filters, t, searchParams }: SortSelectorProps) {
   const [filter, setFilter] = useQueryState(
     t.sort,
-    parseAsString.withDefault(''),
+    parseAsString.withDefault(searchParams.sort?.toString() ?? ''),
   );
 
   return (
@@ -33,6 +34,9 @@ function SortSelector({ filters, t }: SortSelectorProps) {
           setFilter(filterUrlName);
         }
       }}
+      defaultValue={
+        filters.find((f) => f.urlName === filter)?.name ?? undefined
+      }
     >
       <SelectTrigger className='w-full lg:w-[250px]'>
         <SelectValue placeholder={t.defaultPlaceholder} />

diff --git a/src/components/ui/Combobox.tsx b/src/components/ui/Combobox.tsx
@@ -30,6 +30,7 @@ type ComboboxProps = {
   buttonClassName?: string;
   contentClassName?: string;
   valueCallback?: (value: string | null) => void;
+  initialValue?: string;
 };
 
 function Combobox({
@@ -39,9 +40,10 @@ function Combobox({
   buttonClassName,
   contentClassName,
   valueCallback,
+  initialValue,
 }: ComboboxProps) {
   const [open, setOpen] = React.useState(false);
-  const [value, setValue] = React.useState<string | null>(null);
+  const [value, setValue] = React.useState<string | null>(initialValue ?? '');
 
   return (
     <Popover open={open} onOpenChange={setOpen}>