More refactoring, fixing a bug with return to start logic

client/src/components/Game.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import {
   PRE_GAME,
   PRE_ROUND,
@@ -7,14 +7,13 @@ import {
   POST_GAME,
   ERROR,
 } from "../domain/GameState";
-import PreGame from './screens/PreGame';
-import PreRound from './screens/PreRound';
+import { gameIdStore, gameStateStore } from "../domain/store";
+import PreGame from "./screens/PreGame";
+import PreRound from "./screens/PreRound";
 import GamePanel from "./screens/GamePanel";
-import RoundSummary from './screens/RoundSummary';
+import RoundSummary from "./screens/RoundSummary";
 import PlayerScores from "./screens/PlayerScores";
-import { gameIdStore, gameStateStore } from "../domain/store";
 import useObservable from "../hooks/useObservable";
-import { useEffect } from "react";
 
 const extractAndRemoveSearchParam = param => {
   const u = new URL(window.location.href);
@@ -34,8 +33,6 @@ const componentMap = {
 }
 
 const Game = () => {
-  const gameState = useObservable(gameStateStore);
-
   useEffect(() => {
     const joinCode = extractAndRemoveSearchParam("join");
     if (joinCode) {
@@ -52,7 +49,7 @@ const Game = () => {
     }
   }, [])
 
-  const Screen = componentMap[gameState];
+  const Screen = componentMap[useObservable(gameStateStore)];
 
   return <Screen />
 }

client/src/components/screens/PlayerScores/PlayerScores.jsx

@@ -7,7 +7,7 @@ import usePlayerScores from '../../../hooks/usePlayerScores';
 import ClickToCopy from '../../util/ClickToCopy';
 import useObservable from '../../../hooks/useObservable';
 import { gameIdStore, gameJoinedStore, gameStateStore } from '../../../domain/store';
-import { PRE_ROUND } from '../../../domain/GameState';
+import { PRE_GAME } from '../../../domain/GameState';
 import HeaderAndFooter from '../../util/HeaderAndFooter';
 
 const Container = styled.div`
@@ -56,7 +56,7 @@ export default () => {
   const scores = usePlayerScores();
   const onReturnToStart = () => {
     gameJoinedStore.set(false);
-    gameStateStore.set(PRE_ROUND);
+    gameStateStore.set(PRE_GAME);
   }
 
   if (!scores) {

client/src/components/util/ApiInfo/ApiInfo.jsx

@@ -1,15 +0,0 @@
-import React from "react";
-import useApiHealth from "./useApiHealth";
-
-export default () => {
-  const data = useApiHealth();
-  
-  if (data === null) {
-    return <p>Connecting to back-end...</p>
-  }
-  
-  const { status, version } = data;
-  return status === "healthy"
-    ? <p>API Version: {version}</p>
-    : <p>Unable to communicate with API server! Error: {status}</p>
-}

client/src/components/util/ApiInfo/index.js

@@ -1 +0,0 @@
-export { default } from './ApiInfo';

client/src/components/util/HeaderAndFooter.jsx

@@ -1,19 +1,32 @@
 import React from "react";
 import styled from "styled-components";
-import ApiInfo from "./ApiInfo";
+import useApiHealth from "../../hooks/useApiHealth";
+
+const ApiInfo = () => {
+  const data = useApiHealth();
+  
+  if (data === null) {
+    return <p>Connecting to back-end...</p>
+  }
+  
+  const { status, version } = data;
+  return status === "healthy"
+    ? <p>API Version: {version}</p>
+    : <p>Unable to communicate with API server! Error: {status}</p>
+}
 
 const Container = styled.div`
   display: block;
   text-align: center;
 `
 
-export default props => (
+export default ({ children}) => (
   <>
     <Container>
       <p>TerrAssumptions!</p>
       <hr/>
     </Container>
-    {props.children}
+    {children}
     <Container>
       <hr/>
       <ApiInfo/>

client/src/components/util/ApiInfo/useApiHealth.jsx → client/src/hooks/useApiHealth.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { getStatus } from "../../../domain/GGSHService";
+import { getStatus } from "../domain/GGSHService";
 
 export default () => {
   const [data, setData] = useState(null);