Merge pull request #209 from favour-GL/feat/Zustand-v5-incompatibility-in-auth-store.js-and-possibly-others

feat:Zustand v5 incompatibility in auth-store.js and possibly others

Author: dzekojohn4

frontend/store/README.md

@@ -0,0 +1,42 @@
+# Zustand Store Conventions
+
+## Persist keys must be unique
+
+Every store that uses Zustand's `persist` middleware writes to `localStorage`
+(or another storage backend) under the key passed as `name` in the persist
+config. **Two stores must never share a `name`.** If they do, whichever store
+hydrates second on mount silently overwrites the other's persisted data —
+this happened once already (see issue #053) and cost players their progress.
+
+### Naming convention
+
+Use `<store-name>:v<version>`, where `<store-name>` matches the file/hook
+name and `<version>` matches the persist `version` field in that store's
+config:
+
+| Store file                             | Hook                   | Persist `name`           |
+| -------------------------------------- | ---------------------- | ------------------------ |
+| `useGameStore.js`                      | `useGameStore`         | `game-store:v1`          |
+| `game-progress/game-progress-store.js` | `useGameProgressStore` | `game-progress-store:v1` |
+
+When you bump a store's `version` (e.g. because you changed the shape of
+persisted state and need a migration), bump the `:vN` suffix in `name` too,
+so old and new shapes never collide under the same key.
+
+### Adding a new persisted store
+
+1. Pick a `name` following the table format above.
+2. Grep the repo for that exact string before committing, to confirm no
+   other `persist({ name: ... })` call already uses it:
+
+```bash
+   grep -rn "name: ['\"]your-new-key" frontend/store
+```
+
+3. Add a row to the table in this README.
+
+### Note on consolidation
+
+Issue #061 proposes merging `useGameStore` and `useGameProgressStore` into a
+single store. If/when that lands, this file should be updated to reflect the
+single resulting store and its persist key.

frontend/store/game-progress/game-progress-store.js

@@ -1,7 +1,7 @@
-import create from 'zustand';
-import { persist } from 'zustand/middleware';
+import create from "zustand";
+import { persist } from "zustand/middleware";
 
-const useGameStore = create(
+const useGameProgressStore = create(
   persist(
     (set) => ({
       completedPuzzles: [],
@@ -27,10 +27,10 @@ const useGameStore = create(
         }),
     }),
     {
-      name: 'game-storage', // unique name for storage
+      name: "game-progress-store:v1", // unique name for storage — do not reuse 'game-storage'
       getStorage: () => localStorage, // (optional) by default, 'localStorage' is used
-    }
-  )
+    },
+  ),
 );
 
-export default useGameStore;
+export default useGameProgressStore;

frontend/store/useGameStore.js

@@ -18,6 +18,7 @@ import axios from "axios";
  * not move the factory invocation inside `setItem` or the debounce
  * will be defeated by per-call instance re-creation.
  */
+
 const createThrottledStorage = (storage, delayMs = 150) => {
   let timer = null;
   let pendingValue = null;
@@ -90,7 +91,7 @@ const useGameStore = create(
           const response = await axios.post(
             "http://localhost:4001/auth/register",
             { username, password },
-            { withCredentials: true }
+            { withCredentials: true },
           );
           set({ user: response.data });
         } catch (error) {
@@ -104,7 +105,7 @@ const useGameStore = create(
           const response = await axios.post(
             "http://localhost:4001/auth/login",
             { username, password },
-            { withCredentials: true }
+            { withCredentials: true },
           );
           set({ user: response.data });
         } catch (error) {
@@ -118,7 +119,7 @@ const useGameStore = create(
           await axios.post(
             "http://localhost:4001/auth/logout",
             {},
-            { withCredentials: true }
+            { withCredentials: true },
           );
           set({
             user: null,
@@ -148,7 +149,7 @@ const useGameStore = create(
 
         const newCompletedPuzzles = [...completedPuzzles, puzzleId];
         const currentDifficultyPuzzles = newCompletedPuzzles.filter((id) =>
-          id.startsWith(currentDifficulty)
+          id.startsWith(currentDifficulty),
         );
 
         const isLevelCompleted = currentDifficultyPuzzles.length === 5;
@@ -182,7 +183,7 @@ const useGameStore = create(
               currentPuzzleIndex: nextPuzzleIndex,
               score: newScore,
             },
-            { withCredentials: true }
+            { withCredentials: true },
           );
 
           set({
@@ -208,7 +209,7 @@ const useGameStore = create(
               userId: user.id,
               nft,
             },
-            { withCredentials: true }
+            { withCredentials: true },
           );
 
           set({ nfts: [...nfts, nft] });
@@ -230,7 +231,7 @@ const useGameStore = create(
             {
               params: { page, limit },
               withCredentials: true,
-            }
+            },
           );
 
           const data = response.data || {};
@@ -244,7 +245,7 @@ const useGameStore = create(
             const existing = get().nfts || [];
             const seen = new Set(existing.map((n) => n.id));
             const merged = existing.concat(
-              items.filter((n) => n && !seen.has(n.id))
+              items.filter((n) => n && !seen.has(n.id)),
             );
             set({ nfts: merged });
           }
@@ -264,7 +265,7 @@ const useGameStore = create(
         try {
           const response = await axios.get(
             `http://localhost:4001/user/${user.id}`,
-            { withCredentials: true }
+            { withCredentials: true },
           );
           set(response.data);
         } catch (error) {
@@ -281,7 +282,7 @@ const useGameStore = create(
           await axios.post(
             `http://localhost:4001/game/reset`,
             { userId: user.id },
-            { withCredentials: true }
+            { withCredentials: true },
           );
           set({
             currentDifficulty: "easy",
@@ -301,7 +302,7 @@ const useGameStore = create(
       // Throttle writes so the localStorage payload is only re-serialised
       // and written once per coalescing window (see `createThrottledStorage`).
       storage: createJSONStorage(() =>
-        createThrottledStorage(safeLocalStorage())
+        createThrottledStorage(safeLocalStorage()),
       ),
       // Only durable progress fields are persisted. Transient state (none
       // currently, but a narrow allow-list keeps the storage size small and
@@ -316,8 +317,8 @@ const useGameStore = create(
         nfts: state.nfts,
       }),
       version: 1,
-    }
-  )
+    },
+  ),
 );
 
 export default useGameStore;