feat: sessions survive across refreshes

labeleven-dev · Oct 3, 2022 · f66cac6 · f66cac6
1 parent 10e7570
commit f66cac6
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 16 deletions.
diff --git a/src/hooks/useConfigStore.ts b/src/hooks/useConfigStore.ts
@@ -5,8 +5,6 @@ import shallow from "zustand/shallow";
 import { PersistentState } from "../types/state";
 import { DEFAULT_PERSISTENT_STATE } from "../utils/state";
 
-const LOCAL_STORAGE_KEY = "bcsol-config";
-
 /**
  * Provides access to the LocalStorage Zustand store
  */
@@ -19,7 +17,7 @@ export const useConfigStore = create<PersistentState>()(
       },
     }),
     {
-      name: LOCAL_STORAGE_KEY,
+      name: "bcsol-config",
       version: 1,
     }
   )

diff --git a/src/hooks/useSessionStore.ts b/src/hooks/useSessionStore.ts
@@ -1,6 +1,6 @@
 import produce from "immer";
 import create from "zustand";
-import { subscribeWithSelector } from "zustand/middleware";
+import { persist, subscribeWithSelector } from "zustand/middleware";
 import shallow from "zustand/shallow";
 import { SessionStateWithoutUndo, SessionStateWithUndo } from "../types/state";
 import {
@@ -13,12 +13,25 @@ import {
 /**
  * Provides access to in-memory Zustand store, for state that can be undo/redo'ed
  */
-export const useSessionStoreWithUndo = create<SessionStateWithUndo>((set) => ({
-  ...DEFAULT_SESSION_STATE_WITH_UNDO,
-  set: (fn) => {
-    set(produce(fn));
-  },
-}));
+export const useSessionStoreWithUndo = create<SessionStateWithUndo>()(
+  persist(
+    (set) => ({
+      ...DEFAULT_SESSION_STATE_WITH_UNDO,
+      set: (fn) => {
+        set(produce(fn));
+      },
+    }),
+    {
+      name: "bscol-with-undo",
+      getStorage: () => sessionStorage,
+      serialize: ({ state, ...theRest }) =>
+        JSON.stringify({
+          ...theRest,
+          state: { ...state, lastUpdatedAt: new Date().getTime() },
+        }),
+    }
+  )
+);
 
 export const useShallowSessionStoreWithUndo = <U>(
   selector: (state: SessionStateWithUndo) => U
@@ -28,12 +41,18 @@ export const useShallowSessionStoreWithUndo = <U>(
  * Provides access to in-memory Zustand store, for state that should not be undo/redo'ed
  */
 export const useSessionStoreWithoutUndo = create<SessionStateWithoutUndo>()(
-  subscribeWithSelector((set) => ({
-    ...DEFAULT_SESSION_STATE_WITHOUT_UNDO,
-    set: (fn) => {
-      set(produce(fn));
-    },
-  }))
+  persist(
+    subscribeWithSelector((set) => ({
+      ...DEFAULT_SESSION_STATE_WITHOUT_UNDO,
+      set: (fn) => {
+        set(produce(fn));
+      },
+    })),
+    {
+      name: "bscol-without-undo",
+      getStorage: () => sessionStorage,
+    }
+  )
 );
 
 export const useShallowSessionStoreWithoutUndo = <U>(