Moving all of the routing logic out of Game and into App

client/src/App.js

@@ -1,6 +1,21 @@
 import React from 'react';
 import styled from 'styled-components';
-import Game from "./components/Game";
+import {
+  PRE_GAME,
+  PRE_ROUND,
+  IN_ROUND,
+  POST_ROUND,
+  POST_GAME,
+  ERROR,
+} from "./domain/GameState";
+import { useGameState } from './domain/gameStore';
+import useDirectGameLinks from './hooks/useDirectGameLinks';
+import ApiInfo from './components/util/ApiInfo';
+import HomePage from "./components/screens/HomePage";
+import Lobby from "./components/screens/Lobby";
+import GamePanel from "./components/screens/GamePanel";
+import RoundSummary from "./components/screens/RoundSummary";
+import PlayerScores from "./components/screens/PlayerScores";
 
 const Wrapper = styled.div`
   height: 100%;
@@ -10,10 +25,52 @@ const Wrapper = styled.div`
   justify-content: space-between;
 `
 
-export default () => (
-  <React.StrictMode>
-    <Wrapper>
-      <Game/>
-    </Wrapper>
-  </React.StrictMode>
-);
+const BlockContainer = styled.div`
+  display: block;
+  text-align: center;
+`
+
+const screenMap = {
+  [PRE_GAME]: HomePage,
+  [PRE_ROUND]: Lobby,
+  [IN_ROUND]: GamePanel,
+  [POST_ROUND]: RoundSummary,
+  [POST_GAME]: PlayerScores,
+  [ERROR]: () => <p>Application encountered unrecoverable error, please refresh the page.</p>,
+}
+
+const needsHeaderFooter = {
+  [PRE_GAME]: true,
+  [PRE_ROUND]: true,
+  [IN_ROUND]: false,
+  [POST_ROUND]: false,
+  [POST_GAME]: true,
+  [ERROR]: true,
+}
+
+export default () => {
+  const gameState = useGameState();
+  useDirectGameLinks();
+  const Screen = screenMap[gameState];
+  const needsHF = needsHeaderFooter[gameState];
+  
+  return (
+    <React.StrictMode>
+      <Wrapper>
+        { needsHF && (
+          <BlockContainer>
+            <p>TerrAssumptions!</p>
+            <hr/>
+          </BlockContainer>
+        ) }
+        <Screen />
+        { needsHF && (
+          <BlockContainer>
+            <hr/>
+            <ApiInfo/>
+          </BlockContainer>
+        ) }
+      </Wrapper>
+    </React.StrictMode>
+  )
+};

client/src/components/Game.jsx

@@ -1,73 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import {
-  PRE_GAME,
-  PRE_ROUND,
-  IN_ROUND,
-  POST_ROUND,
-  POST_GAME,
-  ERROR,
-} from "../domain/GameState";
-import HomePage from "./screens/HomePage";
-import Lobby from "./screens/Lobby";
-import GamePanel from "./screens/GamePanel";
-import RoundSummary from "./screens/RoundSummary";
-import PlayerScores from "./screens/PlayerScores";
-import { useGameState, dispatch } from "../domain/gameStore";
-import useDirectGameLinks from "../hooks/useDirectGameLinks";
-import ApiInfo from "./util/ApiInfo";
-
-const componentMap = {
-  [PRE_GAME]: HomePage,
-  [PRE_ROUND]: Lobby,
-  [IN_ROUND]: GamePanel,
-  [POST_ROUND]: RoundSummary,
-  [POST_GAME]: PlayerScores,
-  [ERROR]: () => <p>Application encountered unrecoverable error, please refresh the page.</p>,
-}
-
-const needsHeaderFooter = {
-  [PRE_GAME]: true,
-  [PRE_ROUND]: true,
-  [IN_ROUND]: false,
-  [POST_ROUND]: false,
-  [POST_GAME]: true,
-  [ERROR]: true,
-}
-
-const paramRouter = {
-  join: dispatch.goToLobby,
-  summary: dispatch.goToSummary,
-}
-
-const Container = styled.div`
-  display: block;
-  text-align: center;
-`
-
-const Header = () => (
-  <Container>
-    <p>TerrAssumptions!</p>
-    <hr/>
-  </Container>
-)
-
-const Footer = () => (
-  <Container>
-    <hr/>
-    <ApiInfo/>
-  </Container>
-)
-
-const Game = () => {
-  const gameState = useGameState();
-
-  useDirectGameLinks(paramRouter);
-
-  const Screen = componentMap[gameState];
-  return needsHeaderFooter[gameState]
-    ? <><Header/><Screen/><Footer/></>
-    : <Screen/>;
-}
-
-export default Game;

client/src/hooks/useDirectGameLinks.jsx

@@ -1,6 +1,12 @@
 import { useEffect } from "react";
+import { dispatch } from "../domain/gameStore";
 
-export default (paramRouter) => {
+const paramRouter = {
+  join: dispatch.goToLobby,
+  summary: dispatch.goToSummary,
+}
+
+export default () => {
   useEffect(() => {
     const url = new URL(window.location.href);
     for (let [param, value] of url.searchParams.entries()) {
@@ -12,5 +18,5 @@ export default (paramRouter) => {
         break;
       }
     }
-  }, [paramRouter]);
+  }, []);
 }