Improving player scores component by wrapping in a container and fetching information from there

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

@@ -12,7 +12,7 @@ import PreGame from '../pre-game.component';
 import PreRound from '../pre-round.component';
 import GamePanel from "../game-panel.component";
 import RoundSummary from '../round-summary.component';
-import PlayerScores from "../player-scores.component";
+import PlayerScoresContainer from "../player-scores.component";
 import { 
   getGoogleApiKey, 
   createGame, 
@@ -21,6 +21,7 @@ import {
   getGuesses, 
   sendGuess 
 } 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
 
@@ -37,7 +38,6 @@ class Game extends React.Component {
       selectedPoint: null,
       lastScore: null,
       totalScore: null,
-      players: null,
       roundTimer: null,
     }
   }
@@ -67,19 +67,18 @@ class Game extends React.Component {
     this.setState({ gameState: LOADING })
     const { gameId, playerName } = this.state;
     const { currentRound } = await getGuesses(gameId, playerName);
-    const { coords, players, timer } = await gameInfo(gameId);
     if (currentRound) {
+      const { coords, timer } = await gameInfo(gameId);
       const targetPoint = coords[currentRound];
       this.setState({
         gameState: IN_ROUND,
         currentRound,
         targetPoint,
         selectedPoint: null,
-        players,
         roundTimer: timer,
       });
     } else {
-      this.setState({ gameState: POST_GAME, players });
+      this.setState({ gameState: POST_GAME });
     }
   }
   
@@ -100,7 +99,7 @@ class Game extends React.Component {
   }
   
   renderLoading() {
-    return <p>Loading...</p>
+    return <Loading/>
   }
   
   renderPreGame() {
@@ -159,10 +158,10 @@ class Game extends React.Component {
   }
   
   renderPostGame() {
-    const { players } = this.state;
-    return <PlayerScores
-    players={players}
-    onReturnToStart={() => this.setState({ gameState: PRE_GAME })}
+    const { gameId } = this.state;
+    return <PlayerScoresContainer
+      gameId={gameId}
+      onReturnToStart={() => this.setState({ gameState: PRE_GAME })}
     />
   }
   

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

@@ -1,36 +1,68 @@
 import React from 'react';
+import { gameInfo } from '../services/ggsh.service';
+import Loading from './loading.component';
 
 // TODO render this as a nice score page
 // TODO live updates?
 
-const PlayerScores = ({ players, onReturnToStart }) => (
-  <div>
-    <p>Previous Game:</p>
+const PlayerScores = ({ scores }) => (
+  <div style={{
+    display: "flex", 
+    flexFlow: "row wrap", 
+    justifyContent: "space-around", 
+    alignItems: "center", 
+    alignContent: "space-around"}}>
     {
-      players
-      .filter(({ currentRound }) => currentRound === null)
-      .sort((p1, p2) => p1.totalScore > p2.totalScore ? -1 : (p1.totalScore < p2.totalScore ? 1 : 0))
-      .reverse()
-      .map(({ name, guesses, totalScore }) => (
-        <div>
-          <p>{name}</p>
-          <p>Score: {totalScore}</p>
-          <ol>
-            <li>{guesses["1"] && guesses["1"].score}</li>
-            <li>{guesses["2"] && guesses["2"].score}</li>
-            <li>{guesses["3"] && guesses["3"].score}</li>
-            <li>{guesses["4"] && guesses["4"].score}</li>
-            <li>{guesses["5"] && guesses["5"].score}</li>
-          </ol>
-          <hr/>
-        </div>
-      ))
+      scores
+        .filter(({ currentRound }) => currentRound === null)
+        .sort((p1, p2) => p1.totalScore > p2.totalScore ? -1 : (p1.totalScore < p2.totalScore ? 1 : 0))
+        .map(({ name, guesses, totalScore }) => 
+          <div style={{flex: 1}}>
+            <p>{name}</p>
+            <p>Score: {totalScore}</p>
+            <ol>
+              <li>{guesses["1"] && guesses["1"].score}</li>
+              <li>{guesses["2"] && guesses["2"].score}</li>
+              <li>{guesses["3"] && guesses["3"].score}</li>
+              <li>{guesses["4"] && guesses["4"].score}</li>
+              <li>{guesses["5"] && guesses["5"].score}</li>
+            </ol>
+          </div>
+        )
     }
-    <button
-      onClick={onReturnToStart}>
-      Return to Start
-    </button>
   </div>
 );
 
-export default PlayerScores;
+class PlayerScoresContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { scores: null }
+  }
+
+  async componentDidMount() {
+    const { gameId } = this.props;
+    const { players } = await gameInfo(gameId);
+    this.setState({ scores: players });
+  }
+
+  render() {
+    const { scores } = this.state;
+    if (!scores) {
+      return <Loading/>
+    }
+
+    const { onReturnToStart } = this.props;
+    return (
+      <div>
+        <p>Previous Game:</p>
+        <PlayerScores scores={scores} />
+        <button onClick={onReturnToStart}>
+          Return to Start
+        </button>
+      </div>
+    );
+  }
+
+}
+
+export default PlayerScoresContainer;