From 8b70aa12e4e3f135d60b7ea40c1742bbd6b1ec3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Tue, 9 Jul 2024 19:53:50 -0500 Subject: [PATCH] feat: migrate compare store --- .../tools/compare/components/TankControl.tsx | 7 +- src/app/tools/compare/layout.tsx | 17 +++++ src/app/tools/compare/page.tsx | 75 ++++++++++--------- src/core/blitzkit/tankToCompareMember.ts | 2 +- src/stores/compare.ts | 52 ------------- src/stores/compareEphemeral.ts | 26 +++++++ src/stores/comparePersistent.ts | 26 +++++++ src/stores/session.ts | 2 + 8 files changed, 115 insertions(+), 92 deletions(-) create mode 100644 src/app/tools/compare/layout.tsx delete mode 100644 src/stores/compare.ts create mode 100644 src/stores/compareEphemeral.ts create mode 100644 src/stores/comparePersistent.ts diff --git a/src/app/tools/compare/components/TankControl.tsx b/src/app/tools/compare/components/TankControl.tsx index db2fdb73d..03aff08e5 100644 --- a/src/app/tools/compare/components/TankControl.tsx +++ b/src/app/tools/compare/components/TankControl.tsx @@ -4,7 +4,7 @@ import Link from 'next/link'; import { use, useState } from 'react'; import { provisionDefinitions } from '../../../../core/blitzkit/provisionDefinitions'; import { tankToCompareMember } from '../../../../core/blitzkit/tankToCompareMember'; -import { mutateCompareTemporary } from '../../../../stores/compare'; +import * as CompareEphemeral from '../../../../stores/compareEphemeral'; import { TankSearch } from '../../tankopedia/components/TankSearch'; interface TankControlProps { @@ -15,13 +15,14 @@ interface TankControlProps { export function TankControl({ index, id }: TankControlProps) { const awaitedProvisionDefinitions = use(provisionDefinitions); const [switchTankDialogOpen, setSwitchTankDialogOpen] = useState(false); + const mutateCompareEphemeral = CompareEphemeral.useMutation(); return ( { - mutateCompareTemporary((draft) => { + mutateCompareEphemeral((draft) => { draft.members.splice(index, 1); draft.sorting = undefined; }); @@ -51,7 +52,7 @@ export function TankControl({ index, id }: TankControlProps) { { - mutateCompareTemporary((draft) => { + mutateCompareEphemeral((draft) => { draft.members[index] = tankToCompareMember( tank, awaitedProvisionDefinitions, diff --git a/src/app/tools/compare/layout.tsx b/src/app/tools/compare/layout.tsx new file mode 100644 index 000000000..6f918444a --- /dev/null +++ b/src/app/tools/compare/layout.tsx @@ -0,0 +1,17 @@ +import { ReactNode } from 'react'; +import * as CompareEphemeral from '../../../stores/compareEphemeral'; +import * as ComparePersistent from '../../../stores/comparePersistent'; +import * as TankFilters from '../../../stores/tankFilters'; +import * as TankopediaSort from '../../../stores/tankopediaSort'; + +export default function Layout({ children }: { children: ReactNode }) { + return ( + + + + {children} + + + + ); +} diff --git a/src/app/tools/compare/page.tsx b/src/app/tools/compare/page.tsx index c77980687..4b7acdc32 100644 --- a/src/app/tools/compare/page.tsx +++ b/src/app/tools/compare/page.tsx @@ -50,13 +50,8 @@ import { tankIcon } from '../../../core/blitzkit/tankIcon'; import { tankToCompareMember } from '../../../core/blitzkit/tankToCompareMember'; import { BlitzkitButtonWatermark } from '../../../icons/BlitzkitButtonWatermark'; import { theme } from '../../../stitches.config'; -import { - DeltaMode, - mutateComparePersistent, - mutateCompareTemporary, - useComparePersistent, - useCompareTemporary, -} from '../../../stores/compare'; +import * as CompareEphemeral from '../../../stores/compareEphemeral'; +import * as ComparePersistent from '../../../stores/comparePersistent'; import { EquipmentMatrix } from '../../../stores/duel'; import { permanentSkills } from '../tankopedia/[id]/components/Characteristics/components/Skills/constants'; import { TankSearch } from '../tankopedia/components/TankSearch'; @@ -71,14 +66,16 @@ export default function Page() { const awaitedSkillDefinitions = use(skillDefinitions); const awaitedConsumableDefinitions = use(consumableDefinitions); const searchParams = useSearchParams(); - const members = useCompareTemporary((state) => state.members); + const members = CompareEphemeral.use((state) => state.members); const [addTankDialogOpen, setAddTankDialogOpen] = useState(false); - const sorting = useCompareTemporary((state) => state.sorting); + const sorting = CompareEphemeral.use((state) => state.sorting); const awaitedModelDefinitions = use(modelDefinitions); const awaitedEquipmentDefinitions = use(equipmentDefinitions); const awaitedProvisionDefinitions = use(provisionDefinitions); - const deltaMode = useComparePersistent((state) => state.deltaMode); - const crewSkills = useCompareTemporary((state) => state.crewSkills); + const deltaMode = ComparePersistent.use((state) => state.deltaMode); + const crewSkills = CompareEphemeral.use((state) => state.crewSkills); + const mutateCompareEphemeral = CompareEphemeral.useMutation(); + const mutateComparePersistent = ComparePersistent.useMutation(); const haveReactive = members.some((member) => member.consumables.includes(33), ); @@ -151,7 +148,7 @@ export default function Page() { const tanksParam = searchParams.get('tanks'); if (tanksParam) { - mutateCompareTemporary((draft) => { + mutateCompareEphemeral((draft) => { draft.members = tanksParam .split(',') .map(Number) @@ -165,7 +162,7 @@ export default function Page() { } if (Object.keys(crewSkills).length === 0) { - mutateCompareTemporary((draft) => { + mutateCompareEphemeral((draft) => { draft.crewSkills = createDefaultSkills(awaitedSkillDefinitions); }); } @@ -210,7 +207,7 @@ export default function Page() { color={sorting?.by === name ? undefined : 'gray'} variant="ghost" onClick={() => { - mutateCompareTemporary((draft) => { + mutateCompareEphemeral((draft) => { draft.members.sort((memberA, memberB) => { const indexA = draft.members.indexOf(memberA); const indexB = draft.members.indexOf(memberB); @@ -413,7 +410,7 @@ export default function Page() { if (dropIndex === -1) return; - mutateCompareTemporary((draft) => { + mutateCompareEphemeral((draft) => { const fromIndex = index; const toIndex = dropIndex > index ? dropIndex - 1 : dropIndex; @@ -558,7 +555,7 @@ export default function Page() { { - mutateCompareTemporary((draft) => { + mutateCompareEphemeral((draft) => { draft.members.push( tankToCompareMember( tank, @@ -570,7 +567,7 @@ export default function Page() { setAddTankDialogOpen(false); }} onSelectAll={(tanks) => { - mutateCompareTemporary((draft) => { + mutateCompareEphemeral((draft) => { draft.members.push( ...tanks.map((tank) => tankToCompareMember( @@ -593,7 +590,7 @@ export default function Page() { variant="soft" color="red" onClick={() => { - mutateCompareTemporary((draft) => { + mutateCompareEphemeral((draft) => { draft.members = []; draft.sorting = undefined; }); @@ -606,17 +603,23 @@ export default function Page() { value={deltaMode} onValueChange={(value) => { mutateComparePersistent((draft) => { - draft.deltaMode = value as DeltaMode; + draft.deltaMode = value as ComparePersistent.DeltaMode; }); }} > - + No deltas - + Percentage - + Absolute @@ -716,7 +719,7 @@ export default function Page() { { - mutateCompareTemporary((draft) => { + mutateCompareEphemeral((draft) => { draft.crewSkills = skills; }); }} @@ -726,7 +729,7 @@ export default function Page() {