Game state buttons wip

src/components/GameStateButtons.js

+import React, { Fragment } from "react";
+
+export default class GameStateButtons extends React.Component {
+  state = {
+    gameState: this.props.gameState // CREATED,STARTED,PAUSED,ENDED,ONGOING
+  };
+
+  handleStart = e => {
+    let token = sessionStorage.getItem("token");
+    fetch(
+      `${process.env.REACT_APP_API_URL}/game/edit-state/${this.props.gameId}`,
+      {
+        method: "PUT",
+        headers: {
+          Authorization: "Bearer " + token,
+          Accept: "application/json",
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          id: this.props.gameId,
+          state: "STARTED"
+        })
+      }
+    )
+      .then(res => {
+        if (res.ok) {
+          return res.json();
+        } else {
+          throw Error(res.statusText);
+        }
+      })
+      .then(res => {
+        alert(`Game state changed to "STARTED"`);
+        this.setState({ gameState: "STARTED" });
+      })
+      .catch(error => console.log(error));
+  };
+
+  handlePause = e => {
+    this.setState({ gameState: "PAUSED" });
+  };
+
+  handleStop = e => {
+    this.setState({ gameState: "STOPPED" });
+  };
+
+  render() {
+    if (this.state.gameState === "CREATED") {
+      return <button onClick={this.handleStart}>Start</button>;
+    }
+
+    if (this.state.gameState === "STARTED") {
+      return (
+        <Fragment>
+          <button onClick={this.handlePause}>Pause</button>
+          <button onClick={this.handleStop}>Stop</button>
+        </Fragment>
+      );
+    }
+
+    if (this.state.gameState === "PAUSED") {
+      return (
+        <Fragment>
+          <button onClick={this.handleStart}>Continue</button>
+          <button onClick={this.handleStop}>Stop</button>
+        </Fragment>
+      );
+    }
+
+    if (this.state.gameState === "STOPPED") {
+      return "The game has ended";
+    }
+
+    return false;
+  }
+}

src/components/GameView.js

@@ -6,6 +6,7 @@ import EditGameForm from "./EditGameForm";
 import JoinGameForm from "./JoinGameForm";
 import PlayerlistView from "./PlayerlistView";
 import NotificationView from "./NotificationView";
+import GameStateButtons from "./GameStateButtons";
 
 export default class GameView extends React.Component {
   state = {
@@ -22,7 +23,6 @@ export default class GameView extends React.Component {
     let gameId = new URL(window.location.href).searchParams.get("id");
     let token = sessionStorage.getItem("token");
 
-    console.log(gameId);
     fetch(`${process.env.REACT_APP_API_URL}/game/${gameId}`)
       .then(res => {
         if (!res.ok) {
@@ -142,6 +142,9 @@ export default class GameView extends React.Component {
                 Leave Faction
               </button>
             )}
+            {this.state.role === "admin" && (
+              <GameStateButtons gameState={this.state.gameInfo.state} />
+            )}
             <UserMap
               position={initialPosition}
               zoom={this.state.zoom}