persist query parameter when changing date range

sebald · Oct 31, 2023 · c63b1ca · c63b1ca
1 parent ea83f35
commit c63b1ca
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 14 deletions.
diff --git a/app/(stats)/composition/loading.tsx → app/(stats)/composition/[id]/loading.tsx b/app/(stats)/composition/loading.tsx → app/(stats)/composition/[id]/loading.tsx
diff --git a/app/(stats)/composition/[id]/page.tsx b/app/(stats)/composition/[id]/page.tsx
@@ -1,4 +1,9 @@
-import { compositionDetails } from '@/lib/stats/details/composition';
+import { notFound } from 'next/navigation';
+
+import {
+  SquadCompositionStats,
+  compositionDetails,
+} from '@/lib/stats/details/composition';
 import { createMetadata } from '@/lib/metadata';
 import { fromDate } from '@/lib/utils/date.utils';
 import { getFactionCount, getSquads } from '@/lib/db/squads';
@@ -64,10 +69,12 @@ const getCompositionStats = async (composition: string, from: Date) => {
 // Page
 // ---------------
 const Page = async ({ params }: PageParams) => {
-  const stats = await getCompositionStats(
-    params.id,
-    fromDate(pointsUpdateDate)
-  );
+  let stats: SquadCompositionStats;
+  try {
+    stats = await getCompositionStats(params.id, fromDate(pointsUpdateDate));
+  } catch {
+    notFound();
+  }
 
   return (
     <div className="grid gap-4 pt-3 md:grid-cols-12">

diff --git a/app/(stats)/compositions/[[...range]]/page.tsx b/app/(stats)/compositions/[[...range]]/page.tsx
@@ -20,6 +20,7 @@ import { SmallSamplesFilter } from '@/ui/params/small-samples-filter';
 import { SortParam } from '@/ui/params/sort-param';
 
 import { Compositions } from './compositions';
+import { Suspense } from 'react';
 
 // Config
 // ---------------
@@ -112,14 +113,16 @@ const CompositionsPage = async ({ params }: PageProps) => {
         <FactionFilter />
         <SortParam />
       </Inline>
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-12">
-        <div className="col-span-full">
-          <Compositions data={stats.composition} />
+      <Suspense fallback={<div>loading...</div>}>
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-12">
+          <div className="col-span-full">
+            <Compositions data={stats.composition} />
+          </div>
+          <div className="col-span-full pt-8 lg:col-start-2 lg:col-end-12">
+            <StatsHint />
+          </div>
         </div>
-        <div className="col-span-full pt-8 lg:col-start-2 lg:col-end-12">
-          <StatsHint />
-        </div>
-      </div>
+      </Suspense>
     </>
   );
 };

diff --git a/ui/params/date-range-filter.tsx b/ui/params/date-range-filter.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import type { ChangeEvent } from 'react';
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 
 import { pointsUpdateDate } from '@/lib/config';
 import {
@@ -14,6 +14,7 @@ import { toDateRange } from '@/lib/utils/url.utils';
 
 import { Select } from '@/ui/select';
 import type { SelectProps } from '@/ui/select';
+import { useSearchParam } from 'react-use';
 
 export interface DateRangeFilterProps extends Omit<SelectProps, 'children'> {
   /**
@@ -27,6 +28,7 @@ export const DateRangeFilter = ({
   ...props
 }: DateRangeFilterProps) => {
   const router = useRouter();
+  const searchParams = useSearchParams();
 
   let options = {
     'Last Points Update': '',
@@ -41,7 +43,9 @@ export const DateRangeFilter = ({
 
   const updateDateRange = (e: ChangeEvent<HTMLSelectElement>) => {
     const [from, to] = e.target.value.split('/');
-    router.push(`${pathname}/${toDateRange(from, to)}`);
+    const qs = searchParams.size ? `?${searchParams.toString()}` : '';
+
+    router.push(`${pathname}/${toDateRange(from, to)}${qs}`);
   };
 
   return (