feat: use custom state manager

packages/website/src/components/TierList/Controls/index.tsx

@@ -1,11 +1,10 @@
 import { ReloadIcon } from '@radix-ui/react-icons';
 import { Button, Flex } from '@radix-ui/themes';
 import { useLocale } from '../../../hooks/useLocale';
-import { TierList, tierListInitialState } from '../../../stores/tierList';
+import { TierList } from '../../../stores/tierList';
 import { Share } from './components/Share';
 
 export function TierListControls() {
-  const mutateTierList = TierList.useMutation();
   const { strings } = useLocale();
 
   return (
@@ -13,8 +12,8 @@ export function TierListControls() {
       <Button
         color="red"
         onClick={() => {
-          mutateTierList((draft) => {
-            Object.assign(draft, tierListInitialState);
+          TierList.mutate((draft) => {
+            Object.assign(draft, TierList.initial);
           });
         }}
       >

packages/website/src/components/TierList/Row/components/Header.tsx

@@ -26,7 +26,6 @@ export function Header({ index }: HeaderProps) {
   const rowStyle = tierListRows[index];
   const name = TierList.use((state) => state.rows[index].name);
   const input = useRef<HTMLInputElement>(null);
-  const mutateTierList = TierList.useMutation();
   const [open, setOpen] = useState(false);
 
   return (
@@ -67,9 +66,8 @@ export function Header({ index }: HeaderProps) {
               onBlur={() => {
                 if (!input.current) return;
 
-                mutateTierList((draft) => {
+                TierList.mutate((draft) => {
                   if (!input.current) return;
-
                   draft.rows[index].name = input.current.value;
                 });
 

packages/website/src/components/TierList/Tile.tsx

@@ -25,7 +25,6 @@ type TierListTileProps = {
 
 export function TierListTile(props: TierListTileProps) {
   const card = useRef<HTMLDivElement>(null);
-  const mutateTierList = TierList.useMutation();
   const lastPosition = useRef({ x: 0, y: 0 });
   const handlePointerDown = useCallback(
     (event: ReactPointerEvent<HTMLSpanElement>) => {
@@ -48,7 +47,7 @@ export function TierListTile(props: TierListTileProps) {
       window.addEventListener('pointermove', handlePointerMove);
       window.addEventListener('pointerup', handlePointerUp);
 
-      mutateTierList((draft) => {
+      TierList.mutate((draft) => {
         draft.dragging = true;
       });
     },
@@ -104,7 +103,7 @@ export function TierListTile(props: TierListTileProps) {
 
         const tileIndex = Number(tile.dataset.tileIndex);
 
-        mutateTierList((draft) => {
+        TierList.mutate((draft) => {
           draft.dragging = false;
           draft.rows.forEach((row) => {
             row.tanks = row.tanks.filter((tankId) => tankId !== props.tank.id);
@@ -118,7 +117,7 @@ export function TierListTile(props: TierListTileProps) {
         break rowLoop;
       }
 
-      mutateTierList((draft) => {
+      TierList.mutate((draft) => {
         draft.dragging = false;
         draft.rows.forEach((row) => {
           row.tanks = row.tanks.filter((tankId) => tankId !== props.tank.id);
@@ -133,7 +132,7 @@ export function TierListTile(props: TierListTileProps) {
     }
 
     if (!wasPlaced) {
-      mutateTierList((draft) => {
+      TierList.mutate((draft) => {
         draft.dragging = false;
         draft.rows.forEach((row) => {
           row.tanks = row.tanks.filter((tankId) => tankId !== props.tank.id);

packages/website/src/components/TierList/URLManager.tsx

@@ -7,7 +7,6 @@ const tankDefinitions = await awaitableTankDefinitions;
 
 export function URLManager() {
   const rows = TierList.use((state) => state.rows);
-  const mutateTierList = TierList.useMutation();
 
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
@@ -20,7 +19,7 @@ export function URLManager() {
           .map(Number)
           .filter((id) => id in tankDefinitions.tanks);
 
-        mutateTierList((draft) => {
+        TierList.mutate((draft) => {
           draft.rows[index].tanks = values;
         });
       }

packages/website/src/pages/[...locale]/tier-list/_index.tsx

@@ -9,16 +9,13 @@ import {
   type LocaleAcceptorProps,
 } from '../../../hooks/useLocale';
 import { TankopediaPersistent } from '../../../stores/tankopediaPersistent';
-import { TierList } from '../../../stores/tierList';
 
 export function Page({ locale }: LocaleAcceptorProps) {
   return (
     <LocaleProvider locale={locale}>
-      <TierList.Provider>
-        <TankopediaPersistent.Provider>
-          <Content />
-        </TankopediaPersistent.Provider>
-      </TierList.Provider>
+      <TankopediaPersistent.Provider>
+        <Content />
+      </TankopediaPersistent.Provider>
     </LocaleProvider>
   );
 }

packages/website/src/stores/tierList.ts

@@ -1,8 +1,6 @@
 import { enableMapSet } from 'immer';
-import { create } from 'zustand';
-import { subscribeWithSelector } from 'zustand/middleware';
+import { Varuna } from 'varuna';
 import { tierListRows } from '../components/TierList/Table/constants';
-import { createContextualStore } from '../core/zustand/createContextualStore';
 
 export interface TierList {
   dragging: boolean;
@@ -10,19 +8,10 @@ export interface TierList {
   placedTanks: Set<number>;
 }
 
-enableMapSet();
-
-export const tierListInitialState: TierList = {
+export const TierList = new Varuna<TierList>({
   dragging: false,
-  rows: tierListRows.map((row) => ({
-    name: row.name,
-    tanks: [],
-  })),
+  rows: tierListRows.map((row) => ({ name: row.name, tanks: [] })),
   placedTanks: new Set(),
-};
+});
 
-export const TierList = createContextualStore(() =>
-  create<TierList>()(
-    subscribeWithSelector<TierList>(() => tierListInitialState),
-  ),
-);
+enableMapSet();