Moved useMapWthMarkers hook to its own file

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

@@ -1,17 +1,10 @@
-import React, { useRef, useEffect } from "react";
+import React, { useRef } from "react";
 import styled from "styled-components";
 import { useLastRound, dispatch } from "../../../domain/gameStore";
-import useMap from "../../../hooks/useMap";
-import usePlayerScores from "../../../hooks/usePlayerScores";
 import useRoundInfo from "../../../hooks/useRoundInfo";
 import DelayedButton from "../../util/DelayedButton";
 import Button from "../../util/Button";
-import usePlayerColors from "./usePlayerColors";
-import { makeQuestionMarker, makeFlagMarker, makeLine } from "./markers";
-
-
-const Container = styled.div`
-`
+import useMapWithMarkers from "./useMapWithMarkers";
 
 const SummaryDiv = styled.div`
   position: absolute;
@@ -44,45 +37,6 @@ const NextButton = styled(DelayedButton)`
   padding: 1em;
 `
 
-const useMapWithMarkers = (mapDivRef) => {
-  // get the info about the last round
-  const { roundNum, targetPoint } = useLastRound();
-
-  // create the map
-  const mapRef = useMap(mapDivRef, targetPoint.lat, targetPoint.lng, 4);
-
-  // set up the flag at the target point
-  useEffect(() => {
-    const targetMarker = makeFlagMarker(mapRef.current, targetPoint);
-    return () => targetMarker.setMap(null);
-  }, [mapRef, targetPoint]);
-
-  // live update with all the scores
-  const players = usePlayerScores()
-    ?.filter(({ guesses }) => guesses[roundNum] && guesses[roundNum].score !== null)
-    ?.map(({ name, totalScore, guesses }) => ({ name, totalScore, guess: guesses[roundNum] }));
-
-  // set up the marker colors
-  const playerColors = usePlayerColors(players?.map(({ name }) => name));
-
-  // draw all the player markers and trails
-  useEffect(() => {
-    if (!players) return;
-    const drawings = [];
-    players.forEach(({ name, guess: { lat, lng, score } }) => {
-      const color = playerColors[name];
-      const selectedPoint = { lat, lng };
-
-      const marker = makeQuestionMarker(mapRef.current, selectedPoint, `${name} - ${score} Points`, color);
-      drawings.push(marker);
-
-      const line = makeLine(selectedPoint, targetPoint, mapRef.current, color);
-      drawings.push(line);
-    });
-    return () => drawings.forEach((drawing) => drawing.setMap(null));
-  }, [players, mapRef, targetPoint, playerColors]);
-}
-
 export default () => {
   // get the info about the last round
   const { roundNum, score, totalScore } = useLastRound();
@@ -95,7 +49,7 @@ export default () => {
   const [gameFinished] = useRoundInfo();
   
   return (
-    <Container>
+    <div>
       <MapDiv ref={mapDivRef} />
       <SummaryDiv>
         <ScoreSpan>Score for Round {roundNum}: {score}</ScoreSpan>
@@ -110,6 +64,6 @@ export default () => {
               </NextButton>
         }
       </SummaryDiv>
-    </Container>
+    </div>
   );
 };

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

@@ -0,0 +1,47 @@
+import { useEffect } from "react";
+import { useLastRound } from "../../../domain/gameStore";
+import useMap from "../../../hooks/useMap";
+import usePlayerScores from "../../../hooks/usePlayerScores";
+import usePlayerColors from "./usePlayerColors";
+import { makeQuestionMarker, makeFlagMarker, makeLine } from "./markers";
+
+const useMapWithMarkers = (mapDivRef) => {
+  // get the info about the last round
+  const { roundNum, targetPoint } = useLastRound();
+
+  // create the map
+  const mapRef = useMap(mapDivRef, targetPoint.lat, targetPoint.lng, 4);
+
+  // set up the flag at the target point
+  useEffect(() => {
+    const targetMarker = makeFlagMarker(mapRef.current, targetPoint);
+    return () => targetMarker.setMap(null);
+  }, [mapRef, targetPoint]);
+
+  // live update with all the scores
+  const players = usePlayerScores()
+    ?.filter(({ guesses }) => guesses[roundNum] && guesses[roundNum].score !== null)
+    ?.map(({ name, totalScore, guesses }) => ({ name, totalScore, guess: guesses[roundNum] }));
+
+  // set up the marker colors
+  const playerColors = usePlayerColors(players?.map(({ name }) => name));
+
+  // draw all the player markers and trails
+  useEffect(() => {
+    if (!players) return;
+    const drawings = [];
+    players.forEach(({ name, guess: { lat, lng, score } }) => {
+      const color = playerColors[name];
+      const selectedPoint = { lat, lng };
+
+      const marker = makeQuestionMarker(mapRef.current, selectedPoint, `${name} - ${score} Points`, color);
+      drawings.push(marker);
+
+      const line = makeLine(selectedPoint, targetPoint, mapRef.current, color);
+      drawings.push(line);
+    });
+    return () => drawings.forEach((drawing) => drawing.setMap(null));
+  }, [players, mapRef, targetPoint, playerColors]);
+};
+
+export default useMapWithMarkers;