feat: Add categories to search params

messages/en.json

@@ -9,7 +9,9 @@
     "next": "Next",
     "goToNextPage": "Go to next page",
     "morePages": "More pages",
-    "page": "page"
+    "page": "page",
+    "category": "category",
+    "sort": "sort"
   },
   "layout": {
     "hackerspaceHome": "Hackerspace homepage",

messages/no.json

@@ -9,7 +9,9 @@
     "next": "Neste",
     "goToNextPage": "Gå til neste side",
     "morePages": "Flere sider",
-    "page": "side"
+    "page": "side",
+    "category": "kategori",
+    "sort": "sortering"
   },
   "layout": {
     "hackerspaceHome": "Hackerspace hjemmeside",

src/app/[locale]/(default)/storage/page.tsx

@@ -24,6 +24,7 @@ import {
 import { ShoppingCart } from 'lucide-react';
 
 import { Link } from '@/lib/navigation';
+import { CategorySelector } from '@/components/storage/CategorySelector';
 
 export async function generateMetadata({
   params: { locale },
@@ -117,12 +118,14 @@ export default function StoragePage({
           </SelectContent>
         </Select>
 
-        <Combobox
-          choices={categories}
-          defaultDescription={t('combobox.defaultDescription')}
-          defaultPlaceholder={t('combobox.defaultPlaceholder')}
-          buttonClassName='w-full lg:w-[250px]'
-          contentClassName='w-full lg:w-[200px]'
+        <CategorySelector
+          categories={categories}
+          t={{
+            category: t_ui('category'),
+            sort: t_ui('sort'),
+            defaultDescription: t('combobox.defaultDescription'),
+            defaultPlaceholder: t('combobox.defaultPlaceholder'),
+          }}
         />
       </div>
       <div className='grid grid-cols-1 xs:grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-4'>

src/components/storage/CategorySelector.tsx

@@ -0,0 +1,43 @@
+'use client';
+import { useTranslations } from 'next-intl';
+import { useQueryState } from 'nuqs';
+import { createSearchParamsCache, parseAsString } from 'nuqs/parsers';
+import { Combobox } from '../ui/Combobox';
+
+type CategorySelectorProps = {
+  categories: {
+    value: string;
+    label: string;
+  }[];
+  t: {
+    category: string;
+    sort: string;
+    defaultDescription: string;
+    defaultPlaceholder: string;
+  };
+};
+
+function CategorySelector({ categories, t }: CategorySelectorProps) {
+  const [category, setCategory] = useQueryState(
+    t.category,
+    parseAsString.withDefault(''),
+  );
+  const [sort, setSort] = useQueryState(t.sort, parseAsString.withDefault(''));
+
+  function valueCallback(category: string | null) {
+    setCategory(category);
+  }
+
+  return (
+    <Combobox
+      choices={categories}
+      defaultDescription={t.defaultDescription}
+      defaultPlaceholder={t.defaultPlaceholder}
+      buttonClassName='w-full lg:w-[250px]'
+      contentClassName='w-full lg:w-[200px]'
+      valueCallback={valueCallback}
+    />
+  );
+}
+
+export { CategorySelector };

src/components/storage/ShoppingCartClearButton.tsx

@@ -3,7 +3,7 @@ import { Button } from '@/components/ui/Button';
 import { X } from 'lucide-react';
 import { useLocalStorage } from 'usehooks-ts';
 
-function ShoppingCartClearButton({ caption }: { caption: string }) {
+async function ShoppingCartClearButton({ caption }: { caption: string }) {
   const [cart, setCart] = useLocalStorage<number[]>('shopping-cart', []);
 
   function clearCart() {

src/components/ui/Combobox.tsx

@@ -29,6 +29,7 @@ type ComboboxProps = {
   defaultPlaceholder: string;
   buttonClassName?: string;
   contentClassName?: string;
+  valueCallback?: (value: string | null) => void;
 };
 
 function Combobox({
@@ -37,9 +38,10 @@ function Combobox({
   defaultPlaceholder,
   buttonClassName,
   contentClassName,
+  valueCallback,
 }: ComboboxProps) {
   const [open, setOpen] = React.useState(false);
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState<string | null>(null);
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -67,8 +69,14 @@ function Combobox({
                   key={choice.value}
                   value={choice.value}
                   onSelect={(currentValue) => {
-                    setValue(currentValue === value ? '' : currentValue);
+                    // Set newValue to null if user selects the same value twice
+                    const newValue =
+                      currentValue === value ? null : currentValue;
+                    setValue(newValue);
                     setOpen(false);
+                    if (valueCallback) {
+                      valueCallback(newValue);
+                    }
                   }}
                 >
                   <Check