Changing usePlayerScores hook into useGameInfo

client/src/components/screens/Lobby/LobbyPlayerList.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import usePlayerScores from "../../../hooks/usePlayerScores";
+import useGameInfo from "../../../hooks/useGameInfo";
 
 const PlayerListContainer = styled.div`
   flex: 1;
@@ -30,7 +30,7 @@ const LobbyPlayerList = () => (
     <Label>Players</Label>
     <PlayerList>
       {
-        usePlayerScores()?.map(({ name }) => (
+        useGameInfo()?.players?.map(({ name }) => (
           <PlayerName key={name}>{name}</PlayerName>
         ))
       }

client/src/components/screens/PlayerScores/PlayerScores.jsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import Loading from '../../util/Loading';
 import Button from "../../util/Button";
 import PlayerScoreTile from "./PlayerScoreTile";
-import usePlayerScores from '../../../hooks/usePlayerScores';
+import useGameInfo from '../../../hooks/useGameInfo';
 import ClickToCopy from '../../util/ClickToCopy';
 import HeaderAndFooter from '../../util/HeaderAndFooter';
 import { useGameId, dispatch } from '../../../domain/gameStore';
@@ -51,9 +51,9 @@ const getUrl = gameId => {
 
 export default () => {
   const gameId = useGameId();
-  const scores = usePlayerScores();
+  const { players }  = useGameInfo();
 
-  if (!scores) {
+  if (!players) {
     return <Loading/>
   }
 
@@ -62,7 +62,7 @@ export default () => {
       <Container>
         <ScoreBoard>
           {
-            scores
+            players
               .filter(({ currentRound }) => currentRound === null)
               .sort((p1, p2) => p1.totalScore > p2.totalScore ? -1 : (p1.totalScore < p2.totalScore ? 1 : 0))
               .map((data) => <PlayerScoreTile key={data.name} {...data} />)

client/src/components/screens/RoundSummary/useMapWithMarkers.jsx

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import { useLastRound, usePlayerName } from "../../../domain/gameStore";
 import useMap from "../../../hooks/useMap";
-import usePlayerScores from "../../../hooks/usePlayerScores";
+import useGameInfo from "../../../hooks/useGameInfo";
 import { makeQuestionMarker, makeFlagMarker, makeLine } from "./markers";
 import getColorGenerator from "./getColorGenerator";
 import { useRef } from "react";
@@ -20,7 +20,8 @@ const useMapWithMarkers = (mapDivRef) => {
   }, [mapRef, targetPoint]);
 
   // live update with all the scores
-  const players = usePlayerScores()
+  const players = useGameInfo()
+    ?.players
     ?.filter(({ guesses }) => guesses[roundNum] && guesses[roundNum].score !== null)
     ?.map(({ name, totalScore, guesses }) => ({ name, totalScore, guess: guesses[roundNum] }));
 

client/src/hooks/usePlayerScores.jsx → client/src/hooks/useGameInfo.jsx

@@ -5,15 +5,15 @@ import { useGameId } from '../domain/gameStore';
 
 export default () => {
   const gameId = useGameId();
-  const [scores, setScores] = useState(null);
+  const [info, setInfo] = useState({ players: null });
 
   useEffect(() => {
     // define how to fetch scores
     const fetchInfo = async () => {
-      const { players } = await gameInfo(gameId);
-      // TODO  maybe have back-end provide timestamp? to avoid this check
-      if (!dequal(players, scores)) {
-        setScores(players);
+      const newInfo = await gameInfo(gameId);
+      // TODO maybe have back-end provide timestamp? to avoid this check
+      if (!dequal(info, newInfo)) {
+        setInfo(newInfo);
       }
     };
     // when the hook triggers, fetch the game info
@@ -22,7 +22,7 @@ export default () => {
     const interval = setInterval(() => fetchInfo(), 5000);
     // and return a clean-up callback
     return () => { clearInterval(interval) };
-  }, [gameId, scores]);
+  }, [gameId, info]);
 
-  return scores;
+  return info;
 }