Moving the useMarkersFromGuesses hook to shared

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

@@ -1,10 +1,11 @@
 import React, { useRef } from "react";
 import styled from "styled-components";
 import { useLastRound } from "../../../domain/gameStore";
-import useMarkersFromGuesses from "./useMarkersFromGuesses";
+import useMarkersFromGuesses from "../../../hooks/useMarkersFromGuesses";
 import useMap from "../../../hooks/useMap";
 import NextRoundButton from "./NextRoundButton";
 import useClickToCheckScore from "./useClickToCheckScore";
+import useGameInfo from "../../../hooks/useGameInfo";
 
 const SummaryDiv = styled.div`
   position: absolute;
@@ -35,8 +36,14 @@ export default () => {
   const mapDivRef = useRef(null);
   const mapRef = useMap(mapDivRef, targetPoint.lat, targetPoint.lng, 4);
 
+  // live update with all the scores
+  const players = useGameInfo()
+    ?.players
+    ?.filter(({ guesses }) => guesses[roundNum] && guesses[roundNum].score !== null)
+    ?.map(({ name, totalScore, guesses }) => ({ name, totalScore, guess: guesses[roundNum] }));
+
   // add the player guess markers
-  useMarkersFromGuesses(mapRef, roundNum, targetPoint);
+  useMarkersFromGuesses(mapRef, players, targetPoint);
 
   // let the current player click the map to see a possible score
   useClickToCheckScore(mapRef, targetPoint);

client/src/components/screens/RoundSummary/useMarkersFromGuesses.jsx → client/src/hooks/useMarkersFromGuesses.jsx

@@ -1,23 +1,19 @@
 import { useEffect } from "react";
-import { usePlayerName } from "../../../domain/gameStore";
-import useGameInfo from "../../../hooks/useGameInfo";
-import { makeQuestionMarker, makeFlagMarker, makeLine } from "./markers";
-import getColorGenerator from "./getColorGenerator";
+import { usePlayerName } from "../domain/gameStore";
+import { makeQuestionMarker, makeFlagMarker, makeLine } from "../components/screens/RoundSummary/markers";
+import getColorGenerator from "../components/screens/RoundSummary/getColorGenerator";
 import { useRef } from "react";
 
-export default (mapRef, roundNum, targetPoint) => {
+export default (mapRef, players, targetPoint) => {
   // set up the flag at the target point
   useEffect(() => {
+    if (targetPoint === null) {
+      return;
+    }
     const targetMarker = makeFlagMarker(mapRef.current, targetPoint);
     return () => targetMarker.setMap(null);
   }, [mapRef, targetPoint]);
 
-  // live update with all the scores
-  const players = useGameInfo()
-    ?.players
-    ?.filter(({ guesses }) => guesses[roundNum] && guesses[roundNum].score !== null)
-    ?.map(({ name, totalScore, guesses }) => ({ name, totalScore, guess: guesses[roundNum] }));
-
   // get the current player's name
   const playerName = usePlayerName();