Refactoring the top player logic and moving to separate component file

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

@@ -0,0 +1,47 @@
+import React from "react";
+import ClickToCopy from "../../util/ClickToCopy";
+import Button from "../../util/Button";
+import usePlayerScores from "../../../hooks/usePlayerScores";
+
+const useTopScorer = (gameId, roundNum) => {
+  const scores = usePlayerScores(gameId);
+  const top = { topPlayer: null, topScore: null };
+
+  if (scores === null) {
+    return top;
+  }
+
+  scores
+    .filter(({ guesses }) => guesses[roundNum] && guesses[roundNum].score)
+    .forEach(({ name, guesses }) => {
+      const score = guesses[roundNum].score;
+      if (top.topScore === null || score > top.topScore) {
+        top.topPlayer = name;
+        top.topScore = score;
+      }
+    });
+  
+  return top;
+}
+
+export default ({ gameId, selectedPoint, targetPoint, roundNum, score, totalScore, onNext }) => {
+  const { topPlayer, topScore } = useTopScorer(gameId, roundNum);
+
+  return (
+    <div className="round-summary__info-pane">
+      {selectedPoint 
+        ? <span className="round-summary__guess">
+            You selected: <ClickToCopy text={`${selectedPoint.lat}, ${selectedPoint.lng}`}/>
+          </span> 
+        : <span className="round-summary__guess round-summary__guess--timed-out">
+            Timed out!
+          </span>
+      }
+      <span className="round-summary__target-point">Target: <ClickToCopy text={`${targetPoint.lat}, ${targetPoint.lng}`}/></span>
+      <span className="round-summary__round-score">Score For Round {roundNum}: {score}</span>
+      <span className="round-summary__total-score">Running Total Score: {totalScore}</span>
+      {topPlayer ? <span className="round-summary__top-score">Current best is {topPlayer} with {topScore}</span> : null}
+      <Button className="round-summary__button" onClick={onNext}>{roundNum === "5" ? "View Summary" : "Next Round"}</Button>
+    </div>
+  );
+}

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

@@ -1,52 +1,7 @@
 import React, { useRef } from "react";
-import ClickToCopy from "../../util/ClickToCopy";
-import Button from "../../util/Button";
 import useMap from "../../../hooks/useMap";
-import usePlayerScores from "../../../hooks/usePlayerScores";
 import useMarkedPoints from "./useMarkedPoints";
-
-// TODO eventually we want this to query and show other players
-
-const useTopScorer = (gameId, roundNum) => {
-  const scores = usePlayerScores(gameId);
-
-  if (scores === null) {
-    return { topPlayer: null, topScore: null }
-  }
-
-  const ordered = scores
-    .filter(({ guesses }) => guesses[roundNum] && guesses[roundNum].score)
-    .map(({ name, guesses }) => ({ name, score: guesses[roundNum].score }))
-    .sort((p1, p2) => p1.score > p2.score ? -1 : (p1.score < p2.score ? 1 : 0));
-
-  if (ordered.length === 0) {
-    return { topPlayer: null, topScore: null }
-  }
-
-  return { topPlayer: ordered[0].name, topScore: ordered[0].score };
-}
-
-const InfoPane = ({ gameId, selectedPoint, targetPoint, roundNum, score, totalScore, onNext }) => {
-  const { topPlayer, topScore } = useTopScorer(gameId, roundNum);
-
-  return (
-    <div className="round-summary__info-pane">
-      {selectedPoint 
-        ? <span className="round-summary__guess">
-            You selected: <ClickToCopy text={`${selectedPoint.lat}, ${selectedPoint.lng}`}/>
-          </span> 
-        : <span className="round-summary__guess round-summary__guess--timed-out">
-            Timed out!
-          </span>
-      }
-      <span className="round-summary__target-point">Target: <ClickToCopy text={`${targetPoint.lat}, ${targetPoint.lng}`}/></span>
-      <span className="round-summary__round-score">Score For Round {roundNum}: {score}</span>
-      <span className="round-summary__total-score">Running Total Score: {totalScore}</span>
-      {topPlayer ? <span className="round-summary__top-score">Current best is {topPlayer} with {topScore}</span> : null}
-      <Button className="round-summary__button" onClick={onNext}>{roundNum === "5" ? "View Summary" : "Next Round"}</Button>
-    </div>
-  );
-}
+import RoundInfoPane from "./RoundInfoPane";
 
 export default ({ gameId, round, onNext }) => {
   const {
@@ -63,7 +18,7 @@ export default ({ gameId, round, onNext }) => {
   return (
     <div className="round-summary">
       <div className="round-summary__map"><div className="map-div" ref={mapDivRef} /></div>
-      <InfoPane {...{ gameId, selectedPoint, targetPoint, roundNum, score, totalScore, onNext }}/>
+      <RoundInfoPane {...{ gameId, selectedPoint, targetPoint, roundNum, score, totalScore, onNext }}/>
     </div>
   );
 };