Wrapping the game creation and start logic into a single action

client/src/components/screens/PreGame/PreGame.jsx

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import styled from "styled-components";
 import Loading from "../../util/Loading";
 import PlayerNameInput from "./../../util/PlayerNameInput";
-import { createGame } from "../../../domain/GGSHService";
 import NewGameInput from "./NewGameInput";
 import HeaderAndFooter from "../../util/HeaderAndFooter";
 import { usePlayerName, dispatch } from "../../../domain/gameStore";
@@ -42,10 +41,7 @@ export default () => {
 
   const onCreateGame = async () => {
     setLoading(true);
-    const gameId = await createGame(timer);
-    dispatch.setGameId(gameId);
-    dispatch.joinGame();
-    dispatch.startGame();
+    await dispatch.createGameAndStart(timer);
   };
   const cannotCreateGame = !playerName || playerName.length === 0;
 

client/src/domain/GGSHService.js

@@ -14,8 +14,7 @@ export const getStatus = async () => {
     }
 }
 
-export const createGame = async (timer) => {
-    const name = dispatch.getPlayerName();
+export const createGame = async (name, timer) => {
     const res = await fetch(`${API_BASE}/game`, {
         method: "PUT",
         headers: {

client/src/domain/gameStore.js

@@ -1,5 +1,6 @@
 import { PRE_GAME, PRE_ROUND, IN_ROUND, POST_ROUND, POST_GAME } from "./GameState";
 import { createStore } from "../store";
+import { createGame } from "./GGSHService";
 
 export const [
   {
@@ -27,4 +28,9 @@ export const [
   startRound: ([set]) => set({ gameState: IN_ROUND }),
   endRound: ([set], lastRound) => set({ lastRound, gameState: POST_ROUND }),
   endGame: ([set]) => set({ gameState: POST_GAME }),
+  createGameAndStart: async ([set, get], timer) => {
+    const name = get.playerName();
+    const gameId = await createGame(name, timer);
+    set({ gameId, gameJoined: true, gameState: PRE_ROUND });
+  },
 });