faction filter

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,18 +13,25 @@ export interface CompositionsProps {
 
 export const Compositions = ({ data }: CompositionsProps) => {
   const [smallSamples] = useSmallSamplesFilter();
+  const [faction] = useFactionFilter();
 
   return (
     <Card inset="headless">
       <Card.Body>
         <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>

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)}>

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'> {
   /**

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 />;
+};