Making joinGame a single action as well, also cleaning up the gameInfo API call

client/src/components/screens/PreRound/PreRound.jsx

@@ -5,7 +5,6 @@ import Button from "../../util/Button";
 import Loading from "../../util/Loading";
 import PlayerNameInput from "../../util/PlayerNameInput";
 import LobbyPlayerList from "./LobbyPlayerList";
-import { joinGame } from "../../../domain/GGSHService";
 import DelayedButton from "../../util/DelayedButton";
 import HeaderAndFooter from "../../util/HeaderAndFooter";
 import { dispatch, useGameId, usePlayerName, useGameJoined } from "../../../domain/gameStore";
@@ -83,7 +82,7 @@ const JoinForm = () => {
     // TODO would like to support re-joining a game you left
     setLoading(true);
     try {
-      await joinGame();
+      await dispatch.joinGame();
     } catch (err) {
       // failed to join the game
       setFailed(true);
@@ -91,8 +90,6 @@ const JoinForm = () => {
       return;
     }
     setFailed(false);
-    dispatch.setPlayerName(playerName);
-    dispatch.joinGame();
   };
   const cannotJoinGame = !playerName || playerName.length === 0;
 

client/src/domain/GGSHService.js

@@ -30,8 +30,7 @@ export const createGame = async (name, timer) => {
     return gameId;
 }
 
-export const gameInfo = async () => {
-    const gameId = dispatch.getGameId();
+export const gameInfo = async (gameId) => {
     const res = await fetch(`${API_BASE}/game/${gameId}`);
     if (!res.ok) {
         throw Error(res.statusText);
@@ -39,9 +38,7 @@ export const gameInfo = async () => {
     return await res.json();
 }
 
-export const joinGame = async () => {
-    const gameId = dispatch.getGameId();
-    const name = dispatch.getPlayerName();
+export const joinGame = async (gameId, name) => {
     const res = await fetch(`${API_BASE}/game/${gameId}/join`, {
         method: "POST",
         headers: {

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 { createGame } from "./GGSHService";
+import { createGame, joinGame } from "./GGSHService";
 
 export const [
   {
@@ -22,7 +22,6 @@ export const [
   getGameId: ([_, get]) => get.gameId(),
   setPlayerName: ([set], playerName) => set({ playerName }),
   getPlayerName: ([_, get]) => get.playerName(),
-  joinGame: ([set]) => set({ gameJoined: true }),
   resetGame: ([set]) => set({ gameJoined: false, gameState: PRE_GAME }),
   startGame: ([set]) => set({ gameState: PRE_ROUND }),
   startRound: ([set]) => set({ gameState: IN_ROUND }),
@@ -33,4 +32,10 @@ export const [
     const gameId = await createGame(name, timer);
     set({ gameId, gameJoined: true, gameState: PRE_ROUND });
   },
+  joinGame: async ([set, get]) => {
+    const gameId = get.gameId();
+    const name = get.playerName();
+    await joinGame(gameId, name);
+    set({ gameJoined: true });
+  },
 });

client/src/hooks/usePlayerScores.jsx

@@ -9,7 +9,7 @@ export default () => {
   useEffect(() => {
     // define how to fetch scores
     const fetchInfo = async () => {
-      const { players } = await gameInfo();
+      const { players } = await gameInfo(gameId);
       // TODO would be nice to only setScores on a change - maybe have back-end provide timestamp?
       setScores(players);
     };