save

app/(stats)/compositions/page.tsx → app/(stats)/compositions/[[...query]]/page.tsx

@@ -4,6 +4,7 @@ import { pointsUpdateDate } from '@/lib/config';
 import { getFactionCount, getSquads } from '@/lib/db/squads';
 import { getTournamentsCount } from '@/lib/db/tournaments';
 import { formatDate, fromDate, toDate, today } from '@/lib/utils/date.utils';
+import { pq } from '@/lib/utils/url.utils';
 
 import { Caption, Card, Inline, Message, Title } from '@/ui';
 import { Calendar, Rocket, Trophy } from '@/ui/icons';
@@ -13,11 +14,12 @@ import {
   CompositionFilterProvider,
   CompositionTable,
 } from '@/ui/stats/composition-stats';
-import { Filter } from '@/ui/stats/filter';
+import { StatsFilter } from '@/ui/stats/stats-filter';
 import { createMetadata } from '@/lib/metadata';
 import { StatsHint } from '@/ui/stats/stats-hint';
 import { setup } from '@/lib/stats';
 import { CompositionData, composition } from '@/lib/stats/module';
+import { QueryFilter } from '@/ui/filter/query-filter';
 
 // Config
 // ---------------
@@ -81,20 +83,18 @@ const getStats = async (
 
 // Props
 // ---------------
-interface AnalyzePageProps {
-  searchParams: {
-    from: string;
-    to: string;
-    'small-samples': 'show' | 'hide';
+interface PageProps {
+  params: {
+    query?: string[];
   };
 }
 
 // Page
 // ---------------
-const AnalyzeCompositionPage = async ({ searchParams }: AnalyzePageProps) => {
-  const params = schema.safeParse(searchParams);
+const CompositionsPage = async ({ params }: PageProps) => {
+  const query = schema.safeParse(pq(params.query?.[0]));
 
-  if (!params.success) {
+  if (!query.success) {
     return (
       <div className="grid flex-1 place-items-center">
         <Message variant="error">
@@ -106,13 +106,12 @@ const AnalyzeCompositionPage = async ({ searchParams }: AnalyzePageProps) => {
   }
 
   const from =
-    params.data && params.data.from
-      ? fromDate(params.data.from)
+    query.data && query.data.from
+      ? fromDate(query.data.from)
       : fromDate(pointsUpdateDate);
-  const to =
-    params.data && params.data.to ? fromDate(params.data.to) : undefined;
+  const to = query.data && query.data.to ? fromDate(query.data.to) : undefined;
 
-  const { stats, meta } = await getStats(from, to, params.data.smallSamples);
+  const { stats, meta } = await getStats(from, to, query.data.smallSamples);
 
   return (
     <>
@@ -133,13 +132,14 @@ const AnalyzeCompositionPage = async ({ searchParams }: AnalyzePageProps) => {
           </Inline>
         </Caption>
       </div>
+      <QueryFilter></QueryFilter>
       <CompositionFilterProvider>
-        <Filter
-          smallSamples={!params.data.smallSamples}
+        <StatsFilter
+          smallSamples={!query.data.smallSamples}
           dateRange={toDate(from, to)}
         >
           <CompositionFilter />
-        </Filter>
+        </StatsFilter>
         <div className="grid grid-cols-1 gap-4 md:grid-cols-12">
           <div className="col-span-full">
             <Card inset="headless">
@@ -160,4 +160,4 @@ const AnalyzeCompositionPage = async ({ searchParams }: AnalyzePageProps) => {
   );
 };
 
-export default AnalyzeCompositionPage;
+export default CompositionsPage;

app/analyze/composition/page.tsx

@@ -14,7 +14,7 @@ import {
   CompositionFilterProvider,
   CompositionTable,
 } from '@/ui/stats/composition-stats';
-import { Filter } from '@/ui/stats/filter';
+import { StatsFilter } from '@/ui/stats/stats-filter';
 import { createMetadata } from '@/lib/metadata';
 import { StatsHint } from '@/ui/stats/stats-hint';
 import { setup } from '@/lib/stats';
@@ -133,12 +133,12 @@ const AnalyzeCompositionPage = async ({ searchParams }: AnalyzePageProps) => {
         </Caption>
       </div>
       <CompositionFilterProvider>
-        <Filter
+        <StatsFilter
           smallSamples={!params.data.smallSamples}
           dateRange={toDate(from, to)}
         >
           <CompositionFilter />
-        </Filter>
+        </StatsFilter>
         <div className="grid grid-cols-1 gap-4 md:grid-cols-12">
           <div className="col-span-full">
             <Card inset="headless">

app/analyze/page.tsx

@@ -33,7 +33,7 @@ import { CompositionStats } from '@/ui/stats/composition-stats';
 import { FactionDistribution } from '@/ui/stats/faction-distribution';
 import { FactionPerformance } from '@/ui/stats/faction-performance';
 import { FactionVictories } from '@/ui/stats/faction-victories';
-import { Filter } from '@/ui/stats/filter';
+import { StatsFilter } from '@/ui/stats/stats-filter';
 import { PilotCostDistribution } from '@/ui/stats/pilot-cost-distribution';
 import { PilotSkillDistribution } from '@/ui/stats/pilot-skill-distribution';
 import { PilotStats } from '@/ui/stats/pilot-stats';
@@ -171,7 +171,7 @@ const AnalyzePage = async ({ searchParams }: AnalyzePageProps) => {
           </Inline>
         </Caption>
       </div>
-      <Filter
+      <StatsFilter
         smallSamples={!params.data.smallSamples}
         dateRange={toDate(from, to)}
       />

lib/stats/details/composition.ts

@@ -7,13 +7,7 @@ import type {
   XWSUpgrades,
 } from '@/lib/types';
 import { fromDate, toMonth } from '@/lib/utils/date.utils';
-import {
-  average,
-  deviation,
-  percentile,
-  round,
-  winrate,
-} from '@/lib/utils/math.utils';
+import { average, deviation, round, winrate } from '@/lib/utils/math.utils';
 
 // Types
 // ---------------

lib/utils/index.ts

@@ -4,3 +4,4 @@ export * from './fetch.utils';
 export * from './math.utils';
 export * from './react.utils';
 export * from './string.utils';
+export * from './url.utils';

lib/utils/url.utils.ts

@@ -0,0 +1,9 @@
+import qs from 'query-string';
+
+/**
+ * Used to parse a dynamic route segment and use it as query params.
+ *
+ * This is done because using `searchParams` (the real query params) will cause
+ * pages to switch to dynamic mode.
+ */
+export const pq = (query: string = '') => qs.parse(decodeURIComponent(query));

package.json

@@ -24,6 +24,7 @@
     "mysql2": "3.6.2",
     "next": "13.5.4",
     "p-limit": "4.0.0",
+    "query-string": "^8.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-is": "18.2.0",

ui/filter/query-filter.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { useTransition } from 'react';
+import type { ReactNode } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
+
+export interface QueryFilterProps {
+  children?: ReactNode;
+}
+
+export const QueryFilter = ({ children }: QueryFilterProps) => {
+  const { replace } = useRouter();
+  const pathname = usePathname();
+  const [pending, startTransition] = useTransition();
+
+  console.log(pathname);
+
+  return <>{children}</>;
+};

ui/stats/filter.tsx → ui/stats/stats-filter.tsx

@@ -15,7 +15,11 @@ export interface FilterProps {
 
 // Component
 // ---------------
-export const Filter = ({ children, dateRange, smallSamples }: FilterProps) => {
+export const StatsFilter = ({
+  children,
+  dateRange,
+  smallSamples,
+}: FilterProps) => {
   const { replace } = useRouter();
   const pathname = usePathname();
   const [pending, startTransition] = useTransition();