From 2f92f6bde82ae4e41a8adf36dc928e91998b187f Mon Sep 17 00:00:00 2001
From: Sebastian Sebald <sebastian.sebald@gmail.com>
Date: Mon, 30 Oct 2023 22:29:50 +0100
Subject: [PATCH] faction filter

---
 .../[[...range]]/compositions.tsx             | 19 ++++++++----
 .../compositions/[[...range]]/page.tsx        |  6 +++-
 ui/filter/date-range-filter.tsx               |  4 +--
 ui/filter/faction-filter.tsx                  | 30 +++++++++++++++++++
 4 files changed, 51 insertions(+), 8 deletions(-)
 create mode 100644 ui/filter/faction-filter.tsx

diff --git a/app/(stats)/compositions/[[...range]]/compositions.tsx b/app/(stats)/compositions/[[...range]]/compositions.tsx
index b22a8fd3..63fccb77 100644
--- a/app/(stats)/compositions/[[...range]]/compositions.tsx
+++ b/app/(stats)/compositions/[[...range]]/compositions.tsx
@@ -2,7 +2,9 @@
 
 import { Card } from '@/ui';
 import { useSmallSamplesFilter } from '@/ui/filter/small-samples-filter';
+import { useFactionFilter } from '@/ui/filter/faction-filter';
 import { CompositionTable } from '@/ui/stats/composition-stats';
+
 import type { CompositionData } from '@/lib/stats/module/composition';
 
 export interface CompositionsProps {
@@ -11,6 +13,7 @@ export interface CompositionsProps {
 
 export const Compositions = ({ data }: CompositionsProps) => {
   const [smallSamples] = useSmallSamplesFilter();
+  const [faction] = useFactionFilter();
 
   return (
     <Card inset="headless">
@@ -18,11 +21,17 @@ export const Compositions = ({ data }: CompositionsProps) => {
         <CompositionTable
           value={data}
           collapsible={false}
-          filter={
-            smallSamples === 'hide'
-              ? ([, stat]) => stat.count >= 3 && stat.score >= 5
-              : undefined
-          }
+          filter={([, stat]) => {
+            if (smallSamples === 'hide' && (stat.count < 3 || stat.score < 5)) {
+              return false;
+            }
+
+            if (faction !== 'all' && stat.faction !== faction) {
+              return false;
+            }
+
+            return true;
+          }}
         />
       </Card.Body>
     </Card>
diff --git a/app/(stats)/compositions/[[...range]]/page.tsx b/app/(stats)/compositions/[[...range]]/page.tsx
index 35b873a2..d42b8bbb 100644
--- a/app/(stats)/compositions/[[...range]]/page.tsx
+++ b/app/(stats)/compositions/[[...range]]/page.tsx
@@ -18,9 +18,12 @@ 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 { DateRangeFilter } from '@/ui/filter/date-range-filter';
+import { FactionFilter } from '@/ui/filter/faction-filter';
 import { SmallSamplesFilter } from '@/ui/filter/small-samples-filter';
+
 import { Compositions } from './compositions';
-import { DateRangeFilter } from '@/ui/filter/date-range-filter';
 
 // Config
 // ---------------
@@ -110,6 +113,7 @@ const CompositionsPage = async ({ params }: PageProps) => {
           pathname="/compositions"
           defaultValue={toDate(from, to)}
         />
+        <FactionFilter />
       </Inline>
       <CompositionFilterProvider>
         <StatsFilter smallSamples={false} dateRange={toDate(from, to)}>
diff --git a/ui/filter/date-range-filter.tsx b/ui/filter/date-range-filter.tsx
index 9722f174..2123c382 100644
--- a/ui/filter/date-range-filter.tsx
+++ b/ui/filter/date-range-filter.tsx
@@ -12,8 +12,8 @@ import {
 } from '@/lib/utils/date.utils';
 import { toDateRange } from '@/lib/utils/url.utils';
 
-import { Select } from '../select';
-import type { SelectProps } from '../select';
+import { Select } from '@/ui/select';
+import type { SelectProps } from '@/ui/select';
 
 export interface DateRangeFilterProps extends Omit<SelectProps, 'children'> {
   /**
diff --git a/ui/filter/faction-filter.tsx b/ui/filter/faction-filter.tsx
new file mode 100644
index 00000000..c5ba5679
--- /dev/null
+++ b/ui/filter/faction-filter.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { XWSFaction } from '@/lib/types';
+import { FactionSelection } from '@/ui/faction-selection';
+
+import { useParams } from './useParams';
+
+// Hook
+// ---------------
+export const useFactionFilter = () => {
+  const [filter, setFilter] = useParams(['faction']);
+
+  const setFaction = (faction: XWSFaction | 'all') => {
+    setFilter({
+      faction: faction !== 'all' ? faction : null,
+    });
+  };
+
+  return [filter.faction || 'all', setFaction] as [
+    XWSFaction | 'all',
+    (faction: XWSFaction | 'all') => void,
+  ];
+};
+
+// Component
+// ---------------
+export const FactionFilter = () => {
+  const [faction, setFaction] = useFactionFilter();
+  return <FactionSelection value={faction} onChange={setFaction} allowAll />;
+};