Redoing the store logic so it's a little clearer

client/src/domain/gameStore.js

@@ -9,21 +9,7 @@ import {
   getInfoFromLocalStorage,
 } from "./localStorageMethods";
 
-export const [
-  {
-    useGameId,
-    usePlayerName,
-    useLastRound,
-    usePlayerId,
-    useGameState,
-    useCurrentRound,
-    useTargetPoint,
-    useRoundSeconds,
-    usePanoStartPosition,
-    usePanoStartPov,
-  },
-  dispatch,
-] = createStore({
+const [ hooks, createAction ] = createStore({
   gameId: null,
   playerName: null,
   lastRound: {
@@ -42,83 +28,115 @@ export const [
   roundSeconds: 0,
   panoStartPosition: null,
   panoStartPov: null,
-}, {
-  setPlayerName: ([set], playerName) => set({ playerName }),
-  goToLobby: ([set], gameId) => set({ 
+}, process.env.REACT_APP_MONITOR_STORE === "true" ? consoleMonitor : null);
+
+export const {
+  useGameId,
+  usePlayerName,
+  useLastRound,
+  usePlayerId,
+  useGameState,
+  useCurrentRound,
+  useTargetPoint,
+  useRoundSeconds,
+  usePanoStartPosition,
+  usePanoStartPov,
+} = hooks;
+
+const setPlayerName = createAction(([set], playerName) => set({ playerName }));
+
+const goToLobby = createAction(([set], gameId) => set({ 
+  gameId,
+  playerId: null,
+  gameState: PRE_ROUND,
+}));
+
+const updateCurrentRound = createAction(async ([set, get]) => {
+  const { currentRound, coord, timer } = await getCurrentRound(
+    get.gameId(), 
+    get.playerId()
+  );
+  set({
+    currentRound,
+    targetPoint: coord,
+    panoStartPosition: coord,
+    panoStartPov: { heading: 0, pitch: 0 },
+    roundSeconds: timer,
+  });
+});
+
+const joinGameAction = createAction(async ([set, get]) => {
+  const gameId = get.gameId();
+  const name = get.playerName();
+  const { playerId } = await joinGame(gameId, name);
+  set({ playerId });
+  await updateCurrentRound();
+  saveGameInfoToLocalStorage(gameId, name, playerId);
+});
+
+const rejoinGame = createAction(async ([set, get]) => {
+  const { gameId, playerName, playerId, timer, position, pov } = getInfoFromLocalStorage();
+  set({ gameId, playerName, playerId });
+  await updateCurrentRound();
+  set({
+    roundSeconds: timer ?? get.roundSeconds(),
+    panoStartPosition: position ?? get.panoStartPosition(),
+    panoStartPov: pov ?? get.panoStartPov(),
+    gameState: IN_ROUND,
+  });
+});
+
+const startRound = createAction(([set]) => set({ gameState: IN_ROUND }));
+
+const submitGuess = createAction(async ([set, get], selectedPoint) => {
+  clearRoundInfoFromLocalStorage();
+  const gameId = get.gameId();
+  const playerId = get.playerId();
+  const roundNum = get.currentRound();
+  const targetPoint = get.targetPoint();
+  const roundSeconds = get.roundSeconds();
+  const { score, totalScore } = await sendGuess(
     gameId,
-    playerId: null,
-    gameState: PRE_ROUND,
-  }),
-  updateCurrentRound: async ([set, get]) => {
-    const { currentRound, coord, timer } = await getCurrentRound(
-      get.gameId(), 
-      get.playerId()
-    );
-    set({
-      currentRound,
-      targetPoint: coord,
-      panoStartPosition: coord,
-      panoStartPov: { heading: 0, pitch: 0 },
-      roundSeconds: timer,
-    });
-  },
-  joinGame: async ([set, get]) => {
-    const gameId = get.gameId();
-    const name = get.playerName();
-    const { playerId } = await joinGame(gameId, name);
-    set({ playerId });
-    await dispatch.updateCurrentRound();
-    saveGameInfoToLocalStorage(gameId, name, playerId);
-  },
-  rejoinGame: async ([set, get]) => {
-    const { gameId, playerName, playerId, timer, position, pov } = getInfoFromLocalStorage();
-    set({ gameId, playerName, playerId });
-    await dispatch.updateCurrentRound();
-    set({
-      roundSeconds: timer ?? get.roundSeconds(),
-      panoStartPosition: position ?? get.panoStartPosition(),
-      panoStartPov: pov ?? get.panoStartPov(),
-      gameState: IN_ROUND,
-    });
-  },
-  startRound: ([set]) => set({ gameState: IN_ROUND }),
-  submitGuess: async ([set, get], selectedPoint) => {
-    clearRoundInfoFromLocalStorage();
-    const gameId = get.gameId();
-    const playerId = get.playerId();
-    const roundNum = get.currentRound();
-    const targetPoint = get.targetPoint();
-    const roundSeconds = get.roundSeconds();
-    const { score, totalScore } = await sendGuess(
-      gameId,
-      playerId,
+    playerId,
+    roundNum,
+    selectedPoint || { timeout: true },
+    roundSeconds
+  );
+  set({
+    lastRound: {
       roundNum,
-      selectedPoint || { timeout: true },
-      roundSeconds
-    );
-    set({
-      lastRound: {
-        roundNum,
-        targetPoint,
-        score,
-        totalScore,
-      },
-      gameState: POST_ROUND,
-    });
-    await dispatch.updateCurrentRound();
-  },
-  goToSummary: ([set], gameId, clearSavedGame = true) => {
-    if (gameId) {
-      set({ gameId });
-    }
-    set({ gameState: POST_GAME });
-    if (clearSavedGame) {
-      clearRoundInfoFromLocalStorage();
-      clearGameInfoFromLocalStorage();
-    }
-  },
-  setRoundSeconds: ([set], roundSeconds) => {
-    set({ roundSeconds });
-    saveTimerToLocalStorage(roundSeconds);
-  },
-}, process.env.REACT_APP_MONITOR_STORE === "true" ? consoleMonitor : null);
+      targetPoint,
+      score,
+      totalScore,
+    },
+    gameState: POST_ROUND,
+  });
+  await updateCurrentRound();
+});
+
+const goToSummary = createAction(([set], gameId, clearSavedGame = true) => {
+  if (gameId) {
+    set({ gameId });
+  }
+  set({ gameState: POST_GAME });
+  if (clearSavedGame) {
+    clearRoundInfoFromLocalStorage();
+    clearGameInfoFromLocalStorage();
+  }
+});
+
+const setRoundSeconds = createAction(([set], roundSeconds) => {
+  set({ roundSeconds });
+  saveTimerToLocalStorage(roundSeconds);
+});
+
+export const dispatch = {
+  setPlayerName,
+  goToLobby,
+  joinGame: joinGameAction,
+  rejoinGame,
+  startRound,
+  submitGuess,
+  goToSummary,
+  setRoundSeconds,
+};

client/src/store.js

@@ -10,7 +10,7 @@ export const consoleMonitor = (key, original) => {
   }
 }
 
-export const createStore = (initial, actions = {}, monitor = null) => {
+export const createStore = (initial, monitor = null) => {
   const get = {};
   const update = {};
   const hooks = {};
@@ -51,8 +51,5 @@ export const createStore = (initial, actions = {}, monitor = null) => {
 
   mergeState(initial);
 
-  const dispatch = Object.fromEntries(Object.entries(actions)
-    .map(([key, act]) => [key, (...args) => act([mergeState, get], ...args)]));
-
-  return [hooks, dispatch];
+  return [hooks, action => (...args) => action([mergeState, get], ...args)];
 }