feat: next safe generalization

src/app/tools/tank-performance/components/Info.tsx

@@ -10,7 +10,7 @@ export function Info() {
   const awaitedAverageDefinitions = use(averageDefinitions);
   const numberFormat = Intl.NumberFormat(undefined, { notation: 'compact' });
   const ratio = useAveragesExclusionRatio();
-  const samples = ratio * awaitedAverageDefinitions.sampled_players;
+  const samples = ratio * awaitedAverageDefinitions.samples.d_120;
 
   return (
     <Flex justify="center">

src/app/tools/tank-performance/components/TankRow.tsx

@@ -24,11 +24,11 @@ export const TankRow = memo<TankRowProps>(
           {((averages.mu.wins / averages.mu.battles) * 100).toFixed(1)}%
         </Table.Cell>
         <Table.Cell align="center">
-          {numberFormat.format(Math.round(ratio * averages.samples))}
+          {numberFormat.format(Math.round(ratio * averages.samples.d_30))}
         </Table.Cell>
         <Table.Cell align="center">
           {numberFormat.format(
-            Math.round(ratio * averages.mu.battles * averages.samples),
+            Math.round(ratio * averages.mu.battles * averages.samples.total),
           )}
         </Table.Cell>
         <Table.Cell align="center">

src/app/tools/tank-performance/components/Tanks.tsx

@@ -6,7 +6,7 @@ import { Suspense, use, useEffect, useMemo, useState } from 'react';
 import { averageDefinitionsArray } from '../../../../core/blitzkit/averageDefinitions';
 import { filterTank } from '../../../../core/blitzkit/filterTank';
 import { tankDefinitions } from '../../../../core/blitzkit/tankDefinitions';
-import { useTankFilters } from '../../../../stores/tankFilters';
+import * as TankFilters from '../../../../stores/tankFilters';
 import { useTankPerformanceSort } from '../../../../stores/tankPerformanceSort';
 import { RowLoader } from './RowLoader';
 import { TankRow } from './TankRow';
@@ -18,7 +18,7 @@ const DEFAULT_LOADED_ROWS = 25;
 export function Tanks() {
   const awaitedTankDefinitions = use(tankDefinitions);
   const awaitedAverageDefinitionsArray = use(averageDefinitionsArray);
-  const filters = useTankFilters();
+  const filters = TankFilters.use();
   const sort = useTankPerformanceSort();
   const tanksSorted = useMemo(() => {
     switch (sort.type) {
@@ -31,7 +31,7 @@ export function Tanks() {
         return awaitedAverageDefinitionsArray.sort(
           (a, b) =>
             sort.direction *
-            (a.samples * a.mu.battles - b.samples * b.mu.battles),
+            (a.samples.total * a.mu.battles - b.samples.total * b.mu.battles),
         );
       case 'capturePoints':
         return awaitedAverageDefinitionsArray.sort(
@@ -81,7 +81,7 @@ export function Tanks() {
         );
       case 'players':
         return awaitedAverageDefinitionsArray.sort(
-          (a, b) => sort.direction * (a.samples - b.samples),
+          (a, b) => sort.direction * (a.samples.d_30 - b.samples.d_30),
         );
       case 'spots':
         return awaitedAverageDefinitionsArray.sort(

src/app/tools/tank-performance/components/TierBreakdown.tsx

@@ -44,7 +44,8 @@ export function TierBreakdown() {
 
               tierTanks.forEach((stats) => {
                 const tank = awaitedTankDefinitions[stats.id];
-                populations[tank.class] += stats.mu.battles * stats.samples;
+                populations[tank.class] +=
+                  stats.mu.battles * stats.samples.d_30;
               });
 
               TANK_CLASSES.forEach((tankClass) => {

src/app/tools/tank-performance/components/Total.tsx

@@ -18,7 +18,7 @@ export const Total = memo<TotalProps>(
     const sum = useCallback(
       (slice: (tank: AverageDefinitionsAllStats) => number) => {
         return tanks.reduce(
-          (acc, tank) => acc + tank.samples * slice(tank.mu),
+          (acc, tank) => acc + tank.samples.total * slice(tank.mu),
           0,
         );
       },

src/app/tools/tank-performance/page.tsx

@@ -1,5 +1,5 @@
 import PageWrapper from '../../../components/PageWrapper';
-import { TankFiltersProvider } from '../../../stores/tankFilters';
+import * as TankFilters from '../../../stores/tankFilters';
 import { FilterControl } from '../tankopedia/components/FilterControl';
 import { Info } from './components/Info';
 import { TankTable } from './components/Table';
@@ -7,13 +7,13 @@ import { TierBreakdown } from './components/TierBreakdown';
 
 export default function Page() {
   return (
-    <TankFiltersProvider>
+    <TankFilters.Provider>
       <PageWrapper color="jade" noMaxWidth>
         <Info />
         <TierBreakdown />
         <FilterControl />
         <TankTable />
       </PageWrapper>
-    </TankFiltersProvider>
+    </TankFilters.Provider>
   );
 }

src/app/tools/tankopedia/components/FilterControl.tsx

@@ -14,11 +14,7 @@ import { asset } from '../../../../core/blitzkit/asset';
 import { gameDefinitions } from '../../../../core/blitzkit/gameDefinitions';
 import { Tier } from '../../../../core/blitzkit/tankDefinitions';
 import { TIER_ROMAN_NUMERALS } from '../../../../core/blitzkit/tankDefinitions/constants';
-import {
-  useTankFilters,
-  useTankFiltersContext,
-  useTankFiltersMutation,
-} from '../../../../stores/tankFilters';
+import * as TankFilters from '../../../../stores/tankFilters';
 
 interface FilterControlProps {
   compact?: boolean;
@@ -26,9 +22,9 @@ interface FilterControlProps {
 
 export function FilterControl({ compact }: FilterControlProps) {
   const awaitedGameDefinitions = use(gameDefinitions);
-  const filters = useTankFilters();
-  const mutateTankFilters = useTankFiltersMutation();
-  const tankFiltersContext = useTankFiltersContext();
+  const filters = TankFilters.use();
+  const mutateTankFilters = TankFilters.useMutation();
+  const tankFiltersStore = TankFilters.useStore();
 
   return (
     <Flex height="fit-content" gap="2" align="start" justify="center">
@@ -325,10 +321,7 @@ export function FilterControl({ compact }: FilterControlProps) {
         <IconButton
           color="red"
           onClick={() => {
-            tankFiltersContext.setState(
-              tankFiltersContext.getInitialState(),
-              true,
-            );
+            tankFiltersStore.setState(tankFiltersStore.getInitialState(), true);
           }}
         >
           <ReloadIcon />

src/app/tools/tankopedia/components/NoResults.tsx

@@ -1,12 +1,12 @@
 import { Flex, Link, Text } from '@radix-ui/themes';
-import { useTankFiltersContext } from '../../../../stores/tankFilters';
+import * as TankFilters from '../../../../stores/tankFilters';
 
 interface NoResultsProps {
   type?: 'filters' | 'search';
 }
 
 export function NoResults({ type = 'filters' }: NoResultsProps) {
-  const tankFiltersContext = useTankFiltersContext();
+  const tankFiltersStore = TankFilters.useStore();
 
   return (
     <Flex flexGrow="1" align="center" justify="center">
@@ -17,10 +17,7 @@ export function NoResults({ type = 'filters' }: NoResultsProps) {
           underline="always"
           color="red"
           onClick={() =>
-            tankFiltersContext.setState(
-              tankFiltersContext.getInitialState(),
-              true,
-            )
+            tankFiltersStore.setState(tankFiltersStore.getInitialState(), true)
           }
         >
           {type === 'filters' ? 'Try clearing filters' : 'Try searching again'}

src/app/tools/tankopedia/components/QuickLink.tsx

@@ -1,15 +1,15 @@
 import { CaretRightIcon } from '@radix-ui/react-icons';
 import { Button, Link, TextField } from '@radix-ui/themes';
 import { TankDefinition } from '../../../../core/blitzkit/tankDefinitions';
-import { useTankFilters } from '../../../../stores/tankFilters';
+import * as TankFilters from '../../../../stores/tankFilters';
 
 interface QuickLinkProps {
   topResult?: TankDefinition;
 }
 
 export function QuickLink({ topResult }: QuickLinkProps) {
-  const search = useTankFilters((state) => state.search);
-  const searching = useTankFilters((state) => state.searching);
+  const search = TankFilters.use((state) => state.search);
+  const searching = TankFilters.use((state) => state.searching);
 
   if (!search || !topResult || searching) return null;
 

src/app/tools/tankopedia/components/SearchBar.tsx

@@ -4,10 +4,7 @@ import { debounce } from 'lodash';
 import { useRouter } from 'next/navigation';
 import { KeyboardEventHandler, useCallback, useRef } from 'react';
 import { TankDefinition } from '../../../../core/blitzkit/tankDefinitions';
-import {
-  useTankFilters,
-  useTankFiltersContext,
-} from '../../../../stores/tankFilters';
+import * as TankFilters from '../../../../stores/tankFilters';
 import { QuickLink } from './QuickLink';
 import { Sort } from './Sort';
 
@@ -17,27 +14,27 @@ interface SearchBarProps {
 }
 
 export function SearchBar({ topResult, onSelect }: SearchBarProps) {
-  const tankFiltersContext = useTankFiltersContext();
+  const tankFiltersStore = TankFilters.useStore();
   const router = useRouter();
   const input = useRef<HTMLInputElement>(null);
-  const searching = useTankFilters((state) => state.searching);
+  const searching = TankFilters.use((state) => state.searching);
   const performSearch = useCallback(
     debounce(() => {
-      tankFiltersContext.setState({ searching: false });
+      tankFiltersStore.setState({ searching: false });
 
       if (!input.current) return;
 
       const sanitized = input.current.value.trim();
 
-      tankFiltersContext.setState({
+      tankFiltersStore.setState({
         search: sanitized.length === 0 ? undefined : sanitized,
       });
     }, 500),
     [],
   );
   const handleChange = useCallback(() => {
-    if (!tankFiltersContext.getState().searching) {
-      tankFiltersContext.setState({ searching: true });
+    if (!tankFiltersStore.getState().searching) {
+      tankFiltersStore.setState({ searching: true });
     }
 
     performSearch();

src/app/tools/tankopedia/components/TankSearch/index.tsx

@@ -20,7 +20,7 @@ import {
 } from '../../../../../core/blitzkit/tankDefinitions';
 import { unionBoundingBox } from '../../../../../core/blitzkit/unionBoundingBox';
 import { useAdExempt } from '../../../../../hooks/useAdExempt';
-import { useTankFilters } from '../../../../../stores/tankFilters';
+import * as TankFilters from '../../../../../stores/tankFilters';
 import { SORT_NAMES, SORT_UNITS } from '../../../../../stores/tankopedia';
 import { useTankopediaSort } from '../../../../../stores/tankopediaSort';
 import { FilterControl } from '../FilterControl';
@@ -45,7 +45,7 @@ export const TankSearch = memo<TankSearchProps>(
     const awaitedTankDefinitions = use(tankDefinitions);
     const awaitedTanksDefinitionsArray = use(tanksDefinitionsArray);
     const awaitedTankNames = use(tankNames);
-    const filters = useTankFilters();
+    const filters = TankFilters.use();
     const sort = useTankopediaSort();
     const tanks = useMemo(() => {
       if (filters.search === undefined) {

src/app/tools/tankopedia/components/TierFilter.tsx

@@ -3,17 +3,14 @@ import { times } from 'lodash';
 import { memo } from 'react';
 import { Tier } from '../../../../core/blitzkit/tankDefinitions';
 import { TIER_ROMAN_NUMERALS } from '../../../../core/blitzkit/tankDefinitions/constants';
-import {
-  useTankFilters,
-  useTankFiltersMutation,
-} from '../../../../stores/tankFilters';
+import * as TankFilters from '../../../../stores/tankFilters';
 import { useTankopediaSort } from '../../../../stores/tankopediaSort';
 
 export const TierFilter = memo(() => {
-  const tierFilter = useTankFilters((state) => state.tiers);
+  const tierFilter = TankFilters.use((state) => state.tiers);
   const sort = useTankopediaSort();
-  const search = useTankFilters((state) => state.search);
-  const mutateTankFilters = useTankFiltersMutation();
+  const search = TankFilters.use((state) => state.search);
+  const mutateTankFilters = TankFilters.useMutation();
 
   if (sort.by !== 'meta.none' || search) return null;
 

src/app/tools/tankopedia/page.tsx

@@ -3,18 +3,18 @@
 import { AdMidSectionResponsive } from '../../../components/AdMidSectionResponsive';
 import PageWrapper from '../../../components/PageWrapper';
 import { useAdExempt } from '../../../hooks/useAdExempt';
-import { TankFiltersProvider } from '../../../stores/tankFilters';
+import * as TankFilters from '../../../stores/tankFilters';
 import { TankSearch } from './components/TankSearch';
 
 export default function Page() {
   const exempt = useAdExempt();
 
   return (
-    <TankFiltersProvider>
+    <TankFilters.Provider>
       <PageWrapper color="purple" size={1028}>
         <TankSearch />
         {!exempt && <AdMidSectionResponsive />}
       </PageWrapper>
-    </TankFiltersProvider>
+    </TankFilters.Provider>
   );
 }

src/core/blitzkit/filterTank.ts

@@ -1,4 +1,3 @@
-import { TankFilters } from '../../stores/tankFilters';
 import { TankDefinition } from './tankDefinitions';
 
 export function filterTank(filters: TankFilters, tank: TankDefinition) {

src/core/zustand/createNextSafeStore.tsx

@@ -0,0 +1,71 @@
+import { Draft, produce } from 'immer';
+import { Context, createContext, ReactNode, useContext, useRef } from 'react';
+import { createStore, StoreApi, useStore as useStoreZustand } from 'zustand';
+
+interface StoreProviderProps {
+  children: ReactNode;
+}
+
+export function createStoreContext<Type>() {
+  return createContext<StoreApi<Type> | undefined>(undefined);
+}
+
+export function createStoreProvider<Type>(
+  initialState: Type,
+  Context: Context<StoreApi<Type> | undefined>,
+) {
+  return function Provider({ children }: StoreProviderProps) {
+    const storeRef = useRef<StoreApi<Type>>();
+    if (!storeRef.current) {
+      storeRef.current = createStore<Type>()(() => ({ ...initialState }));
+    }
+
+    return (
+      <Context.Provider value={storeRef.current}>{children}</Context.Provider>
+    );
+  };
+}
+
+export function createNextSafeStore<Type>(initialState: Type) {
+  const Context = createContext<StoreApi<Type> | undefined>(undefined);
+
+  function Provider({ children }: StoreProviderProps) {
+    const storeRef = useRef<StoreApi<Type>>();
+    if (!storeRef.current) {
+      storeRef.current = createStore<Type>()(() => ({ ...initialState }));
+    }
+
+    return (
+      <Context.Provider value={storeRef.current}>{children}</Context.Provider>
+    );
+  }
+
+  function useStore() {
+    const store = useContext(Context);
+    if (!store) {
+      throw new Error('useStoreContext must be used within Provider');
+    }
+    return store;
+  }
+
+  function use<Slice = Type>(
+    selector: (store: Type) => Slice = (state) => state as unknown as Slice,
+  ): Slice {
+    const store = useStore();
+    return useStoreZustand(store, selector);
+  }
+
+  function useMutation() {
+    const counterStoreContext = useStore();
+
+    return function (recipe: (draft: Draft<Type>) => void) {
+      counterStoreContext.setState(
+        produce<Type>((draft) => {
+          recipe(draft);
+        }),
+      );
+    };
+  }
+
+  return { Provider, use, useMutation, useStore };
+}

src/hooks/useAveragesExclusionRatio.ts

@@ -8,6 +8,6 @@ export function useAveragesExclusionRatio() {
 
   return (
     awaitedDiscoveredIdsDefinitions.count /
-    awaitedAverageDefinitions.scanned_players
+    awaitedAverageDefinitions.samples.total
   );
 }

src/stores/tankFilters.tsx

@@ -1,10 +1,8 @@
 'use client';
 
-import { produce } from 'immer';
-import { createContext, ReactNode, useContext, useRef } from 'react';
-import { createStore, StoreApi, useStore } from 'zustand';
 import { TankClass, TreeType } from '../components/Tanks';
 import { Tier } from '../core/blitzkit/tankDefinitions';
+import { createNextSafeStore } from '../core/zustand/createNextSafeStore';
 
 export interface TankFilters {
   tiers: Tier[];
@@ -16,58 +14,13 @@ export interface TankFilters {
   searching: boolean;
 }
 
-export const tankFiltersInitialState: TankFilters = {
-  testing: 'include',
-  searching: false,
-  classes: [],
-  nations: [],
-  tiers: [],
-  types: [],
-};
-
-const createTankFiltersStore = (
-  initialState: TankFilters = tankFiltersInitialState,
-) => createStore<TankFilters>()(() => ({ ...initialState }));
-
-const TankFiltersContext = createContext<StoreApi<TankFilters> | undefined>(
-  undefined,
-);
-
-interface TankFiltersProviderProps {
-  children: ReactNode;
-}
-
-export function TankFiltersProvider({ children }: TankFiltersProviderProps) {
-  const storeRef = useRef<StoreApi<TankFilters>>();
-  if (!storeRef.current) storeRef.current = createTankFiltersStore();
-
-  return (
-    <TankFiltersContext.Provider value={storeRef.current}>
-      {children}
-    </TankFiltersContext.Provider>
-  );
-}
-
-export function useTankFiltersContext() {
-  const context = useContext(TankFiltersContext);
-  if (!context) {
-    throw new Error('useTankFilters must be used within TankFiltersContext');
-  }
-  return context;
-}
-
-export function useTankFilters<Type = TankFilters>(
-  selector: (store: TankFilters) => Type = (store) => store as Type,
-): Type {
-  const counterStoreContext = useTankFiltersContext();
-
-  return useStore(counterStoreContext, selector);
-}
-
-export function useTankFiltersMutation() {
-  const counterStoreContext = useTankFiltersContext();
-
-  return function (recipe: (draft: TankFilters) => void) {
-    counterStoreContext.setState(produce(recipe));
-  };
-}
+export const { Provider, use, useMutation, useStore } =
+  createNextSafeStore<TankFilters>({
+    tiers: [],
+    nations: [],
+    classes: [],
+    types: [],
+    testing: 'include',
+    search: undefined,
+    searching: false,
+  });