Reorganizing GamePanel hooks into one file

client/src/components/screens/GamePanel/GamePanel.jsx

@@ -6,7 +6,7 @@ import styles from "./GamePanel.module.css";
 import GuessPane from "./GuessPane";
 import PositionedStreetView from "./PositionedStreetView";
 import RaceMode from "./RaceMode";
-import useIsFinished from "./useIsFinished";
+import { useIsFinished } from "./hooks";
 
 const GamePanel = () => {
   // warn the user if they navigate away

client/src/components/screens/GamePanel/PositionedStreetView.jsx

@@ -5,8 +5,7 @@ import {
   useTargetPoint,
 } from "../../../domain/gameStore";
 import styles from "./GamePanel.module.css";
-import usePano from "./usePano";
-import useSavePanoSettings from "./useSavePanoSettings";
+import { usePano, useSavePanoSettings } from "./hooks";
 
 const PositionedStreetView = () => {
   const startPosition = usePanoStartPosition();

client/src/components/screens/GamePanel/RaceMode.jsx

@@ -1,9 +1,10 @@
 import ms from "pretty-ms";
 import styles from "./GamePanel.module.css";
-import useRaceModeCheck from "./useRaceModeCheck";
+import { useFirstSubmitter, useIsFaded } from "./hooks";
 
 const RaceMode = ({ rate, cutoffTime }) => {
-  const [first, faded] = useRaceModeCheck(rate, cutoffTime);
+  const first = useFirstSubmitter(rate, cutoffTime);
+  const faded = useIsFaded(first);
 
   if (first === null) {
     return <></>;

client/src/components/screens/GamePanel/hooks.jsx

@@ -0,0 +1,99 @@
+import { useEffect, useState, useRef } from "react";
+import {
+  useGameId,
+  useCurrentRound,
+  dispatch,
+} from "../../../domain/gameStore";
+import { getFirstSubmitter } from "../../../domain/apiMethods";
+import {
+  savePanoPositionToLocalStorage,
+  savePanoPovToLocalStorage,
+} from "../../../domain/localStorageMethods";
+/* global google */
+
+export const useFirstSubmitter = (rate, cutoffTime) => {
+  const [first, setFirst] = useState(null);
+  const gameId = useGameId();
+  const round = useCurrentRound();
+  useEffect(() => {
+    if (first !== null) {
+      return;
+    }
+    const update = async () => {
+      const firstRes = await getFirstSubmitter(gameId, round);
+      if (firstRes !== null) {
+        dispatch.updateRoundSeconds(r => Math.min(r, cutoffTime));
+        setFirst(firstRes);
+      }
+    };
+    update();
+    const interval = setInterval(update, rate);
+    // eslint-disable-next-line consistent-return
+    return () => clearInterval(interval);
+  }, [first, gameId, round, rate, cutoffTime]);
+  return first;
+};
+
+export const useIsFaded = first => {
+  const [faded, setFaded] = useState(false);
+  // eslint-disable-next-line consistent-return
+  useEffect(() => {
+    if (first !== null) {
+      const timeout = setTimeout(() => setFaded(true), 2000);
+      return () => clearTimeout(timeout);
+    }
+  }, [first]);
+  return faded;
+};
+
+export const useIsFinished = () => {
+  const finished = useCurrentRound() === null;
+  useEffect(() => {
+    if (finished) {
+      dispatch.goToSummary();
+    }
+  }, [finished]);
+  return finished;
+};
+
+export const usePano = (panoDivRef, { lat, lng }, { heading, pitch }) => {
+  const panoRef = useRef(null);
+  useEffect(() => {
+    const position = { lat, lng };
+    const pov = { heading, pitch };
+    if (panoRef.current) {
+      panoRef.current.setPosition(position);
+      panoRef.current.setPov(pov);
+      return;
+    }
+
+    panoRef.current = new google.maps.StreetViewPanorama(panoDivRef.current, {
+      position,
+      pov,
+      fullscreenControl: false,
+      addressControl: false,
+      showRoadLabels: false,
+      clickToGo: true,
+      visible: true,
+      motionTracking: false,
+      motionTrackingControl: false,
+    });
+  }, [panoDivRef, lat, lng, heading, pitch]);
+
+  return panoRef;
+};
+
+export const useSavePanoSettings = panoRef => {
+  useEffect(() => {
+    if (panoRef.current) {
+      panoRef.current.addListener("position_changed", () => {
+        const { lat, lng } = panoRef.current.getPosition();
+        savePanoPositionToLocalStorage(lat(), lng());
+      });
+      panoRef.current.addListener("pov_changed", () => {
+        const { heading, pitch } = panoRef.current.getPov();
+        savePanoPovToLocalStorage(heading, pitch);
+      });
+    }
+  }, [panoRef]);
+};

client/src/components/screens/GamePanel/useIsFinished.jsx

@@ -1,14 +0,0 @@
-import { useEffect } from "react";
-import { dispatch, useCurrentRound } from "../../../domain/gameStore";
-
-const useIsFinished = () => {
-  const finished = useCurrentRound() === null;
-  useEffect(() => {
-    if (finished) {
-      dispatch.goToSummary();
-    }
-  }, [finished]);
-  return finished;
-};
-
-export default useIsFinished;

client/src/components/screens/GamePanel/usePano.jsx

@@ -1,31 +0,0 @@
-import { useRef, useEffect } from "react";
-/* global google */
-
-const usePano = (panoDivRef, { lat, lng }, { heading, pitch }) => {
-  const panoRef = useRef(null);
-  useEffect(() => {
-    const position = { lat, lng };
-    const pov = { heading, pitch };
-    if (panoRef.current) {
-      panoRef.current.setPosition(position);
-      panoRef.current.setPov(pov);
-      return;
-    }
-
-    panoRef.current = new google.maps.StreetViewPanorama(panoDivRef.current, {
-      position,
-      pov,
-      fullscreenControl: false,
-      addressControl: false,
-      showRoadLabels: false,
-      clickToGo: true,
-      visible: true,
-      motionTracking: false,
-      motionTrackingControl: false,
-    });
-  }, [panoDivRef, lat, lng, heading, pitch]);
-
-  return panoRef;
-};
-
-export default usePano;

client/src/components/screens/GamePanel/useRaceModeCheck.jsx

@@ -1,41 +0,0 @@
-import { useEffect, useState } from "react";
-import {
-  useGameId,
-  useCurrentRound,
-  dispatch,
-} from "../../../domain/gameStore";
-import { getFirstSubmitter } from "../../../domain/apiMethods";
-
-const useRaceModeCheck = (rate, cutoffTime) => {
-  const [first, setFirst] = useState(null);
-  const gameId = useGameId();
-  const round = useCurrentRound();
-  useEffect(() => {
-    if (first !== null) {
-      return;
-    }
-    const update = async () => {
-      const firstRes = await getFirstSubmitter(gameId, round);
-      if (firstRes !== null) {
-        dispatch.updateRoundSeconds(r => Math.min(r, cutoffTime));
-        setFirst(firstRes);
-      }
-    };
-    update();
-    const interval = setInterval(update, rate);
-    // eslint-disable-next-line consistent-return
-    return () => clearInterval(interval);
-  }, [first, gameId, round, rate, cutoffTime]);
-  const [faded, setFaded] = useState(false);
-  // eslint-disable-next-line consistent-return
-  useEffect(() => {
-    if (first !== null) {
-      const timeout = setTimeout(() => setFaded(true), 2000);
-      return () => clearTimeout(timeout);
-    }
-  }, [first]);
-
-  return [first, faded];
-};
-
-export default useRaceModeCheck;

client/src/components/screens/GamePanel/useSavePanoSettings.jsx

@@ -1,22 +0,0 @@
-import { useEffect } from "react";
-import {
-  savePanoPositionToLocalStorage,
-  savePanoPovToLocalStorage,
-} from "../../../domain/localStorageMethods";
-
-const useSavePanoSettings = panoRef => {
-  useEffect(() => {
-    if (panoRef.current) {
-      panoRef.current.addListener("position_changed", () => {
-        const { lat, lng } = panoRef.current.getPosition();
-        savePanoPositionToLocalStorage(lat(), lng());
-      });
-      panoRef.current.addListener("pov_changed", () => {
-        const { heading, pitch } = panoRef.current.getPov();
-        savePanoPovToLocalStorage(heading, pitch);
-      });
-    }
-  }, [panoRef]);
-};
-
-export default useSavePanoSettings;

client/src/tests/GamePanel.test.js

@@ -5,11 +5,11 @@ import GamePanel from "../components/screens/GamePanel";
 
 jest.mock("../hooks/usePreventNavigation");
 jest.mock("../hooks/useGameInfo");
-jest.mock("../components/screens/GamePanel/useIsFinished");
+jest.mock("../components/screens/GamePanel/hooks");
 
 import usePreventNavigation from "../hooks/usePreventNavigation";
 import { useGameConfig } from "../hooks/useGameInfo";
-import useIsFinished from "../components/screens/GamePanel/useIsFinished";
+import { useIsFinished } from "../components/screens/GamePanel/hooks";
 
 describe("GamePanel", () => {
   it("renders for NORMAL game", () => {

client/src/tests/PositionedStreetView.test.js

@@ -3,15 +3,14 @@ import { shallow } from "enzyme";
 import PositionedStreetView from "../components/screens/GamePanel/PositionedStreetView";
 
 jest.mock("../domain/gameStore");
-jest.mock("../components/screens/GamePanel/usePano");
-jest.mock("../components/screens/GamePanel/useSavePanoSettings");
+jest.mock("../components/screens/GamePanel/hooks");
 
 import {
   usePanoStartPosition,
   usePanoStartPov,
   useTargetPoint,
 } from "../domain/gameStore";
-import usePano from "../components/screens/GamePanel/usePano";
+import { usePano } from "../components/screens/GamePanel/hooks";
 
 describe("PositionedStreetView", () => {
   it("renders", () => {

client/src/tests/RaceMode.test.js

@@ -4,23 +4,29 @@ import RaceMode from "../components/screens/GamePanel/RaceMode";
 
 jest.mock("../domain/gameStore");
 jest.mock("../domain/apiMethods");
-jest.mock("../components/screens/GamePanel/useRaceModeCheck");
+jest.mock("../components/screens/GamePanel/hooks");
 
-import useRaceModeCheck from "../components/screens/GamePanel/useRaceModeCheck";
+import {
+  useFirstSubmitter,
+  useIsFaded,
+} from "../components/screens/GamePanel/hooks";
 
 describe("PositionedStreetView", () => {
   it("renders", () => {
-    useRaceModeCheck.mockReturnValue([null, false]);
+    useFirstSubmitter.mockReturnValue(null);
+    useIsFaded.mockReturnValue(false);
     const rendered = shallow(<RaceMode />);
     expect(rendered).toMatchSnapshot();
   });
   it("renders when cut off", () => {
-    useRaceModeCheck.mockReturnValue(["cutoff-player", false]);
+    useFirstSubmitter.mockReturnValue("cutoff-player");
+    useIsFaded.mockReturnValue(false);
     const rendered = shallow(<RaceMode cutoffTime={10} />);
     expect(rendered).toMatchSnapshot();
   });
   it("renders when faded", () => {
-    useRaceModeCheck.mockReturnValue(["cutoff-player", true]);
+    useFirstSubmitter.mockReturnValue("cutoff-player");
+    useIsFaded.mockReturnValue(true);
     const rendered = shallow(<RaceMode cutoffTime={10} />);
     expect(rendered).toMatchSnapshot();
   });