From 9c7714f080cb729ddbd1cacc1d0d2a9785e271fa Mon Sep 17 00:00:00 2001
From: Sebastian Sebald <sebastian.sebald@gmail.com>
Date: Mon, 30 Oct 2023 22:52:17 +0100
Subject: [PATCH] refa composition table stuff

---
 .../compositions/[[...range]]/page.tsx        | 23 +++------
 .../composition-stats/composition-filter.tsx  | 28 -----------
 .../composition-stats/composition-stats.tsx   | 42 ++++++++++++----
 .../composition-stats/composition-table.tsx   | 26 ++++++----
 ui/stats/composition-stats/context.tsx        | 49 -------------------
 ui/stats/composition-stats/index.ts           |  2 -
 6 files changed, 56 insertions(+), 114 deletions(-)
 delete mode 100644 ui/stats/composition-stats/composition-filter.tsx
 delete mode 100644 ui/stats/composition-stats/context.tsx

diff --git a/app/(stats)/compositions/[[...range]]/page.tsx b/app/(stats)/compositions/[[...range]]/page.tsx
index d42b8bbb..317f43de 100644
--- a/app/(stats)/compositions/[[...range]]/page.tsx
+++ b/app/(stats)/compositions/[[...range]]/page.tsx
@@ -10,10 +10,6 @@ import { fromDateRange } from '@/lib/utils/url.utils';
 import { Caption, Inline, Title } from '@/ui';
 import { Calendar, Rocket, Trophy } from '@/ui/icons';
 
-import {
-  CompositionFilter,
-  CompositionFilterProvider,
-} from '@/ui/stats/composition-stats';
 import { StatsFilter } from '@/ui/stats/stats-filter';
 import { StatsHint } from '@/ui/stats/stats-hint';
 import { setup } from '@/lib/stats';
@@ -115,19 +111,14 @@ const CompositionsPage = async ({ params }: PageProps) => {
         />
         <FactionFilter />
       </Inline>
-      <CompositionFilterProvider>
-        <StatsFilter smallSamples={false} dateRange={toDate(from, to)}>
-          <CompositionFilter />
-        </StatsFilter>
-        <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 className="grid grid-cols-1 gap-4 md:grid-cols-12">
+        <div className="col-span-full">
+          <Compositions data={stats.composition} />
         </div>
-      </CompositionFilterProvider>
+        <div className="col-span-full pt-8 lg:col-start-2 lg:col-end-12">
+          <StatsHint />
+        </div>
+      </div>
     </>
   );
 };
diff --git a/ui/stats/composition-stats/composition-filter.tsx b/ui/stats/composition-stats/composition-filter.tsx
deleted file mode 100644
index b92e6cc1..00000000
--- a/ui/stats/composition-stats/composition-filter.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-'use client';
-
-import { FactionSelection, Select } from '@/ui';
-import { useCompositionFilter } from './context';
-
-// Component
-// ---------------
-export const CompositionFilter = () => {
-  const { faction, setFaction, sort, setSort } = useCompositionFilter();
-
-  return (
-    <>
-      <FactionSelection value={faction} onChange={setFaction} allowAll />
-      <Select
-        size="small"
-        value={sort}
-        onChange={e => setSort(e.target.value as any)}
-      >
-        <Select.Option value="percentile">By Percentile</Select.Option>
-        <Select.Option value="deviation">By Std. Deviation</Select.Option>
-        <Select.Option value="winrate">By Winrate</Select.Option>
-        <Select.Option value="frequency">By Frequency</Select.Option>
-        <Select.Option value="count">By Count</Select.Option>
-        <Select.Option value="score">By Score</Select.Option>
-      </Select>
-    </>
-  );
-};
diff --git a/ui/stats/composition-stats/composition-stats.tsx b/ui/stats/composition-stats/composition-stats.tsx
index 4150a21c..2bd813f0 100644
--- a/ui/stats/composition-stats/composition-stats.tsx
+++ b/ui/stats/composition-stats/composition-stats.tsx
@@ -1,11 +1,12 @@
 'use client';
 
-import { Card } from '@/ui';
+import { useState } from 'react';
+import { Card, FactionSelection, Select } from '@/ui';
 
 import { CompositionTable } from './composition-table';
-import { CompositionFilterProvider, useCompositionFilter } from './context';
+import type { SortOptions } from './composition-table';
 import type { CompositionStatsType } from './types';
-import { CompositionFilter } from './composition-filter';
+import { XWSFaction } from '@/lib/types';
 
 // Props
 // ---------------
@@ -15,18 +16,41 @@ export interface CompositionStatsProps {
 
 // Component
 // ---------------
-export const CompositionStats = ({ value }: CompositionStatsProps) => (
-  <CompositionFilterProvider>
+export const CompositionStats = ({ value }: CompositionStatsProps) => {
+  const [faction, setFaction] = useState<XWSFaction | 'all'>('all');
+  const [sortBy, setSortBy] = useState<SortOptions>('percentile');
+
+  return (
     <Card>
       <Card.Header>
         <Card.Title>Compositions</Card.Title>
         <Card.Actions>
-          <CompositionFilter />
+          <FactionSelection value={faction} onChange={setFaction} allowAll />
+          <Select
+            size="small"
+            value={sortBy}
+            onChange={e => setSortBy(e.target.value as any)}
+          >
+            <Select.Option value="percentile">By Percentile</Select.Option>
+            <Select.Option value="deviation">By Std. Deviation</Select.Option>
+            <Select.Option value="winrate">By Winrate</Select.Option>
+            <Select.Option value="frequency">By Frequency</Select.Option>
+            <Select.Option value="count">By Count</Select.Option>
+            <Select.Option value="score">By Score</Select.Option>
+          </Select>
         </Card.Actions>
       </Card.Header>
       <Card.Body>
-        <CompositionTable value={value} />
+        <CompositionTable
+          value={value}
+          filter={
+            faction !== 'all'
+              ? ([, stat]) => stat.faction === faction
+              : undefined
+          }
+          sortBy={sortBy}
+        />
       </Card.Body>
     </Card>
-  </CompositionFilterProvider>
-);
+  );
+};
diff --git a/ui/stats/composition-stats/composition-table.tsx b/ui/stats/composition-stats/composition-table.tsx
index 3eb5def6..d173afa6 100644
--- a/ui/stats/composition-stats/composition-table.tsx
+++ b/ui/stats/composition-stats/composition-table.tsx
@@ -6,15 +6,25 @@ import { toPercentage } from '@/lib/utils';
 import { Collapsible, FactionIcon, Link, ShipIcon, Table } from '@/ui';
 import { Folder } from '@/ui/icons';
 
-import { useCompositionFilter } from './context';
 import type { CompositionStatsType } from './types';
 
+// Types
+// ---------------
+export type SortOptions =
+  | 'percentile'
+  | 'deviation'
+  | 'winrate'
+  | 'frequency'
+  | 'count'
+  | 'score';
+
 // Props
 // ---------------
 export interface CompositionTableProps {
   value: { [id: string]: CompositionStatsType };
   collapsible?: boolean;
   filter?: (entry: [string, CompositionStatsType]) => boolean;
+  sortBy?: SortOptions;
 }
 
 // Components
@@ -23,25 +33,21 @@ export const CompositionTable = ({
   value,
   collapsible = true,
   filter,
+  sortBy = 'percentile',
 }: CompositionTableProps) => {
-  // TODO: move these out of the table, just a "filter" and "sort" function?
-  const { faction = 'all', sort = 'percentile' } = useCompositionFilter();
   let data = Object.entries(value);
 
-  if (faction !== 'all' || filter) {
-    data = data.filter(entry => {
-      let result = faction === 'all' || entry[1].faction === faction;
-      return result && filter ? filter(entry) : result;
-    });
+  if (filter) {
+    data = data.filter(filter);
   }
 
   data.sort(([, a], [, b]) => {
-    const result = (b[sort] || 0) - (a[sort] || 0);
+    const result = (b[sortBy] || 0) - (a[sortBy] || 0);
 
     // Secondary sort by percentile (or deviation if sorted by percentile already)
     return result !== 0
       ? result
-      : sort === 'percentile'
+      : sortBy === 'percentile'
       ? b.deviation - a.deviation
       : b.percentile - a.percentile;
   });
diff --git a/ui/stats/composition-stats/context.tsx b/ui/stats/composition-stats/context.tsx
deleted file mode 100644
index f7a185b6..00000000
--- a/ui/stats/composition-stats/context.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-'use client';
-
-import { createContext, ReactNode, useContext, useState } from 'react';
-import { Factions } from '@/lib/get-value';
-
-export type FactionOptions = 'all' | Factions;
-export type SortOptions =
-  | 'percentile'
-  | 'deviation'
-  | 'winrate'
-  | 'frequency'
-  | 'count'
-  | 'score';
-
-const Context = createContext<{
-  faction: FactionOptions;
-  setFaction: (faction: FactionOptions) => void;
-  sort: SortOptions;
-  setSort: (value: SortOptions) => void;
-} | null>(null);
-
-export interface FilterProviderProps {
-  children: ReactNode;
-}
-
-export const CompositionFilterProvider = ({
-  children,
-}: FilterProviderProps) => {
-  const [faction, setFaction] = useState<FactionOptions>('all');
-  const [sort, setSort] = useState<SortOptions>('percentile');
-
-  return (
-    <Context.Provider value={{ faction, setFaction, sort, setSort }}>
-      {children}
-    </Context.Provider>
-  );
-};
-
-export const useCompositionFilter = () => {
-  const context = useContext(Context);
-
-  if (context === null) {
-    throw new Error(
-      '"useCompositionFilter" must be used within a <CompositionFilterProvider>'
-    );
-  }
-
-  return context;
-};
diff --git a/ui/stats/composition-stats/index.ts b/ui/stats/composition-stats/index.ts
index ea7a9332..53e9b5d2 100644
--- a/ui/stats/composition-stats/index.ts
+++ b/ui/stats/composition-stats/index.ts
@@ -1,5 +1,3 @@
-export * from './composition-filter';
 export * from './composition-stats';
 export * from './composition-table';
-export * from './context';
 export * from './types';