From e14bc7465fd7c2c520edd76d62687b06e6c74daf Mon Sep 17 00:00:00 2001
From: Joni Laukka <joni.laukka.overflow@gmail.com>
Date: Fri, 12 Jul 2019 11:17:10 +0300
Subject: [PATCH] game selection update
---
src/App.js | 25 ++++++++++++++++---------
src/components/GameList.js | 29 +----------------------------
src/components/GameSelection.js | 30 +++++++++++++++++++++++++++---
src/components/GameView.js | 4 ++++
src/components/RegisterForm.js | 2 +-
5 files changed, 49 insertions(+), 41 deletions(-)
diff --git a/src/App.js b/src/App.js
index 2c4bf88..e6ef9a1 100644
--- a/src/App.js
+++ b/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 ----------------------- */}
diff --git a/src/components/GameList.js b/src/components/GameList.js
index 5525a95..f756ade 100644
--- a/src/components/GameList.js
+++ b/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}
diff --git a/src/components/GameSelection.js b/src/components/GameSelection.js
index bef2d4f..db948cd 100644
--- a/src/components/GameSelection.js
+++ b/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>
);
}
diff --git a/src/components/GameView.js b/src/components/GameView.js
index 7fb7062..67bdca2 100644
--- a/src/components/GameView.js
+++ b/src/components/GameView.js
@@ -1,5 +1,6 @@
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}
diff --git a/src/components/RegisterForm.js b/src/components/RegisterForm.js
index 19569f6..b1357b7 100644
--- a/src/components/RegisterForm.js
+++ b/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>
--
GitLab