From a9ab1a9e92da954ea58792250d205a9081a32f02 Mon Sep 17 00:00:00 2001
From: ZeroWave022 <36341766+ZeroWave022@users.noreply.github.com>
Date: Sun, 15 Sep 2024 17:10:14 +0200
Subject: [PATCH] fix: Use search params for default filters

---
 src/app/[locale]/(default)/storage/page.tsx |  2 ++
 src/components/storage/CategorySelector.tsx | 10 ++++++++--
 src/components/storage/SortSelector.tsx     | 10 +++++++---
 src/components/ui/Combobox.tsx              |  4 +++-
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/app/[locale]/(default)/storage/page.tsx b/src/app/[locale]/(default)/storage/page.tsx
index f228ef7..84feeac 100644
--- 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
index e64fb4d..a14f989 100644
--- 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
index 50aeb54..c58108f 100644
--- 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
index c0738d7..b4bfccb 100644
--- 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}>