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;
         });
       }