Splitting up player scores component into module with sub components

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

@@ -1,68 +0,0 @@
-import React, { useState,useEffect } from 'react';
-import { gameInfo } from '../services/ggsh.service';
-import Loading from './loading.component';
-
-// TODO make this page prettier
-
-const PlayerScoreItem = ({ 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>
-);
-
-const PlayerScores = ({ scores }) => (
-  <div style={{
-    display: "flex",
-    flexFlow: "row wrap",
-    justifyContent: "space-around",
-    alignItems: "center",
-    alignContent: "space-around"
-  }}>
-    {
-      scores
-        .filter(({ currentRound }) => currentRound === null)
-        .sort((p1, p2) => p1.totalScore > p2.totalScore ? -1 : (p1.totalScore < p2.totalScore ? 1 : 0))
-        .map(({ name, guesses, totalScore }) => <PlayerScoreItem key={name} {...{ name, guesses, totalScore }} />)
-    }
-  </div>
-);
-
-const PlayerScoresContainer = ({ gameId, onReturnToStart }) => {
-  const [scores, setScores] = useState(null);
-
-  useEffect(() => {
-    // define how to fetch scores
-    const fetchInfo = async () => {
-      console.log("data fetched");
-      const { players } = await gameInfo(gameId);
-      setScores(players);
-    };
-    // when the component renders, fetch the game info
-    fetchInfo();
-    // and do it again every 5 seconds after
-    const interval = setInterval(() => fetchInfo(), 5000);
-    return () => { clearInterval(interval) };
-  }, [gameId]);
-
-  if (!scores) {
-    return <Loading/>
-  }
-
-  return (
-    <div>
-      <p>Previous Game:</p>
-      <PlayerScores scores={scores} />
-      <button onClick={onReturnToStart} >Return to Start</button>
-    </div>
-  );
-}
-
-export default PlayerScoresContainer;

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

@@ -0,0 +1 @@
+export { default } from './player-scores.component';

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

@@ -0,0 +1,19 @@
+import React from "react";
+import PlayerScoreTile from "./player-score-tile.component";
+
+export default ({ scores }) => (
+  <div style={{
+    display: "flex",
+    flexFlow: "row wrap",
+    justifyContent: "space-around",
+    alignItems: "center",
+    alignContent: "space-around"
+  }}>
+    {
+      scores
+        .filter(({ currentRound }) => currentRound === null)
+        .sort((p1, p2) => p1.totalScore > p2.totalScore ? -1 : (p1.totalScore < p2.totalScore ? 1 : 0))
+        .map(({ name, guesses, totalScore }) => <PlayerScoreTile key={name} {...{ name, guesses, totalScore }} />)
+    }
+  </div>
+);

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

@@ -0,0 +1,15 @@
+import React from "react";
+
+export default ({ 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>
+);

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

@@ -0,0 +1,36 @@
+import React, { useState,useEffect } from 'react';
+import { gameInfo } from '../../services/ggsh.service';
+import Loading from '../loading.component';
+import PlayerScores from "./player-score-list.component";
+
+const PlayerScoresContainer = ({ gameId, onReturnToStart }) => {
+  const [scores, setScores] = useState(null);
+
+  useEffect(() => {
+    // define how to fetch scores
+    const fetchInfo = async () => {
+      const { players } = await gameInfo(gameId);
+      setScores(players);
+    };
+    // when the component renders, fetch the game info
+    fetchInfo();
+    // and do it again every 5 seconds after
+    const interval = setInterval(() => fetchInfo(), 5000);
+    // and return a clean-up callback
+    return () => { clearInterval(interval) };
+  }, [gameId]);
+
+  if (!scores) {
+    return <Loading/>
+  }
+
+  return (
+    <div>
+      <p>Previous Game:</p>
+      <PlayerScores scores={scores} />
+      <button onClick={onReturnToStart} >Return to Start</button>
+    </div>
+  );
+}
+
+export default PlayerScoresContainer;