rename

app/(stats)/compositions/[[...range]]/compositions.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Card } from '@/ui';
-import { useSmallSamplesFilter } from '@/ui/filter/small-samples-filter';
+import { useSmallSamplesFilter } from '@/ui/params/small-samples-filter';
 import { CompositionTable } from '@/ui/stats/composition-stats';
 import type { CompositionData } from '@/lib/stats/module/composition';
 

app/(stats)/compositions/[[...range]]/page.tsx

@@ -19,7 +19,7 @@ import { StatsFilter } from '@/ui/stats/stats-filter';
 import { StatsHint } from '@/ui/stats/stats-hint';
 import { setup } from '@/lib/stats';
 import { CompositionData, composition } from '@/lib/stats/module';
-import { SmallSamplesFilter } from '@/ui/filter/small-samples-filter';
+import { SmallSamplesFilter } from '@/ui/params/small-samples-filter';
 import { Suspense } from 'react';
 import { Compositions } from './compositions';
 

ui/filter/small-samples-filter.tsx → ui/params/small-samples-filter.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { Switch } from '@/ui/switch';
-import { useQueryFilter } from './useQueryFilter';
+import { useParams } from './useParams';
 
 // Hook
 // ---------------
 export const useSmallSamplesFilter = () => {
-  const [filter, setFilter] = useQueryFilter(['small-samples']);
+  const [filter, setFilter] = useParams(['small-samples']);
 
   const setSmallSamples = (val: boolean) =>
     setFilter({

ui/params/useParams.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+
+// Hook
+// ---------------
+export const useParams = <Params extends string>(keys: Params[]) => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const params = {} as { [param in Params]: string | null };
+  keys.forEach(key => {
+    params[key] = searchParams.get(key) || null;
+  });
+
+  const setParams = (values: { [key: string]: string | null }) => {
+    const sp = new URLSearchParams(searchParams.toString());
+
+    Object.entries(values).forEach(([key, value]) => {
+      if (value) {
+        sp.set(key, value);
+      } else {
+        sp.delete(key);
+      }
+    });
+
+    const ps = sp.toString();
+    const queryString = `${ps.length ? '?' : ''}${ps}`;
+
+    router.replace(`${pathname}${queryString}`, { scroll: false });
+  };
+
+  return [params, setParams] as const;
+};