Moving more logic into some sub-components, removing a bunch of no longer used code

ui/src/App.js

@@ -6,102 +6,6 @@ import PlayerScores from "./components/player-scores.component";
 import './App.css';
 import RoundSummary from './components/round-summary.component';
 
-const GameInfo = ({game}) => {
-  const {
-    gameId,
-    creator,
-    timer,
-    coords,
-    players
-  } = game;
-
-  return (
-    <div className="GameInfo">
-      <p>Game ID: {gameId}</p>
-      <p>Creator: {creator}</p>
-      <p>Time Limit: {timer}</p>
-      <p>Coordinates: {JSON.stringify(coords)}</p>
-      <p>Players: {JSON.stringify(players)}</p>
-    </div>
-  );
-}
-
-class GuessComp extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      loading: true,
-      guesses: null,
-    }
-  }
-
-  async componentDidMount() {
-    const { gameId, name } = this.props;
-    const guesses = await getGuesses(gameId, name);
-    this.setState({loading: false, guesses});
-  }
-
-  render() {
-    const { loading, guesses } = this.state;
-
-    if (loading) {
-      return <p>Loading...</p>
-    }
-
-    const { name } = this.props;
-    return <p>Guesses for {name}: {JSON.stringify(guesses)}</p>
-  }
-}
-
-class GameMakerComp extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      loading: false,
-      game: null,
-    }
-  }
-
-  async handleGameJoin() {
-    this.setState({loading: true});
-    const { gameId } = this.state.game
-    await joinGame(gameId, "testing2");
-    const game = await gameInfo(gameId);
-    this.setState({loading: false, game});
-  }
-
-  async handleSendGuess() {
-    this.setState({loading: true});
-    const { gameId, coords } = this.state.game
-    const { currentRound } = await getGuesses(gameId, "testing");
-    const { lat, lng } = coords[currentRound];
-    await sendGuess(gameId, "testing", currentRound, lat, lng);
-    const game = await gameInfo(gameId);
-    this.setState({loading: false, game});
-  }
-
-  render() {
-    const { loading, game } = this.state;
-
-    if (loading) {
-      return <div><p>Loading...</p></div>
-    }
-
-    if (game) {
-      return (
-        <div>
-          <GameInfo game={game}/>
-          <p>Your Guesses:</p>
-          <GuessComp gameId={game.gameId} name="testing"/>
-          <button onClick={() => this.handleGameJoin()}>Add second user!</button>
-          <button onClick={() => this.handleSendGuess()}>Send perfect guess!</button>
-        </div>
-      );
-    }
-    // return <div><button onClick={() => this.handleGameCreate()}>Create Game!</button></div>
-    return <div><GamePanel /></div>
-  }
-}
 
 class Game extends React.Component {
   constructor(props) {
@@ -164,19 +68,19 @@ class Game extends React.Component {
   }
 
   async handleSubmitGuess() {
-    const { 
-      gameId, 
-      playerName, 
-      currentRound, 
-      selectedPoint 
+    const {
+      gameId,
+      playerName,
+      currentRound,
+      selectedPoint
     } = this.state;
     this.setState({ loading: true });
     const { score, totalScore } = await sendGuess(gameId, playerName, currentRound, selectedPoint);
-    this.setState({ 
-      loading: false, 
-      betweenRounds: true, 
-      lastScore: score, 
-      totalScore 
+    this.setState({
+      loading: false,
+      betweenRounds: true,
+      lastScore: score,
+      totalScore
     });
   }
 
@@ -192,36 +96,27 @@ class Game extends React.Component {
       playerScores,
     } = this.state;
 
+    // TODO eventually make state transitions more clear
+
     if (loading) {
       return <p>Loading...</p>
     }
 
     if (betweenRounds) {
-      return (
-        <div>
-          <RoundSummary
-            roundNum={currentRound}
-            score={lastScore}
-            totalScore={totalScore}
-          />
-          <button 
-            onClick={() => this.updateRoundState()}>
-            {currentRound === "5" ? "View Summary" : "Next Round"}
-          </button>
-        </div>
-      )
+      return <RoundSummary
+        roundNum={currentRound}
+        score={lastScore}
+        totalScore={totalScore}
+        onAdvanceState={() => this.updateRoundState()}
+        buttonText={currentRound === "5" ? "View Summary" : "Next Round"}
+      />
     }
 
     if (playerScores) {
-      return (
-        <div>
-          <PlayerScores scores={playerScores} />
-          <button 
-            onClick={() => this.setState({ playerScores: null })}>
-            Return to Start
-          </button>
-        </div>
-      );
+      return <PlayerScores
+        scores={playerScores}
+        onReturnToStart={() => this.setState({ playerScores: null })}
+      />
     }
 
     if (!targetPoint) {

ui/src/components/player-scores.component.jsx

@@ -1,10 +1,16 @@
 import React from 'react';
 
-const PlayerScores = ({scores}) => (
-    <div>
-        <p>Scores from previous game:</p>
-        <p>{JSON.stringify(scores)}</p>
-    </div>
+// TODO render this as a nice score page
+
+const PlayerScores = ({ scores, onReturnToStart }) => (
+  <div>
+    <p>Previous Game:</p>
+    <p>{JSON.stringify(scores)}</p>
+    <button
+      onClick={onReturnToStart}>
+      Return to Start
+    </button>
+  </div>
 );
 
 export default PlayerScores;

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

@@ -1,11 +1,22 @@
 import React from "react";
 
-// TODO eventually - we want this to query and show other players
+// TODO eventually we want this to query and show other players
+// TODO also should show the actual location of the last round
 
-const RoundSummary = ({roundNum, score, totalScore}) => (
+const RoundSummary = ({
+  roundNum, 
+  score, 
+  totalScore,
+  onAdvanceState,
+  buttonText,
+}) => (
   <div>
     <p>Score For Round {roundNum}: {score}</p>
     <p>Running Total Score: {totalScore}</p>
+    <button
+      onClick={onAdvanceState}>
+      {buttonText}
+    </button>
   </div>
 );