Moving pre-game logic into container component

ui/src/components/game.component/game.jsx

@@ -8,16 +8,13 @@ import {
   POST_GAME,
   ERROR,
 } from "./game-state.enum";
-import PreGame from '../pre-game.component';
+import PreGameContainer from '../pre-game.component';
 import PreRound from '../pre-round.component';
 import GamePanelContainer from "../game-panel.component";
 import RoundSummary from '../round-summary.component';
 import PlayerScoresContainer from "../player-scores.component";
-import { createGame, joinGame } from "../../services/ggsh.service";
 import Loading from "../loading.component";
 
-// TODO I want to break this down into some smaller container components that can handle making the API calls
-
 class Game extends React.Component {
   constructor(props) {
     super(props);
@@ -27,44 +24,16 @@ class Game extends React.Component {
       playerName: null,
       gameId: null,
       lastRound: null,
-      currentRound: null,
-      targetPoint: null,
-      selectedPoint: null,
-      lastScore: null,
-      totalScore: null,
-      roundTimer: null,
     }
   }
   
-  // TODO error handling throughout - at the moment it assumes all calls always succeed
-  
-  async handleCreateGame() {
-    this.setState({ gameState: LOADING });
-    const { playerName } = this.state;
-    const gameId = await createGame(playerName, 300);
-    this.setState({ gameState: PRE_ROUND, gameId });
-  }
-  
-  async handleJoinGame() {
-    this.setState({ gameState: LOADING });
-    const { gameId, playerName } = this.state;
-    await joinGame(gameId, playerName);
-    this.setState({ gameState: PRE_ROUND });
-  }
-  
   renderLoading() {
     return <Loading/>
   }
   
   renderPreGame() {
-    const { gameId, playerName } = this.state;
-    return <PreGame
-    onCreateGame={() => this.handleCreateGame()}
-    onJoinGame={() => this.handleJoinGame()}
-    onChangeGameId={({ target }) => this.setState({gameId: target.value.trim()})}
-    onChangePlayerName={({ target }) => this.setState({playerName: target.value.trim()})}
-    gameId={gameId || ""}
-    playerName={playerName || ""}
+    return <PreGameContainer 
+      onGameJoined={({ gameId, playerName }) => this.setState({ gameState: PRE_ROUND, gameId, playerName })}
     />
   }
   

ui/src/components/pre-game.component.jsx

@@ -1,4 +1,6 @@
 import React from "react";
+import Loading from "./loading.component";
+import { createGame, joinGame } from "../services/ggsh.service";
 
 // TODO set round timer for new game
 
@@ -34,4 +36,47 @@ const PreGame = ({
   </div>
 );
 
-export default PreGame;
+class PreGameContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false,
+      gameId: null,
+      playerName: null,
+    }
+  }
+
+  async handleCreateGame() {
+    this.setState({ loading: true });
+    const { playerName } = this.state;
+    const gameId = await createGame(playerName, 300);
+    const { onGameJoined } = this.props;
+    onGameJoined({ gameId, playerName });
+  }
+  
+  async handleJoinGame() {
+    this.setState({ loading: true });
+    const { gameId, playerName } = this.state;
+    await joinGame(gameId, playerName);
+    const { onGameJoined } = this.props;
+    onGameJoined({ gameId, playerName });
+  }
+
+  render() {
+    const { loading, gameId, playerName } = this.state;
+    if (loading) {
+      return <Loading/>
+    }
+
+    return <PreGame
+      onCreateGame={() => this.handleCreateGame()}
+      onJoinGame={() => this.handleJoinGame()}
+      onChangeGameId={({ target }) => this.setState({gameId: target.value.trim()})}
+      onChangePlayerName={({ target }) => this.setState({playerName: target.value.trim()})}
+      gameId={gameId || ""}
+      playerName={playerName || ""}
+    />
+  }
+}
+
+export default PreGameContainer;