feat: persistant tankopedia

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

@@ -16,15 +16,15 @@ import {
   TIERS,
   TIER_ROMAN_NUMERALS,
 } from '../../../../../core/blitzkrieg/tankDefinitions';
-import mutateTankopedia, {
+import mutateTankopediaPersistent, {
   TankopediaTestTankDisplay,
-  useTankopedia,
+  useTankopediaPersistent,
 } from '../../../../../stores/tankopedia';
 import * as styles from './index.css';
 
 export function Options() {
   const nations = use(NATIONS);
-  const filters = useTankopedia((state) => state.filters);
+  const filters = useTankopediaPersistent((state) => state.filters);
 
   return (
     <Flex justify="center" direction="column" gap="2">
@@ -32,13 +32,14 @@ export function Options() {
         <Button
           color="red"
           onClick={() =>
-            useTankopedia.setState({
+            useTankopediaPersistent.setState({
               filters: {
                 nations: [],
                 tiers: [],
                 treeTypes: [],
                 types: [],
                 test: 'include',
+                page: 0,
               },
             })
           }
@@ -56,7 +57,7 @@ export function Options() {
             <DropdownMenu.RadioGroup
               value={filters.test}
               onValueChange={(value) =>
-                mutateTankopedia((draft) => {
+                mutateTankopediaPersistent((draft) => {
                   draft.filters.test = value as TankopediaTestTankDisplay;
                 })
               }
@@ -88,7 +89,7 @@ export function Options() {
                   index === TREE_TYPES.length - 1 ? undefined : 0,
               }}
               onClick={() =>
-                mutateTankopedia((draft) => {
+                mutateTankopediaPersistent((draft) => {
                   if (draft.filters.treeTypes.includes(type)) {
                     draft.filters.treeTypes = draft.filters.treeTypes.filter(
                       (preexistingType) => preexistingType !== type,
@@ -123,7 +124,7 @@ export function Options() {
                   index === TANK_TYPES.length - 1 ? undefined : 0,
               }}
               onClick={() =>
-                mutateTankopedia((draft) => {
+                mutateTankopediaPersistent((draft) => {
                   if (draft.filters.types.includes(type)) {
                     draft.filters.types = draft.filters.types.filter(
                       (preexistingType) => preexistingType !== type,
@@ -167,7 +168,7 @@ export function Options() {
                     borderBottomRightRadius: 0,
                   }}
                   onClick={() =>
-                    mutateTankopedia((draft) => {
+                    mutateTankopediaPersistent((draft) => {
                       if (draft.filters.tiers.includes(tier)) {
                         draft.filters.tiers = draft.filters.tiers.filter(
                           (preexistingTier) => preexistingTier !== tier,
@@ -203,7 +204,7 @@ export function Options() {
                         : 0,
                   }}
                   onClick={() =>
-                    mutateTankopedia((draft) => {
+                    mutateTankopediaPersistent((draft) => {
                       if (draft.filters.tiers.includes(tier)) {
                         draft.filters.tiers = draft.filters.tiers.filter(
                           (preexistingTier) => preexistingTier !== tier,
@@ -243,7 +244,7 @@ export function Options() {
                     index === nations.length - 1 ? undefined : 0,
                 }}
                 onClick={() =>
-                  mutateTankopedia((draft) => {
+                  mutateTankopediaPersistent((draft) => {
                     if (draft.filters.nations.includes(nation)) {
                       draft.filters.nations = draft.filters.nations.filter(
                         (preexistingType) => preexistingType !== nation,
@@ -279,7 +280,7 @@ export function Options() {
                       : 0,
                 }}
                 onClick={() =>
-                  mutateTankopedia((draft) => {
+                  mutateTankopediaPersistent((draft) => {
                     if (draft.filters.nations.includes(nation)) {
                       draft.filters.nations = draft.filters.nations.filter(
                         (preexistingType) => preexistingType !== nation,
@@ -315,7 +316,7 @@ export function Options() {
                   index === TIERS.length - 1 ? undefined : 0,
               }}
               onClick={() =>
-                mutateTankopedia((draft) => {
+                mutateTankopediaPersistent((draft) => {
                   if (draft.filters.tiers.includes(tier)) {
                     draft.filters.tiers = draft.filters.tiers.filter(
                       (preexistingTier) => preexistingTier !== tier,
@@ -347,7 +348,7 @@ export function Options() {
                   index === nations.length - 1 ? undefined : 0,
               }}
               onClick={() =>
-                mutateTankopedia((draft) => {
+                mutateTankopediaPersistent((draft) => {
                   if (draft.filters.nations.includes(nation)) {
                     draft.filters.nations = draft.filters.nations.filter(
                       (preexistingType) => preexistingType !== nation,

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

@@ -2,20 +2,17 @@ import { CaretLeftIcon, CaretRightIcon } from '@radix-ui/react-icons';
 import { Button, Flex, TextField } from '@radix-ui/themes';
 import { useEffect, useRef } from 'react';
 import { TankDefinition } from '../../../../core/blitzkrieg/tankDefinitions';
+import mutateTankopediaPersistent, {
+  useTankopediaPersistent,
+} from '../../../../stores/tankopedia';
 
 interface PageTurnerProps {
-  page: number;
-  setPage: (page: number) => void;
   searchedList: TankDefinition[];
   tanksPerPage: number;
 }
 
-export function PageTurner({
-  page,
-  setPage,
-  searchedList,
-  tanksPerPage,
-}: PageTurnerProps) {
+export function PageTurner({ searchedList, tanksPerPage }: PageTurnerProps) {
+  const page = useTankopediaPersistent((state) => state.filters.page);
   const pageInput = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -27,7 +24,11 @@ export function PageTurner({
       <Button
         variant="soft"
         disabled={page === 0}
-        onClick={() => setPage(Math.max(0, page - 1))}
+        onClick={() => {
+          mutateTankopediaPersistent((draft) => {
+            draft.filters.page = Math.max(0, page - 1);
+          });
+        }}
       >
         <CaretLeftIcon />
       </Button>
@@ -41,15 +42,15 @@ export function PageTurner({
           max={Math.floor(searchedList.length / tanksPerPage) + 1}
           style={{ width: 64, textAlign: 'center' }}
           onBlur={(event) => {
-            setPage(
-              Math.max(
+            mutateTankopediaPersistent((draft) => {
+              draft.filters.page = Math.max(
                 0,
                 Math.min(
                   Math.floor(searchedList.length / tanksPerPage),
                   event.target.valueAsNumber - 1,
                 ),
-              ),
-            );
+              );
+            });
           }}
           onKeyDown={(event) => {
             if (event.key === 'Enter') {
@@ -64,11 +65,14 @@ export function PageTurner({
       <Button
         variant="soft"
         disabled={Math.floor(searchedList.length / tanksPerPage) === page}
-        onClick={() =>
-          setPage(
-            Math.min(Math.floor(searchedList.length / tanksPerPage), page + 1),
-          )
-        }
+        onClick={() => {
+          mutateTankopediaPersistent((draft) => {
+            draft.filters.page = Math.min(
+              Math.floor(searchedList.length / tanksPerPage),
+              page + 1,
+            );
+          });
+        }}
       >
         <CaretRightIcon />
       </Button>