feat: transition to next safe zustand

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

@@ -1,5 +1,6 @@
 import { Skeleton, Table } from '@radix-ui/themes';
 import { times } from 'lodash';
+import { tankPerformanceSortTypeNamesArray } from '../../../../stores/tankPerformanceSort';
 
 export function RowLoader() {
   return (
@@ -8,7 +9,7 @@ export function RowLoader() {
         <Skeleton height="100%" width="128px" />
       </Table.RowHeaderCell>
 
-      {times(13, (index) => (
+      {times(tankPerformanceSortTypeNamesArray.length, (index) => (
         <Table.Cell key={index} align="center">
           <Skeleton height="1em" width="32px" />
         </Table.Cell>

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

@@ -108,7 +108,7 @@ export function Tanks() {
     return tanksSorted.filter((tank) =>
       filterTank(filters, awaitedTankDefinitions[tank.id]),
     );
-  }, [filters, tanksSorted]);
+  }, [filters, tanksSorted, sort]);
 
   return (
     <Table.Body>

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

@@ -1,14 +1,17 @@
 import PageWrapper from '../../../components/PageWrapper';
+import { TankFiltersProvider } from '../../../stores/tankFilters';
 import { FilterControl } from '../tankopedia/components/FilterControl';
 import { Info } from './components/Info';
 import { TankTable } from './components/Table';
 
 export default function Page() {
   return (
-    <PageWrapper color="jade" noMaxWidth>
-      <Info />
-      <FilterControl />
-      <TankTable />
-    </PageWrapper>
+    <TankFiltersProvider>
+      <PageWrapper color="jade" noMaxWidth>
+        <Info />
+        <FilterControl />
+        <TankTable />
+      </PageWrapper>
+    </TankFiltersProvider>
   );
 }

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

@@ -15,8 +15,9 @@ import { gameDefinitions } from '../../../../core/blitzkit/gameDefinitions';
 import { Tier } from '../../../../core/blitzkit/tankDefinitions';
 import { TIER_ROMAN_NUMERALS } from '../../../../core/blitzkit/tankDefinitions/constants';
 import {
-  mutateTankFilters,
   useTankFilters,
+  useTankFiltersContext,
+  useTankFiltersMutation,
 } from '../../../../stores/tankFilters';
 
 interface FilterControlProps {
@@ -26,6 +27,8 @@ interface FilterControlProps {
 export function FilterControl({ compact }: FilterControlProps) {
   const awaitedGameDefinitions = use(gameDefinitions);
   const filters = useTankFilters();
+  const mutateTankFilters = useTankFiltersMutation();
+  const tankFiltersContext = useTankFiltersContext();
 
   return (
     <Flex height="fit-content" gap="2" align="start" justify="center">
@@ -321,9 +324,12 @@ export function FilterControl({ compact }: FilterControlProps) {
       <Box>
         <IconButton
           color="red"
-          onClick={() =>
-            useTankFilters.setState(useTankFilters.getInitialState(), true)
-          }
+          onClick={() => {
+            tankFiltersContext.setState(
+              tankFiltersContext.getInitialState(),
+              true,
+            );
+          }}
         >
           <ReloadIcon />
         </IconButton>

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

@@ -4,8 +4,8 @@ import { memo } from 'react';
 import { Tier } from '../../../../core/blitzkit/tankDefinitions';
 import { TIER_ROMAN_NUMERALS } from '../../../../core/blitzkit/tankDefinitions/constants';
 import {
-  mutateTankFilters,
   useTankFilters,
+  useTankFiltersMutation,
 } from '../../../../stores/tankFilters';
 import { useTankopediaSort } from '../../../../stores/tankopediaSort';
 
@@ -13,6 +13,7 @@ export const TierFilter = memo(() => {
   const tierFilter = useTankFilters((state) => state.tiers);
   const sort = useTankopediaSort();
   const search = useTankFilters((state) => state.search);
+  const mutateTankFilters = useTankFiltersMutation();
 
   if (sort.by !== 'meta.none' || search) return null;
 
@@ -25,7 +26,7 @@ export const TierFilter = memo(() => {
       >
         {times(10, (index) => {
           const tier = (10 - index) as Tier;
-          const selected = tierFilter === tier;
+          const selected = tierFilter.includes(tier);
 
           return (
             <IconButton
@@ -36,7 +37,11 @@ export const TierFilter = memo(() => {
               highContrast
               onClick={() =>
                 mutateTankFilters((draft) => {
-                  draft.tiers = tier;
+                  if (draft.tiers?.includes(tier)) {
+                    draft.tiers = draft.tiers?.filter((t) => t !== tier);
+                  } else {
+                    draft.tiers = [...(draft.tiers ?? []), tier];
+                  }
                 })
               }
             >

src/app/tools/tankopedia/page.tsx

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