date range filter

__test__/lib/utils/url.utils.test.ts

@@ -1,16 +1,16 @@
-import { toRange } from '@/lib/utils/url.utils';
+import { fromDateRange } from '@/lib/utils/url.utils';
 
 test('extract date range', () => {
-  expect(toRange('')).toMatchInlineSnapshot(`null`);
+  expect(fromDateRange('')).toMatchInlineSnapshot(`null`);
 
-  expect(toRange('2022-01-01')).toMatchInlineSnapshot(`
+  expect(fromDateRange('2022-01-01')).toMatchInlineSnapshot(`
 {
   "from": "2022-01-01",
   "to": undefined,
 }
 `);
 
-  expect(toRange('2022-01-01.2022-01-05')).toMatchInlineSnapshot(`
+  expect(fromDateRange('2022-01-01.2022-01-05')).toMatchInlineSnapshot(`
 {
   "from": "2022-01-01",
   "to": "2022-01-05",

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

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

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

@@ -5,23 +5,22 @@ import { createMetadata } from '@/lib/metadata';
 import { getFactionCount, getSquads } from '@/lib/db/squads';
 import { getTournamentsCount } from '@/lib/db/tournaments';
 import { formatDate, fromDate, toDate, today } from '@/lib/utils/date.utils';
-import { toRange } from '@/lib/utils/url.utils';
+import { fromDateRange } from '@/lib/utils/url.utils';
 
-import { Caption, Card, Inline, Title } from '@/ui';
+import { Caption, Inline, Title } from '@/ui';
 import { Calendar, Rocket, Trophy } from '@/ui/icons';
 
 import {
   CompositionFilter,
   CompositionFilterProvider,
-  CompositionTable,
 } from '@/ui/stats/composition-stats';
 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/params/small-samples-filter';
-import { Suspense } from 'react';
+import { SmallSamplesFilter } from '@/ui/filter/small-samples-filter';
 import { Compositions } from './compositions';
+import { DateRangeFilter } from '@/ui/filter/date-range-filter';
 
 // Config
 // ---------------
@@ -79,9 +78,10 @@ const CompositionsPage = async ({ params }: PageProps) => {
     notFound();
   }
 
-  const range = toRange(params.range?.[0]);
+  const range = fromDateRange(params.range?.[0]);
+
   const from = fromDate(range ? range.from : pointsUpdateDate);
-  const to = range ? fromDate(range.to) : undefined;
+  const to = range && range.to ? fromDate(range.to) : undefined;
 
   const { stats, meta } = await getStats(from, to);
 
@@ -104,8 +104,12 @@ const CompositionsPage = async ({ params }: PageProps) => {
           </Inline>
         </Caption>
       </div>
-      <Inline align="end">
+      <Inline className="gap-4" align="end">
         <SmallSamplesFilter />
+        <DateRangeFilter
+          pathname="/compositions"
+          defaultValue={toDate(from, to)}
+        />
       </Inline>
       <CompositionFilterProvider>
         <StatsFilter smallSamples={false} dateRange={toDate(from, to)}>

lib/utils/url.utils.ts

@@ -2,7 +2,10 @@
 const DATE_RANGE_REGEX =
   /(?<from>\d{4}-(\d{2})-(\d{2}))(?:\.(?<to>\d{4}-(\d{2})-(\d{2})))?/;
 
-export const toRange = (val: string = '') => {
+export const fromDateRange = (val: string = '') => {
   const result = val.match(DATE_RANGE_REGEX);
   return result ? result.groups! : null;
 };
+
+export const toDateRange = (from: string, to?: string) =>
+  to ? `${from}.${to}` : from;

ui/filter/date-range-filter.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import type { ChangeEvent } from 'react';
+import { useRouter } from 'next/navigation';
+
+import { pointsUpdateDate } from '@/lib/config';
+import {
+  toDate,
+  lastWeekend,
+  monthsAgo,
+  fromDate,
+} from '@/lib/utils/date.utils';
+import { toDateRange } from '@/lib/utils/url.utils';
+
+import { Select } from '../select';
+import type { SelectProps } from '../select';
+
+export interface DateRangeFilterProps extends Omit<SelectProps, 'children'> {
+  /**
+   * Pathname of the base URL (range will be appended)
+   */
+  pathname: string;
+}
+
+export const DateRangeFilter = ({
+  pathname,
+  ...props
+}: DateRangeFilterProps) => {
+  const router = useRouter();
+
+  let options = {
+    'Last Points Update': '',
+    'Last Weekend': toDate.apply(null, lastWeekend()),
+    'Last Month': toDate(monthsAgo(1)),
+    // Add the option if the last points update is older
+    ...(fromDate(pointsUpdateDate) < monthsAgo(3)
+      ? { 'Last 3 Months': toDate(monthsAgo(3)) }
+      : {}),
+  };
+  type Options = keyof typeof options;
+
+  const updateDateRange = (e: ChangeEvent<HTMLSelectElement>) => {
+    const [from, to] = e.target.value.split('/');
+    router.push(`${pathname}/${toDateRange(from, to)}`);
+  };
+
+  return (
+    <Select {...props} size="small" onChange={updateDateRange}>
+      {Object.keys(options).map(label => (
+        <Select.Option key={label} value={options[label as Options]}>
+          {label}
+        </Select.Option>
+      ))}
+    </Select>
+  );
+};