Moving the next round button logic out to a separate component

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

@@ -0,0 +1,30 @@
+import React from "react";
+import styled from "styled-components";
+import { dispatch } from "../../../domain/gameStore";
+import useRoundInfo from "../../../hooks/useRoundInfo";
+import DelayedButton from "../../util/DelayedButton";
+import Button from "../../util/Button";
+
+
+const FinishedButton = styled(Button)`
+  margin-top: 5px;
+  padding: 1em;
+`
+
+const NextButton = styled(DelayedButton)`
+  margin-top: 5px;
+  padding: 1em;
+`
+
+export default () => {
+  // whether or not the game is done
+  const [gameFinished] = useRoundInfo();
+
+  return gameFinished 
+    ? <FinishedButton onClick={dispatch.startRound}>
+        View Summary
+      </FinishedButton>
+    : <NextButton onEnd={dispatch.startRound} countDownFormatter={rem => `Click to cancel, ${rem}s...`}>
+        Next Round
+      </NextButton>
+}

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

@@ -1,10 +1,8 @@
 import React, { useRef } from "react";
 import styled from "styled-components";
-import { useLastRound, dispatch } from "../../../domain/gameStore";
-import useRoundInfo from "../../../hooks/useRoundInfo";
-import DelayedButton from "../../util/DelayedButton";
-import Button from "../../util/Button";
+import { useLastRound } from "../../../domain/gameStore";
 import useMapWithMarkers from "./useMapWithMarkers";
+import NextRoundButton from "./NextRoundButton";
 
 const SummaryDiv = styled.div`
   position: absolute;
@@ -27,16 +25,6 @@ const MapDiv = styled.div`
   width: 100%;
 `
 
-const FinishedButton = styled(Button)`
-  margin-top: 5px;
-  padding: 1em;
-`
-
-const NextButton = styled(DelayedButton)`
-  margin-top: 5px;
-  padding: 1em;
-`
-
 export default () => {
   // get the info about the last round
   const { roundNum, score, totalScore, targetPoint } = useLastRound();
@@ -44,9 +32,6 @@ export default () => {
   // draw the map
   const mapDivRef = useRef(null);
   useMapWithMarkers(mapDivRef, roundNum, targetPoint);
-
-  // whether or not the game is done
-  const [gameFinished] = useRoundInfo();
   
   return (
     <div>
@@ -54,15 +39,7 @@ export default () => {
       <SummaryDiv>
         <ScoreSpan>Score for Round {roundNum}: {score}</ScoreSpan>
         <ScoreSpan>Running Total: {totalScore}</ScoreSpan>
-        {
-          gameFinished 
-            ? <FinishedButton onClick={dispatch.startRound}>
-                View Summary
-              </FinishedButton>
-            : <NextButton onEnd={dispatch.startRound} countDownFormatter={rem => `Click to cancel, ${rem}s...`}>
-                Next Round
-              </NextButton>
-        }
+        <NextRoundButton/>
       </SummaryDiv>
     </div>
   );