Moving targetPoint and currentRound into store, managing their updates via dispatch

client/src/components/screens/GamePanel/GamePanel.jsx

@@ -3,8 +3,7 @@ import styled from 'styled-components';
 import Loading from '../../util/Loading';
 import GuessPane from "./GuessPane";
 import PositionedStreetView from "./PositionedStreetView";
-import useRoundInfo from "../../../hooks/useRoundInfo";
-import { dispatch } from '../../../domain/gameStore';
+import { dispatch, useCurrentRound, useTargetPoint } from '../../../domain/gameStore';
 import usePreventNavigation from '../../../hooks/usePreventNavigation';
 
 const Container = styled.div`
@@ -36,21 +35,17 @@ export default () => {
 
   const [submitDisabled, setSubmitDisabled] = useState(false);
   const [selectedPoint, setSelectedPoint] = useState(null);
-  const [finished, roundInfo] = useRoundInfo();
+  const currentRound = useCurrentRound();
+  const targetPoint = useTargetPoint();
 
-  if (finished) {
+  if (currentRound === null) {
     dispatch.goToSummary();
     return <Loading/>
   }
 
-  const { currentRound, targetPoint } = roundInfo;
-  if (!currentRound || !targetPoint) {
-    return <Loading/>
-  }
-
   const handleSubmitGuess = async () => {
     setSubmitDisabled(true);
-    await dispatch.submitGuess(selectedPoint, currentRound, targetPoint);
+    await dispatch.submitGuess(selectedPoint);
   }
 
   return (

client/src/components/screens/RoundSummary/NextRoundButton.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { dispatch } from "../../../domain/gameStore";
-import useRoundInfo from "../../../hooks/useRoundInfo";
+import { dispatch, useCurrentRound } from "../../../domain/gameStore";
 import DelayedButton from "../../util/DelayedButton";
 import Button from "../../util/Button";
 
@@ -17,14 +16,16 @@ const NextButton = styled(DelayedButton)`
 `
 
 export default () => {
-  // whether or not the game is done
-  const [gameFinished] = useRoundInfo();
+  // check the current round to see if game is done
+  const currentRound = useCurrentRound();
 
-  return gameFinished 
-    ? <FinishedButton onClick={dispatch.startRound}>
-        View Summary
-      </FinishedButton>
-    : <NextButton onEnd={dispatch.startRound} countDownFormatter={rem => `Click to cancel, ${rem}s...`}>
-        Next Round
-      </NextButton>
+  return (
+    currentRound
+      ? <NextButton onEnd={dispatch.startRound} countDownFormatter={rem => `Click to cancel, ${rem}s...`}>
+          Next Round
+        </NextButton>
+      : <FinishedButton onClick={dispatch.startRound}>
+          View Summary
+        </FinishedButton>
+  );
 }

client/src/domain/gameStore.js

@@ -1,6 +1,6 @@
 import { PRE_GAME, PRE_ROUND, IN_ROUND, POST_ROUND, POST_GAME } from "./GameState";
 import { createStore } from "../store";
-import { joinGame, sendGuess } from "./apiMethods";
+import { joinGame, sendGuess, getCurrentRound } from "./apiMethods";
 import {
   saveGameInfoToLocalStorage,
   clearGameInfoFromLocalStorage,
@@ -15,6 +15,8 @@ export const [
     useLastRound,
     usePlayerId,
     useGameState,
+    useCurrentRound,
+    useTargetPoint,
     useRoundSeconds,
   },
   dispatch,
@@ -32,6 +34,8 @@ export const [
   },
   playerId: null,
   gameState: PRE_GAME,
+  currentRound: null,
+  targetPoint: null,
   roundSeconds: 0,
 }, {
   setPlayerName: ([set], playerName) => set({ playerName }),
@@ -44,25 +48,42 @@ export const [
     const gameId = get.gameId();
     const name = get.playerName();
     const { playerId } = await joinGame(gameId, name);
-    set({ playerId });
+    const { currentRound, coord, timer } = await getCurrentRound(gameId, playerId);
+    set({
+      playerId,
+      currentRound,
+      targetPoint: coord,
+      roundSeconds: timer,
+    });
     clearTimerFromLocalStorage();
     clearPointFromLocalStorage();
     saveGameInfoToLocalStorage(gameId, name, playerId);
   },
-  rejoinGame: ([set], gameId, playerName, playerId) => set({ 
-    gameId, 
-    playerName, 
-    playerId, 
-    gameState: IN_ROUND,
-  }),
+  rejoinGame: async ([set], gameId, playerName, playerId) => {
+    const { currentRound, coord, timer } = await getCurrentRound(gameId, playerId);
+    set({ 
+      gameId, 
+      playerName, 
+      playerId,
+      currentRound,
+      targetPoint: coord,
+      roundSeconds: timer,
+      gameState: IN_ROUND,
+    });
+  },
   startRound: ([set]) => set({ gameState: IN_ROUND }),
-  submitGuess: async ([set, get], selectedPoint, roundNum, targetPoint) => {
+  submitGuess: async ([set, get], selectedPoint) => {
+    const gameId = get.gameId();
+    const playerId = get.playerId();
+    const roundNum = get.currentRound();
+    const targetPoint = get.targetPoint();
     const { score, totalScore } = await sendGuess(
-      get.gameId(),
-      get.playerId(),
+      gameId,
+      playerId,
       roundNum,
       selectedPoint || { timeout: true }
     );
+    const { currentRound, coord, timer } = await getCurrentRound(gameId, playerId);
     set({
       lastRound: {
         roundNum,
@@ -70,6 +91,9 @@ export const [
         score,
         totalScore,
       },
+      currentRound,
+      targetPoint: coord,
+      roundSeconds: timer,
       gameState: POST_ROUND,
     });
     clearTimerFromLocalStorage();

client/src/hooks/useRoundInfo.jsx

@@ -1,25 +0,0 @@
-import { useState, useEffect } from 'react';
-import { getCurrentRound } from "../domain/apiMethods";
-import { useGameId, usePlayerId, dispatch } from '../domain/gameStore';
-
-export default () => {
-  const gameId = useGameId();
-  const playerId = usePlayerId();
-  const [finished, setFinished] = useState(false);
-  const [roundInfo, setRoundInfo] = useState({currentRound: null, targetPoint: null});
-
-  useEffect(() => {
-    const setup = async () => {
-      const { currentRound, coord, timer } = await getCurrentRound(gameId, playerId);
-      if (currentRound) {
-        dispatch.setRoundSeconds(timer);
-        setRoundInfo({ currentRound, targetPoint: coord });
-      } else {
-        setFinished(true);
-      }
-    }
-    setup();
-  }, [gameId, playerId]);
-
-  return [finished, roundInfo];
-}