Adding live updates to hooks in score page

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

@@ -2,8 +2,21 @@ import React, { useState,useEffect } from 'react';
 import { gameInfo } from '../services/ggsh.service';
 import Loading from './loading.component';
 
-// TODO render this as a nice score page
-// TODO live updates?
+// 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={{
@@ -17,19 +30,7 @@ const PlayerScores = ({ scores }) => (
       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>
-        )
+        .map(({ name, guesses, totalScore }) => <PlayerScoreItem key={name} {...{ name, guesses, totalScore }} />)
     }
   </div>
 );
@@ -38,11 +39,17 @@ 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) {