Upgrade to React 17, react-scripts 4, and fix resulting linting and imports

.gitignore

@@ -6,5 +6,6 @@
 
 dist/
 node_modules/
+.eslintcache
 
 ggsh.tgz

client/package.json

@@ -6,9 +6,9 @@
   "dependencies": {
     "dequal": "^1.0.0",
     "pretty-ms": "^5.1.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-scripts": "^3.3.0-next.80",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-scripts": "4.0.1",
     "react-transition-group": "^4.4.1"
   },
   "scripts": {

client/src/App.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, StrictMode } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import styles from './App.module.css';
 import GamePanel from './components/screens/GamePanel';
@@ -84,7 +84,7 @@ const State = ({ show, children, setTransitioning }) => {
   );
 }
 
-export default () => {
+const App = () => {
   const [loading, setLoading] = useState(true);
   const [transitioning, setTransitioning] = useState(true);
   const gameState = useGameState();
@@ -104,7 +104,7 @@ export default () => {
   const needsHF = needsHeaderFooter[gameState];
 
   return (
-    <React.StrictMode>
+    <StrictMode>
       <div className={styles.page}>
         <Header show={needsHF} />
         <State show={loading} setTransitioning={setTransitioning}>
@@ -130,6 +130,8 @@ export default () => {
         </State>
         <Footer show={needsHF} />
       </div>
-    </React.StrictMode>
+    </StrictMode>
   );
 };
+
+export default App;

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { dispatch, useCurrentRound } from '../../../domain/gameStore';
 import { FROZEN, RACE } from '../../../domain/ruleSets';
 import { useGameConfig } from '../../../hooks/useGameInfo';
@@ -9,7 +9,7 @@ import GuessPane from './GuessPane';
 import PositionedStreetView from './PositionedStreetView';
 import RaceMode from './RaceMode';
 
-export default () => {
+const GamePanel = () => {
   // warn the user if they navigate away
   usePreventNavigation();
   const { ruleSet } = useGameConfig();
@@ -36,3 +36,5 @@ export default () => {
     </div>
   );
 };
+
+export default GamePanel;

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

@@ -1,11 +1,13 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import useClickMarker from '../../../../hooks/useClickMarker';
 import useMap from '../../../../hooks/useMap';
 import styles from './GuessPane.module.css';
 
-export default ({ onMarkerMoved }) => {
+const ClickMarkerMap = ({ onMarkerMoved }) => {
   const mapDivRef = useRef(null);
   const mapRef = useMap(mapDivRef);
   useClickMarker(mapRef, onMarkerMoved);
   return <div className={styles.map} ref={mapDivRef} />;
 };
+
+export default ClickMarkerMap;

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { dispatch } from '../../../../domain/gameStore';
 import ClickMarkerMap from './ClickMarkerMap';
 import styles from './GuessPane.module.css';
@@ -12,7 +12,7 @@ const mapSizeOpts = {
 
 const toggleMapSize = larger => b => b === 'big' || b === 'medium' ? 'small' : larger;
 
-export default () => {
+const GuessPane = () => {
   const [ selectedPoint, setSelectedPoint ] = useState(null);
   const [ submitted, setSubmitted ] = useState(false);
   const [ mapSize, setMapSize ] = useState('small');
@@ -55,3 +55,5 @@ export default () => {
     </div>
   );
 };
+
+export default GuessPane;

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

@@ -1,9 +1,9 @@
 import ms from 'pretty-ms';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { dispatch, useRoundSeconds } from '../../../../domain/gameStore';
 import styles from './GuessPane.module.css';
 
-export default ({ onTimeout }) => {
+const RoundTimer = ({ onTimeout }) => {
   const remaining = useRoundSeconds();
   useEffect(
     () => {
@@ -33,3 +33,5 @@ export default ({ onTimeout }) => {
     <span className={`${styles.timer} ${styles['timer--timeout']}`}>Time's up!</span>
   );
 };
+
+export default RoundTimer;

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

@@ -1,10 +1,10 @@
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { usePanoStartPosition, usePanoStartPov, useTargetPoint } from '../../../domain/gameStore';
 import { savePanoPositionToLocalStorage, savePanoPovToLocalStorage } from '../../../domain/localStorageMethods';
 import styles from './GamePanel.module.css';
 import usePano from './usePano';
 
-export default () => {
+const PositionedStreetView = () => {
   const startPosition = usePanoStartPosition();
   const startPov = usePanoStartPov();
   const resetPosition = useTargetPoint();
@@ -35,3 +35,5 @@ export default () => {
     </>
   );
 };
+
+export default PositionedStreetView;

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

@@ -1,10 +1,10 @@
 import ms from 'pretty-ms';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useGameId, useCurrentRound, dispatch } from '../../../domain/gameStore';
 import { getFirstSubmitter } from '../../../domain/apiMethods';
 import styles from './GamePanel.module.css';
 
-export default ({ rate, cutoffTime }) => {
+const RaceMode = ({ rate, cutoffTime }) => {
   const [ first, setFirst ] = useState(null);
   const gameId = useGameId();
   const round = useCurrentRound();
@@ -41,3 +41,5 @@ export default ({ rate, cutoffTime }) => {
     </div>
   )
 };
+
+export default RaceMode;

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

@@ -1,7 +1,7 @@
 import { useRef, useEffect } from "react";
 /* global google */
 
-export default (panoDivRef, position, pov) => {
+const usePano = (panoDivRef, position, pov) => {
   const panoRef = useRef(null);
   const { lat, lng } = position;
   const { heading, pitch } = pov;
@@ -30,3 +30,5 @@ export default (panoDivRef, position, pov) => {
 
   return panoRef;
 }
+
+export default usePano;

client/src/components/screens/GameSummary/GameSummary.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useGameId } from '../../../domain/gameStore';
 import { useGameCoords, useLinkedGame, usePlayers } from '../../../hooks/useGameInfo';
 import ClickToCopy from '../../util/ClickToCopy';
@@ -8,7 +7,7 @@ import styles from './GameSummary.module.css';
 import ScoreBoard from './ScoreBoard';
 import SummaryMap from './SummaryMap';
 
-export default () => {
+const GameSummary = () => {
   // poll the game state
   const gameId = useGameId();
   const coords = useGameCoords();
@@ -36,3 +35,5 @@ export default () => {
     </div>
   );
 };
+
+export default GameSummary;

client/src/components/screens/GameSummary/ScoreBoard/ScoreBoard.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styles from './ScoreBoard.module.css';
 
 const PlayerScoreTile = ({ name, guesses, totalScore }) => (
@@ -21,7 +20,7 @@ const PlayerScoreTile = ({ name, guesses, totalScore }) => (
   </div>
 );
 
-export default ({ players }) => (
+const ScoreBoard = ({ players }) => (
   <div className={styles.scoreboard}>
     {players
       .filter(({ currentRound }) => currentRound === null)
@@ -29,3 +28,5 @@ export default ({ players }) => (
       .map((data) => <PlayerScoreTile key={data.name} {...data} />)}
   </div>
 );
+
+export default ScoreBoard;

client/src/components/screens/GameSummary/SummaryMap/SummaryMap.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import useMap from '../../../../hooks/useMap';
 import useMarkersFromGuesses from '../../../../hooks/useMarkersFromGuesses';
 import styles from './SummaryMap.module.css';
@@ -21,7 +21,7 @@ const RoundSelect = ({ rounds, selected, onSelect }) => (
   </div>
 );
 
-export default ({ players, coords }) => {
+const SummaryMap = ({ players, coords }) => {
   const rounds = Object.keys(coords).length;
   const singleRound = rounds === 1;
 
@@ -54,3 +54,5 @@ export default ({ players, coords }) => {
     </div>
   );
 };
+
+export default SummaryMap;

client/src/components/screens/HomePage/HomePage.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, forwardRef } from 'react';
 import { dispatch } from '../../../domain/gameStore';
 import { hasSavedGameInfo } from '../../../domain/localStorageMethods';
 import DelayedButton from '../../util/DelayedButton';
@@ -6,7 +6,7 @@ import GameCreationForm from '../../util/GameCreationForm';
 import styles from './HomePage.module.css';
 import { CSSTransition } from 'react-transition-group';
 
-const Rejoin = React.forwardRef((_, ref) => (
+const Rejoin = forwardRef((_, ref) => (
   <div className={styles.rejoinSection} ref={ref}>
     <span className={styles.rejoinLabel}>Looks like you were in a game before that you didn't finish!</span>
     <DelayedButton onEnd={() => dispatch.rejoinGame()} countDownFormatter={(rem) => `Rejoining in ${rem}s...`}>
@@ -15,7 +15,7 @@ const Rejoin = React.forwardRef((_, ref) => (
   </div>
 ));
 
-export default () => {
+const HomePage = () => {
   const [hasSavedInfo, setHasSavedInfo] = useState(false);
   useEffect(() => {
     hasSavedGameInfo().then(setHasSavedInfo)
@@ -30,4 +30,6 @@ export default () => {
       <GameCreationForm afterCreate={(gameId) => dispatch.goToLobby(gameId)} />
     </div>
   );
-}
+};
+
+export default HomePage;

client/src/components/screens/Lobby/JoinForm.jsx

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { dispatch, usePlayerName } from '../../../domain/gameStore';
 import styles from './Lobby.module.css';
 
-export default ({ onJoined }) => {
+const JoinForm = ({ onJoined }) => {
   const playerName = usePlayerName();
   const [ loading, setLoading ] = useState(false);
   const [ failed, setFailed ] = useState(false);
@@ -45,3 +45,5 @@ export default ({ onJoined }) => {
     </>
   );
 };
+
+export default JoinForm;

client/src/components/screens/Lobby/Lobby.jsx

@@ -1,5 +1,5 @@
 import ms from 'pretty-ms';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useGameId } from '../../../domain/gameStore';
 import { useGameConfig, usePlayers } from '../../../hooks/useGameInfo';
 import ClickToCopy from '../../util/ClickToCopy';
@@ -55,7 +55,7 @@ const PlayerList = ({ playerNames }) => (
   </div>
 );
 
-export default ({ onStart }) => {
+const Lobby = ({ onStart }) => {
   const gameId = useGameId();
   const players = usePlayers();
   const [ joined, setJoined ] = useState(false);
@@ -79,3 +79,5 @@ export default ({ onStart }) => {
     </div>
   );
 };
+
+export default Lobby;

client/src/components/screens/Lobby/StartGame.jsx

@@ -1,9 +1,8 @@
-import React from 'react';
 import { dispatch, usePlayerName } from '../../../domain/gameStore';
 import DelayedButton from '../../util/DelayedButton';
 import styles from './Lobby.module.css';
 
-export default () => {
+const StartGame = () => {
   const playerName = usePlayerName();
 
   return (
@@ -15,3 +14,5 @@ export default () => {
     </>
   );
 };
+
+export default StartGame;

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

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { dispatch, useCurrentRound, useLastRound } from '../../../domain/gameStore';
 import { usePlayers } from '../../../hooks/useGameInfo';
 import useMap from '../../../hooks/useMap';
@@ -28,7 +28,7 @@ const NextRoundButton = () => {
   );
 };
 
-export default () => {
+const RoundSummary = () => {
   // get the info about the last round
   const { roundNum, score, totalScore, targetPoint } = useLastRound();
 
@@ -61,3 +61,5 @@ export default () => {
     </div>
   );
 };
+
+export default RoundSummary;

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

@@ -1,7 +1,7 @@
 import useClickMarker from "../../../hooks/useClickMarker";
 import { checkScore } from "../../../domain/apiMethods";
 
-export default (mapRef, point1) => {
+const useClickToCheckScore = (mapRef, point1) => {
   // when the map is clicked, call the scoring API and update the marker's title
   useClickMarker(mapRef, async (point2, marker) => {
     const { score } = await checkScore(point1, point2);
@@ -11,3 +11,5 @@ export default (mapRef, point1) => {
     });
   });
 }
+
+export default useClickToCheckScore;

client/src/components/util/ApiInfo.jsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { getStatus } from "../../domain/apiMethods";
 
-export default () => {
+const ApiInfo = () => {
   const [data, setData] = useState(null);
   useEffect(() => { getStatus().then(setData) }, []);
   
@@ -14,3 +14,5 @@ export default () => {
     ? <p>API Version: {version}</p>
     : <p>Unable to communicate with API server! Error: {status}</p>
 }
+
+export default ApiInfo;

client/src/components/util/ClickToCopy/ClickToCopy.jsx

@@ -1,7 +1,7 @@
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import styles from './ClickToCopy.module.css';
 
-export default ({ text, children }) => {
+const ClickToCopy = ({ text, children }) => {
   const textareaRef = useRef(null);
   const [ copied, setCopied ] = useState(false);
   const onClick = () => {
@@ -20,3 +20,5 @@ export default ({ text, children }) => {
     </div>
   );
 };
+
+export default ClickToCopy;

client/src/components/util/GameCreationForm/GameCreationForm.jsx

@@ -1,5 +1,5 @@
 import ms from 'pretty-ms';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { createGame } from '../../../domain/apiMethods';
 import { MAP_CRUNCH, RANDOM_STREET_VIEW, URBAN } from '../../../domain/genMethods';
 import { FROZEN, NORMAL, TIME_BANK, RACE } from '../../../domain/ruleSets';
@@ -7,7 +7,7 @@ import Loading from '../Loading';
 import { Dropdown, DropdownGroup, Item } from './Dropdown';
 import styles from './GameCreationForm.module.css';
 
-export default ({ afterCreate }) => {
+const GameCreationForm = ({ afterCreate }) => {
   const [ loading, setLoading ] = useState(false);
   const [ timer, setTimer ] = useState(300);
   const [ rounds, setRounds ] = useState(5);
@@ -66,3 +66,5 @@ export default ({ afterCreate }) => {
     </div>
   );
 };
+
+export default GameCreationForm;

client/src/components/util/Loading/Loading.jsx

@@ -1,11 +1,12 @@
-import React from "react";
 import styles from './Loading.module.css'
 
-export default () => (
+const Loading = () => (
   <div className={styles.loading}>
     <div/>
     <div/>
     <div/>
     <div/>
   </div>
-)
+);
+
+export default Loading;

client/src/hooks/useClickMarker.jsx

@@ -1,7 +1,7 @@
 import { useRef, useEffect } from "react";
 /* global google */
 
-export default (map, onMove) => {
+const useClickMarker = (map, onMove) => {
   const marker = useRef(null);
   useEffect(() => {
     const listener = map.current.addListener("click", ({ latLng }) => {
@@ -14,4 +14,6 @@ export default (map, onMove) => {
 
     return () => { google.maps.event.removeListener(listener); }
   }, [map, onMove]);
-}
+};
+
+export default useClickMarker;

client/src/hooks/useMap.jsx

@@ -1,7 +1,7 @@
 import { useRef, useEffect } from "react";
 /* global google */
 
-export default (mapDiv, lat=25, lng=-25, zoom=0) => {
+const useMap = (mapDiv, lat=25, lng=-25, zoom=0) => {
   const map = useRef(null);
   useEffect(() => {
     if (map.current) {
@@ -18,4 +18,6 @@ export default (mapDiv, lat=25, lng=-25, zoom=0) => {
   }, [mapDiv, lat, lng, zoom]);
 
   return map;
-}
+};
+
+export default useMap;

client/src/hooks/useMarkersFromGuesses/useMarkersFromGuesses.jsx

@@ -4,7 +4,7 @@ import { makeQuestionMarker, makeFlagMarker, makeLine } from "./markers";
 import getColorGenerator from "./getColorGenerator";
 import { useRef } from "react";
 
-export default (mapRef, playersRaw, roundNum, targetPoint) => {
+const useMarkersFromGuesses = (mapRef, playersRaw, roundNum, targetPoint) => {
   // set up the flag at the target point
   useEffect(() => {
     if (targetPoint === null) {
@@ -48,3 +48,5 @@ export default (mapRef, playersRaw, roundNum, targetPoint) => {
     return () => drawings.forEach((drawing) => drawing.setMap(null));
   }, [players, mapRef, targetPoint, playerColors]);
 };
+
+export default useMarkersFromGuesses;

client/src/hooks/usePreventNavigation.jsx

@@ -5,7 +5,9 @@ const preventNav = evt => {
   evt.returnValue = '';
 }
 
-export default () => useEffect(() => {
+const usePreventNavigation = () => useEffect(() => {
   window.addEventListener("beforeunload", preventNav);
   return () => window.removeEventListener("beforeunload", preventNav);
 }, []);
+
+export default usePreventNavigation;