Moving the logic for guess submission into a container around the game panel

ui/src/App.js

@@ -17,7 +17,7 @@ const App = () => {
         <p>TerrAssumptions!</p>
         <hr/>
       </div>
-      <Game style={{flex: 1}}/>
+        <Game style={{flex: 1}}/>
       <div>
         <hr/>
         <ApiInfo/>

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

@@ -1,7 +1,9 @@
 import React from 'react';
 import { compose, withProps } from "recompose";
 import { withScriptjs, withGoogleMap, StreetViewPanorama, GoogleMap, Marker } from "react-google-maps";
+import { gameInfo, getGuesses, sendGuess } from "../services/ggsh.service";
 import RoundTimer from "./round-timer.component";
+import Loading from './loading.component';
 
 // TODO want a button for moving the pano back to start somehow
 
@@ -61,6 +63,7 @@ const GamePanel = ({
   selectedPoint,
   roundSeconds,
   onTimeout,
+  submitDisabled,
 }) => (
   <div style={{
     height: "100%",
@@ -94,7 +97,7 @@ const GamePanel = ({
       <button
         style={{ margin: "5px", flex: 1 }}
         onClick={onSubmitGuess}
-        disabled={selectedPoint === null}
+        disabled={submitDisabled || selectedPoint === null}
       >
         Submit Guess
       </button>
@@ -102,4 +105,75 @@ const GamePanel = ({
   </div>
 );
 
-export default GamePanel;
+class GamePanelContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentRound: null,
+      targetPoint: null,
+      selectedPoint: null,
+      roundTimer: null,
+      submitDisabled: false,
+    }
+  }
+
+  async componentDidMount() {
+    const { gameId, playerName } = this.props;
+    const { currentRound } = await getGuesses(gameId, playerName);
+    if (currentRound) {
+      const { coords, timer } = await gameInfo(gameId);
+      const targetPoint = coords[currentRound];
+      this.setState({
+        currentRound,
+        targetPoint,
+        roundTimer: timer,
+      });
+    } else {
+      const { onGameEnd } = this.props;
+      onGameEnd();
+    }
+  }
+
+  async handleSubmitGuess() {
+    this.setState({ submitDisabled: true })
+    const { currentRound, selectedPoint, targetPoint } = this.state;
+    const { gameId, playerName, onRoundEnd } = this.props;
+    const { score, totalScore } = await sendGuess(gameId, playerName, currentRound, selectedPoint || { timeout: true });
+    onRoundEnd({
+      roundNum: currentRound,
+      selectedPoint,
+      targetPoint,
+      score,
+      totalScore,
+    });
+  }
+
+  render() {
+    const { 
+      currentRound, 
+      targetPoint, 
+      selectedPoint, 
+      roundTimer, 
+      submitDisabled 
+    } = this.state;
+    if (!currentRound || !targetPoint || !roundTimer) {
+      return <Loading/>
+    }
+  
+    const { googleApiKey } = this.props;
+    return (
+      <GamePanel
+        googleApiKey={googleApiKey}
+        onSelectPoint={selectedPoint => this.setState({ selectedPoint })}
+        onSubmitGuess={() => this.handleSubmitGuess()}
+        streetViewPoint={targetPoint}
+        selectedPoint={selectedPoint}        
+        roundSeconds={roundTimer}
+        onTimeout={() => this.handleSubmitGuess()}
+        submitDisabled={submitDisabled}
+      />
+    );
+  }
+}
+
+export default GamePanelContainer;

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

@@ -10,17 +10,10 @@ import {
 } from "./game-state.enum";
 import PreGame from '../pre-game.component';
 import PreRound from '../pre-round.component';
-import GamePanel from "../game-panel.component";
+import GamePanelContainer from "../game-panel.component";
 import RoundSummary from '../round-summary.component';
 import PlayerScoresContainer from "../player-scores.component";
-import { 
-  getGoogleApiKey, 
-  createGame, 
-  gameInfo, 
-  joinGame, 
-  getGuesses, 
-  sendGuess 
-} from "../../services/ggsh.service";
+import { getGoogleApiKey, 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
@@ -33,6 +26,7 @@ class Game extends React.Component {
       gameState: LOADING,
       playerName: null,
       gameId: null,
+      lastRound: null,
       currentRound: null,
       targetPoint: null,
       selectedPoint: null,
@@ -63,41 +57,6 @@ class Game extends React.Component {
     this.setState({ gameState: PRE_ROUND });
   }
   
-  async updateRoundState() {
-    this.setState({ gameState: LOADING })
-    const { gameId, playerName } = this.state;
-    const { currentRound } = await getGuesses(gameId, playerName);
-    if (currentRound) {
-      const { coords, timer } = await gameInfo(gameId);
-      const targetPoint = coords[currentRound];
-      this.setState({
-        gameState: IN_ROUND,
-        currentRound,
-        targetPoint,
-        selectedPoint: null,
-        roundTimer: timer,
-      });
-    } else {
-      this.setState({ gameState: POST_GAME });
-    }
-  }
-  
-  async handleSubmitGuess() {
-    this.setState({ gameState: LOADING });
-    const {
-      gameId,
-      playerName,
-      currentRound,
-      selectedPoint
-    } = this.state;
-    const { score, totalScore } = await sendGuess(gameId, playerName, currentRound, selectedPoint || { timeout: true });
-    this.setState({
-      gameState: POST_ROUND,
-      lastScore: score,
-      totalScore
-    });
-  }
-  
   renderLoading() {
     return <Loading/>
   }
@@ -119,41 +78,39 @@ class Game extends React.Component {
     return <PreRound
     gameId={gameId}
     playerName={playerName}
-    onStart={() => this.updateRoundState()}
+    onStart={() => this.setState({ gameState: IN_ROUND })}
     />
   }
   
   renderInRound() {
-    const { googleApiKey, targetPoint, selectedPoint, roundTimer } = this.state;
-    return <GamePanel
-    googleApiKey={googleApiKey}
-    onSelectPoint={latLng => this.setState({selectedPoint: latLng})}
-    onSubmitGuess={() => this.handleSubmitGuess()}
-    streetViewPoint={targetPoint}
-    selectedPoint={selectedPoint}
-    roundSeconds={roundTimer}
-    onTimeout={() => this.handleSubmitGuess()}
+    const { gameId, playerName, googleApiKey } = this.state;
+    return <GamePanelContainer
+      gameId={gameId}
+      playerName={playerName}
+      googleApiKey={googleApiKey}
+      onRoundEnd={lastRound => this.setState({ gameState: POST_ROUND, lastRound })}
+      onGameEnd={() => this.setState({ gameState: POST_GAME })}
     />
   }
   
   renderPostRound() {
+    const { googleApiKey, lastRound } = this.state;
     const {
-      googleApiKey,
-      currentRound,
-      lastScore,
-      totalScore,
-      targetPoint,
+      roundNum,
       selectedPoint,
-    } = this.state;
+      targetPoint,
+      score,
+      totalScore,
+    } = lastRound;
     return <RoundSummary
-    googleApiKey={googleApiKey}
-    roundNum={currentRound}
-    score={lastScore}
-    totalScore={totalScore}
-    onAdvanceState={() => this.updateRoundState()}
-    buttonText={currentRound === "5" ? "View Summary" : "Next Round"}
-    targetPoint={targetPoint}
-    selectedPoint={selectedPoint}
+      googleApiKey={googleApiKey}
+      roundNum={roundNum}
+      score={score}
+      totalScore={totalScore}
+      onAdvanceState={() => this.setState({ gameState: IN_ROUND })}
+      buttonText={roundNum === "5" ? "View Summary" : "Next Round"}
+      targetPoint={targetPoint}
+      selectedPoint={selectedPoint}
     />
   }