finish up zustand

hunts/src/EditPuzzleModal.tsx

@@ -30,7 +30,7 @@ function EditPuzzleModal({
 
   const { showModal, hideModal } = useStore((state) => state.modalSlice);
 
-  const tags = useStore((state) => state.puzzlesSlice.allPuzzleTags());
+  const tags = useStore((state) => state.puzzlesSlice.allPuzzleTags)();
   const meta_tags = tags.filter((tag) => tag.is_meta && tag.name != name);
 
   const onSubmit = (e: FormEvent) => {

hunts/src/EditableTagList.tsx

@@ -15,8 +15,10 @@ function EditableTagList({
   const { addPuzzleTag, deletePuzzleTag } = useStore(
     (state) => state.puzzlesSlice
   );
-  const puzzleTags = useStore((state) => state.puzzlesSlice.allPuzzleTags());
-  const puzzleTagIds = new Set(puzzleTags.map((tag) => tag.id));
+  const puzzles = useStore((state) => state.puzzlesSlice);
+  const puzzleTagIds = new Set(
+    puzzles.getPuzzle(puzzleId).tags.map((tag) => tag.id)
+  );
 
   const selectable_colors = SELECTABLE_TAG_COLORS.map((tag) => tag.color);
 

hunts/src/HuntViewMain.tsx

@@ -43,8 +43,6 @@ export const makePuzzleTableData = (ids: Puzzle[]) => {
   // puzzle object. Then we can offload any actual graph traversal
   // to the table library.
 
-  const state = useStore((state) => state.puzzlesSlice);
-
   // Make a deep copy of everything first
   const rowsCopy: PuzzleTable[] = ids.map((id) => ({
     ...id,
@@ -91,16 +89,18 @@ export const HuntViewMain = (props: { huntId: HuntId }) => {
   const filterSolved = useStore((state) => state.filterSlice.solveStateFilter);
   const { hideAlert } = useStore((state) => state.alertSlice);
 
+  const l = useStore((state) => state.puzzlesSlice.lastUpdate);
+
   useInterval(() => {
     fetchAllPuzzles();
-  }, 10 * 1000);
+  }, 1 * 1000);
 
   const ModalComponent = MODAL_COMPONENTS[modal.type];
   React.useEffect(() => {
     api.getHunt(props.huntId).then((response) => {
       hunt.set(response);
+      fetchAllPuzzles();
     });
-    fetchAllPuzzles();
   }, [props.huntId]);
 
   React.useEffect(() => {

hunts/src/TagCell.tsx

@@ -6,11 +6,9 @@ import type { RootState } from "./store";
 import type { Hunt, Puzzle, Row } from "./types";
 
 function TagCell({ row }: { row: Row<Puzzle> }) {
-  const { modalSlice, hunt } = useStore((state) => ({
-    modalSlice: state.modalSlice,
-    hunt: state.huntSlice.hunt,
-  }));
-  const { toggleFilterTag } = useStore((state: RootState) => state.filterSlice);
+  const modalSlice = useStore((state) => state.modalSlice);
+  const hunt = useStore((state) => state.huntSlice.hunt);
+  const { toggleFilterTag } = useStore((state) => state.filterSlice);
 
   const shouldShowMetaTags =
     row.original.tags.filter((t) => t.is_meta).length > 1;

hunts/src/alertSlice.tsx

@@ -25,7 +25,7 @@ let nextId = 1;
 
 export const alertSlice: StateCreator<
   RootState,
-  [["zustand/immer", never]],
+  [["zustand/devtools", never], ["zustand/immer", never]],
   [],
   AlertSlice
 > = (set, get) => ({

hunts/src/chatSlice.tsx

@@ -17,7 +17,7 @@ export interface ChatSlice {
 
 export const chatSlice: StateCreator<
   RootState,
-  [["zustand/immer", never]],
+  [["zustand/devtools", never], ["zustand/immer", never]],
   [],
   ChatSlice
 > = (set, get) => ({

hunts/src/collapsedPuzzlesSlice.tsx

@@ -13,7 +13,7 @@ export interface CollapsedPuzzlesSlice {
 
 export const collapsedPuzzlesSlice: StateCreator<
   RootState,
-  [["zustand/immer", never]],
+  [["zustand/devtools", never], ["zustand/immer", never]],
   [],
   CollapsedPuzzlesSlice
 > = (set, get) => ({
@@ -30,7 +30,13 @@ export const collapsedPuzzlesSlice: StateCreator<
       });
     },
     getCollapsedPuzzles: (huntId: string) => {
-      return get().collapsedPuzzlesSlice.collapsed[huntId] ?? {};
+      if (!get().collapsedPuzzlesSlice.collapsed.hasOwnProperty(huntId)) {
+        set((state) => {
+          state.collapsedPuzzlesSlice.collapsed[huntId] = {};
+        });
+      }
+
+      return get().collapsedPuzzlesSlice.collapsed[huntId];
     },
   },
 });

hunts/src/filterSlice.tsx

@@ -26,7 +26,7 @@ export interface FilterSlice {
 
 export const filterSlice: StateCreator<
   RootState,
-  [["zustand/immer", never]],
+  [["zustand/devtools", never], ["zustand/immer", never]],
   [],
   FilterSlice
 > = (set, get) => ({

hunts/src/huntSlice.tsx

@@ -13,7 +13,7 @@ export interface HuntSlice {
 
 export const huntSlice: StateCreator<
   RootState,
-  [["zustand/immer", never]],
+  [["zustand/devtools", never], ["zustand/immer", never]],
   [],
   HuntSlice
 > = (set) => ({

hunts/src/modalSlice.tsx

@@ -15,7 +15,7 @@ export interface ModalSlice {
 
 export const modalSlice: StateCreator<
   RootState,
-  [["zustand/immer", never]],
+  [["zustand/devtools", never], ["zustand/immer", never]],
   [],
   ModalSlice
 > = (set, get) => ({

hunts/src/puzzlesSlice.tsx

@@ -46,7 +46,7 @@ export interface PuzzlesSlice {
 
 export const puzzlesSlice: StateCreator<
   RootState,
-  [["zustand/immer", never]],
+  [["zustand/devtools", never], ["zustand/immer", never]],
   [],
   PuzzlesSlice
 > = (set, get) => ({
@@ -63,17 +63,13 @@ export const puzzlesSlice: StateCreator<
       );
     },
     fetchAllPuzzles: async () => {
-      const updateStart = get().puzzlesSlice.lastUpdate;
-      api.getPuzzles(get().huntSlice.hunt.id!).then((response) => {
-        const { timestamp, puzzles } = response.payload;
-        if (timestamp != updateStart) {
-          return;
-        }
+      let huntId = get().huntSlice.hunt.id;
+      if (huntId === null) {
+        return;
+      }
 
-        set((state) => {
-          state.puzzlesSlice.lastUpdate = Date.now();
-          state.puzzlesSlice.bulkUpdatePuzzlesFromDict(puzzles);
-        });
+      return api.getPuzzles(huntId).then((response) => {
+        get().puzzlesSlice.bulkUpdatePuzzlesFromDict(response);
       });
     },
 
@@ -82,7 +78,7 @@ export const puzzlesSlice: StateCreator<
         state.puzzlesSlice.lastUpdate = Date.now();
         state.puzzlesSlice.puzzles[response.id] = {
           ...state.puzzlesSlice.puzzles[response.id],
-          ...response.payload,
+          ...response,
         };
       });
     },
@@ -92,7 +88,7 @@ export const puzzlesSlice: StateCreator<
         for (const p of response) {
           state.puzzlesSlice.puzzles[p.id] = {
             ...state.puzzlesSlice.puzzles[p.id],
-            ...p.payload,
+            ...p,
           };
         }
       });
@@ -109,7 +105,7 @@ export const puzzlesSlice: StateCreator<
         })
         .then((response) => {
           set((state) => {
-            let p = response.payload;
+            let p = response;
             state.puzzlesSlice.lastUpdate = Date.now();
             state.puzzlesSlice.puzzles[p.id] = p;
           });
@@ -130,40 +126,40 @@ export const puzzlesSlice: StateCreator<
       return api
         .updatePuzzle(get().huntSlice.hunt.id!, id, changes)
         .then((response) => {
-          get().puzzlesSlice.updatePuzzleFromDict(response.payload);
+          get().puzzlesSlice.updatePuzzleFromDict(response);
         });
     },
     addAnswer: async (id: PuzzleId, text: string) => {
       return api.addAnswer(id, { text }).then((response) => {
-        get().puzzlesSlice.updatePuzzleFromDict(response.payload);
+        get().puzzlesSlice.updatePuzzleFromDict(response);
       });
     },
     deleteAnswer: async (id: PuzzleId, answerId: AnswerId) => {
       return api.deleteAnswer(id, answerId).then((response) => {
-        get().puzzlesSlice.updatePuzzleFromDict(response.payload);
+        get().puzzlesSlice.updatePuzzleFromDict(response);
       });
     },
     editAnswer: async (id: PuzzleId, answerId: AnswerId, text: string) => {
       return api.editAnswer(id, answerId, { text }).then((response) => {
-        get().puzzlesSlice.updatePuzzleFromDict(response.payload);
+        get().puzzlesSlice.updatePuzzleFromDict(response);
       });
     },
     addPuzzleTag: async (
       puzzleId: PuzzleId,
       tag: { name: string; color: string }
     ) => {
       return api.addPuzzleTag(puzzleId, tag).then((response) => {
-        get().puzzlesSlice.updatePuzzleFromDict(response.payload);
+        get().puzzlesSlice.bulkUpdatePuzzlesFromDict(response);
       });
     },
     deletePuzzleTag: async (puzzleId: PuzzleId, tagId: TagId) => {
       return api.deletePuzzleTag(puzzleId, tagId).then((response) => {
-        get().puzzlesSlice.updatePuzzleFromDict(response.payload);
+        get().puzzlesSlice.bulkUpdatePuzzlesFromDict(response);
       });
     },
     editNotes: async (puzzleId: PuzzleId, data: { text: string }) => {
       return api.editNotes(puzzleId, data).then((response) => {
-        get().puzzlesSlice.bulkUpdatePuzzlesFromDict(response.payload);
+        get().puzzlesSlice.bulkUpdatePuzzlesFromDict(response);
       });
     },
 

hunts/src/store.tsx

@@ -1,4 +1,6 @@
 import { create } from "zustand";
+import { devtools } from "zustand/middleware";
+import { immer } from "zustand/middleware/immer";
 
 import { alertSlice, AlertSlice } from "./alertSlice";
 import { chatSlice, ChatSlice } from "./chatSlice";
@@ -19,12 +21,19 @@ export type RootState = AlertSlice &
   ModalSlice &
   PuzzlesSlice;
 
-export const useStore = create<RootState>((...a) => ({
-  ...alertSlice(...a),
-  ...chatSlice(...a),
-  ...collapsedPuzzlesSlice(...a),
-  ...filterSlice(...a),
-  ...huntSlice(...a),
-  ...modalSlice(...a),
-  ...puzzlesSlice(...a),
-}));
+export const useStore = create<
+  RootState,
+  [["zustand/devtools", never], ["zustand/immer", never]]
+>(
+  devtools(
+    immer((...a) => ({
+      ...alertSlice(...a),
+      ...chatSlice(...a),
+      ...collapsedPuzzlesSlice(...a),
+      ...filterSlice(...a),
+      ...huntSlice(...a),
+      ...modalSlice(...a),
+      ...puzzlesSlice(...a),
+    }))
+  )
+);

package.json

@@ -42,6 +42,7 @@
     "babel-loader": "^8.2.2",
     "css-loader": "^6.7.3",
     "eslint": "^7.32.0 || ^8.2.0",
+    "immer": "^10.1.1",
     "javascript-time-ago": "^2.3.10",
     "js-cookie": "^2.2.1",
     "match-sorter": "^6.0.1",

yarn.lock

@@ -2790,6 +2790,11 @@ ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
   integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
 
+immer@^10.1.1:
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-10.1.1.tgz#206f344ea372d8ea176891545ee53ccc062db7bc"
+  integrity sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==
+
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"