Reorganizing some util components and fixing a styling issue on the header and footer

client/src/App.css

@@ -13,10 +13,12 @@
 
 .header {
   display: block;
+  text-align: center;
 }
 
 .footer {
   display: block;
+  text-align: center;
 }
 
 .click-to-copy {
@@ -95,7 +97,7 @@
 }
 
 .new-game {
-  display: inline;
+  text-align: center;
 }
 
 .new-game__btn {

client/src/components/game.component/game.jsx

@@ -7,7 +7,7 @@ import {
   POST_GAME,
   ERROR,
 } from "./game-state.enum";
-import HeaderAndFooter from "../util/header-and-footer.component";
+import HeaderAndFooter from "./header-and-footer.component";
 import PreGame from '../screens/pre-game.component';
 import PreRound from '../screens/pre-round.component';
 import GamePanelContainer from "../screens/game-panel.component";

client/src/components/util/header-and-footer.component.jsx → client/src/components/game.component/header-and-footer.component.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import ApiInfo from "./api-info.component";
+import ApiInfo from "../util/api-info.component";
 
 export default props => (
   <>

client/src/components/screens/game-panel.component/guess-pane.component.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import ClickMarkerMap from "./click-marker-map.component";
-import RoundTimer from "./round-timer.component";
+import RoundTimer from "../../util/timer.component";
 
 export default ({
   roundSeconds,

client/src/components/util/api-info.component.jsx

@@ -1,33 +1,32 @@
-import React from "react";
-
+import React, { useState, useEffect } from "react";
 import { getStatus } from "../../services/ggsh.service";
 
-class ApiInfo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      loading: true,
-      version: null,
-      status: null,
-    }
-  }
-
-  async componentDidMount() {
-    const { version, status } = await getStatus();
-    this.setState({loading: false, version, status});
-  }
+const ApiInfo = () => {
+  const [{ loading, version, status }, setState] = useState({ loading: true, version: null, status: null });
 
-  render() {
-    if (this.state.loading) {
-      return <p>Connecting to back-end...</p>
+  useEffect(() => {
+    if (version && status) {
+      return;
     }
 
-    if (this.state.status !== "healthy") {
-      return <p>Unable to communicate with API server! Error: {this.state.status}</p>
+    const fetchStatus = async () => {
+      const { version, status } = await getStatus();
+      setState({ loading: false, version, status });
     }
 
-    return <p>API Version: {this.state.version}</p>
+    fetchStatus();
+  });
+  
+  if (loading) {
+    return <p>Connecting to back-end...</p>
+  }
+
+  if (status !== "healthy") {
+    return <p>Unable to communicate with API server! Error: {status}</p>
   }
+
+  return <p>API Version: {version}</p>
+  
 }
 
 export default ApiInfo;