From c63b1caf844affeae4e165fc1c05e4bcc5776f1d Mon Sep 17 00:00:00 2001
From: Sebastian Sebald <sebastian.sebald@gmail.com>
Date: Tue, 31 Oct 2023 12:48:34 +0100
Subject: [PATCH] persist query parameter when changing date range

---
 app/(stats)/composition/{ => [id]}/loading.tsx |  0
 app/(stats)/composition/[id]/page.tsx          | 17 ++++++++++++-----
 app/(stats)/compositions/[[...range]]/page.tsx | 17 ++++++++++-------
 ui/params/date-range-filter.tsx                |  8 ++++++--
 4 files changed, 28 insertions(+), 14 deletions(-)
 rename app/(stats)/composition/{ => [id]}/loading.tsx (100%)

diff --git a/app/(stats)/composition/loading.tsx b/app/(stats)/composition/[id]/loading.tsx
similarity index 100%
rename from app/(stats)/composition/loading.tsx
rename to app/(stats)/composition/[id]/loading.tsx
diff --git a/app/(stats)/composition/[id]/page.tsx b/app/(stats)/composition/[id]/page.tsx
index 84de22d4..8fbef231 100644
--- 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
index 7285d26d..3c85a779 100644
--- 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
index 2123c382..ec5beda4 100644
--- 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 (