game selection update

src/App.js

@@ -88,6 +88,10 @@ class App extends Component {
             authenticateComplete: true
           });
         });
+    } else {
+      this.setState({
+        authenticateComplete: true
+      });
     }
   }
 
@@ -138,7 +142,7 @@ class App extends Component {
   render() {
     // TODO: think better solution to wait for authenticator
     if (!this.state.authenticateComplete) {
-      return false;
+      return <div>Authenticating...</div>;
     }
 
     return (
@@ -146,14 +150,17 @@ class App extends Component {
         <div>
           {/* Debug Sign out button ------------------------ */}
           {this.state.logged && (
-            <button
-              onClick={() => {
-                sessionStorage.setItem("token", "");
-                this.setState({ logged: false });
-              }}
-            >
-              Sign out
-            </button>
+            <div>
+              <label>Logged in: {sessionStorage.getItem("name")}</label>
+              <button
+                onClick={() => {
+                  sessionStorage.setItem("token", "");
+                  this.setState({ logged: false });
+                }}
+              >
+                Sign out
+              </button>
+            </div>
           )}
           {/* Debug End ----------------------- */}
 

src/components/GameList.js

@@ -2,35 +2,8 @@ import React, { Fragment } from "react";
 import GameCard from "./GameCard";
 
 class GameList extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      games: []
-    };
-  }
-
-  componentDidMount() {
-    this.getGames();
-  }
-
-  getGames() {
-    fetch(`${process.env.REACT_APP_API_URL}/game/listgames`)
-      .then(response => response.json())
-      .then(games => {
-        this.setState({
-          games: games,
-          selectedGame: games !== undefined && games[0].id
-        });
-        // taking the initialized gameID to UserMap.js (GameList.js -> Header.js -> App.js -> UserMap.js)
-        this.props.handleGameChange(games[0].id);
-      })
-      .catch(error => {
-        console.log(error);
-      });
-  }
-
   render() {
-    let gamelistItems = this.state.games.map(game => {
+    let gamelistItems = this.props.games.map(game => {
       return (
         <GameCard
           key={game.id}

src/components/GameSelection.js

@@ -4,9 +4,29 @@ import NewGameForm from "./NewGameForm";
 
 export default class GameSelection extends React.Component {
   state = {
-    newGameForm: false
+    newGameForm: false,
+    games: []
   };
 
+  componentDidMount() {
+    this.getGames();
+  }
+
+  getGames() {
+    fetch(`${process.env.REACT_APP_API_URL}/game/listgames`)
+      .then(response => response.json())
+      .then(games => {
+        this.setState({
+          games: games
+        });
+        // taking the initialized gameID to UserMap.js (GameList.js -> Header.js -> App.js -> UserMap.js)
+        //this.props.handleGameChange(games[0].id);
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  }
+
   render() {
     return (
       <div>
@@ -22,10 +42,14 @@ export default class GameSelection extends React.Component {
           <NewGameForm
             view=""
             handleState={this.handleState}
-            toggleView={() => this.setState({ newGameForm: false })}
+            toggleView={() =>
+              this.setState({ newGameForm: false }, () => {
+                this.getGames();
+              })
+            }
           />
         )}
-        <GameList />
+        <GameList games={this.state.games} />
       </div>
     );
   }

src/components/GameView.js

 import React from "react";
 import UserMap from "./UserMap";
+import { BrowserRouter as Router, Link } from "react-router-dom";
 
 export default class GameView extends React.Component {
   state = {
@@ -27,6 +28,9 @@ export default class GameView extends React.Component {
     return (
       <div>
         <div>{this.state.gameId}</div>
+        <Link to="/">
+          <button>Game selection</button>
+        </Link>
         <UserMap
           position={initialPosition}
           zoom={this.state.zoom}

src/components/RegisterForm.js

@@ -122,7 +122,7 @@ export class RegisterForm extends React.Component {
             <h2>{this.state.errorMsg}</h2>
           </form>
           <Link to="/">
-            <button>Back</button>
+            <button>Login</button>
           </Link>
         </div>
       </div>