Cleaning up props on RoundSummary and inlining logic in game

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

@@ -23,29 +23,9 @@ class Game extends React.Component {
       lastRound: null,
     }
   }
-  
-  renderPostRound() {
-    const { lastRound } = this.state;
-    const {
-      roundNum,
-      selectedPoint,
-      targetPoint,
-      score,
-      totalScore,
-    } = lastRound;
-    return <RoundSummary
-      roundNum={roundNum}
-      score={score}
-      totalScore={totalScore}
-      onAdvanceState={() => this.setState({ gameState: IN_ROUND })}
-      buttonText={roundNum === "5" ? "View Summary" : "Next Round"}
-      targetPoint={targetPoint}
-      selectedPoint={selectedPoint}
-    />
-  }
 
   render() {
-    const { gameState, gameId, playerName } = this.state;
+    const { gameState, gameId, playerName, lastRound } = this.state;
     
     switch (gameState) {
       case PRE_GAME:
@@ -66,7 +46,10 @@ class Game extends React.Component {
           onGameEnd={() => this.setState({ gameState: POST_GAME })}
         />
       case POST_ROUND:
-        return this.renderPostRound();
+        return <RoundSummary
+          round={lastRound}
+          onNext={() => this.setState({ gameState: IN_ROUND })}
+        />
       case POST_GAME:
         return <PlayerScoresContainer
           gameId={gameId}

ui/src/components/round-summary.component.jsx

@@ -4,24 +4,22 @@ import withGoogleApiKey from "./with-google-key.component";
 // TODO eventually we want this to query and show other players
 // TODO also should show the actual location of the last round
 
-const RoundSummary = ({
-  googleApiKey,
-  roundNum, 
-  score, 
-  totalScore,
-  onAdvanceState,
-  buttonText,
-  selectedPoint,
-  targetPoint,
-}) => {
-  // TODO determine zoom and center dynamically
+const RoundSummary = ({ googleApiKey, round, onNext }) => {
+  const {
+    roundNum,
+    selectedPoint,
+    targetPoint,
+    score,
+    totalScore,
+  } = round;
+  // TODO determine zoom and center dynamically, or make this a dynamic map
   const mapUrl = `https://maps.googleapis.com/maps/api/staticmap?key=${googleApiKey}`;
   const size = `&size=600x400`
   const zoom = `&zoom=5`;
   const centerOnTarget = `&center=${targetPoint.lat},${targetPoint.lng}`;
   const targetMarker = `&markers=color:blue|label:T|${targetPoint.lat},${targetPoint.lng}`;
   const selectedMarker = selectedPoint ? `&markers=color:red|label:S|${selectedPoint.lat},${selectedPoint.lng}` : ""
-  
+
   return (
     <div>
       <img 
@@ -33,8 +31,8 @@ const RoundSummary = ({
       <p>Score For Round {roundNum}: {score}</p>
       <p>Running Total Score: {totalScore}</p>
       <button
-        onClick={onAdvanceState}>
-        {buttonText}
+        onClick={onNext}>
+        {roundNum === "5" ? "View Summary" : "Next Round"}
       </button>
     </div>
   );