Deleting some unneeded logic and inlining the simpler stuff in the game component

ui/src/components/game.component/game-state.enum.js

@@ -1,4 +1,3 @@
-export const LOADING    = "LOADING";   // Application is loading
 export const PRE_GAME   = "PREGAME";   // Game is not yet started
 export const PRE_ROUND  = "PREROUND";  // Game is started or joined, but not playing yet
 export const IN_ROUND   = "INROUND";   // Actively playing

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

@@ -1,6 +1,5 @@
 import React from "react";
 import {
-  LOADING,
   PRE_GAME,
   PRE_ROUND,
   IN_ROUND,
@@ -13,49 +12,18 @@ 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 Loading from "../loading.component";
 
 class Game extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      googleApiKey: null,
       gameState: PRE_GAME,
-      playerName: null,
       gameId: null,
+      playerName: null,
       lastRound: null,
     }
   }
   
-  renderLoading() {
-    return <Loading/>
-  }
-  
-  renderPreGame() {
-    return <PreGameContainer 
-      onGameJoined={({ gameId, playerName }) => this.setState({ gameState: PRE_ROUND, gameId, playerName })}
-    />
-  }
-  
-  renderPreRound() {
-    const { gameId, playerName } = this.state;
-    return <PreRound
-    gameId={gameId}
-    playerName={playerName}
-    onStart={() => this.setState({ gameState: IN_ROUND })}
-    />
-  }
-  
-  renderInRound() {
-    const { gameId, playerName } = this.state;
-    return <GamePanelContainer
-      gameId={gameId}
-      playerName={playerName}
-      onRoundEnd={lastRound => this.setState({ gameState: POST_ROUND, lastRound })}
-      onGameEnd={() => this.setState({ gameState: POST_GAME })}
-    />
-  }
-  
   renderPostRound() {
     const { lastRound } = this.state;
     const {
@@ -75,40 +43,41 @@ class Game extends React.Component {
       selectedPoint={selectedPoint}
     />
   }
-  
-  renderPostGame() {
-    const { gameId } = this.state;
-    return <PlayerScoresContainer
-      gameId={gameId}
-      onReturnToStart={() => this.setState({ gameState: PRE_GAME })}
-    />
-  }
-  
-  renderError() {
-    return <p>Application encountered unrecoverable error, please refresh the page.</p>
-  }
-  
+
   render() {
-    const { gameState } = this.state;
+    const { gameState, gameId, playerName } = this.state;
     
     switch (gameState) {
-      case LOADING:
-      return this.renderLoading();
       case PRE_GAME:
-      return this.renderPreGame();
+        return <PreGameContainer 
+          onGameJoined={({ gameId, playerName }) => this.setState({ gameState: PRE_ROUND, gameId, playerName })}
+        />
       case PRE_ROUND:
-      return this.renderPreRound();
+        return <PreRound
+          gameId={gameId}
+          playerName={playerName}
+          onStart={() => this.setState({ gameState: IN_ROUND })}
+        />
       case IN_ROUND:
-      return this.renderInRound();
+        return <GamePanelContainer
+          gameId={gameId}
+          playerName={playerName}
+          onRoundEnd={lastRound => this.setState({ gameState: POST_ROUND, lastRound })}
+          onGameEnd={() => this.setState({ gameState: POST_GAME })}
+        />
       case POST_ROUND:
-      return this.renderPostRound();
+        return this.renderPostRound();
       case POST_GAME:
-      return this.renderPostGame();
+        return <PlayerScoresContainer
+          gameId={gameId}
+          onReturnToStart={() => this.setState({ gameState: PRE_GAME })}
+        />
       case ERROR:
-      return this.renderError();
+        // TODO - would be nice to hook this into the sub-components, maybe with a HOC?
+        return <p>Application encountered unrecoverable error, please refresh the page.</p>
       default:
-      this.setState({ gameState: ERROR });
-      return <p>Application state is inconsistent, please refresh and rejoin your previous game.</p>
+        this.setState({ gameState: ERROR });
+        return <p>Application state is inconsistent, please refresh and rejoin your previous game.</p>
     }
   }
 }

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

@@ -55,6 +55,7 @@ class PreGameContainer extends React.Component {
   }
   
   async handleJoinGame() {
+    // TODO would like to support re-joining a game you left
     this.setState({ loading: true });
     const { gameId, playerName } = this.state;
     await joinGame(gameId, playerName);