Join game service function

ui/src/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { getStatus, createGame, gameInfo } from "./services/ggsh.service";
+import { getStatus, createGame, gameInfo, joinGame } from "./services/ggsh.service";
 import './App.css';
 
 class InfoComponent extends React.Component {
@@ -59,22 +59,35 @@ class GameMakerComp extends React.Component {
     }
   }
 
-  async onClick() {
+  async handleGameCreate() {
     this.setState({loading: true});
     const gameId = await createGame("testing", 300);
     const game = await gameInfo(gameId);
     this.setState({loading: false, game});
   }
 
+  async handleGameJoin() {
+    this.setState({loading: true});
+    const { gameId } = this.state.game
+    await joinGame(gameId, "testing2");
+    const game = await gameInfo(gameId);
+    this.setState({loading: false, game});
+  }
+
   render() {
     if (this.state.loading) {
       return <div><p>Loading...</p></div>
     }
 
     if (this.state.game) {
-      return <div><GameInfo game={this.state.game}/></div>
+      return (
+        <div>
+          <GameInfo game={this.state.game}/>
+          <button onClick={() => this.handleGameJoin()}>Add second user!</button>
+        </div>
+      );
     }
-    return <div><button onClick={() => this.onClick()}>Create Game!</button></div>
+    return <div><button onClick={() => this.handleGameCreate()}>Create Game!</button></div>
   }
 }
 

ui/src/services/ggsh.service.js

@@ -34,4 +34,16 @@ export const gameInfo = async (gameId) => {
         throw Error(res.statusText);
     }
     return await res.json();
-}
+}
+
+export const joinGame = async (gameId, name) => {
+    const res = await fetch(API_BASE + `/game/${gameId}/join`, {
+        method: "POST",
+        headers: {
+            "Authorization": `Name ${name}`
+        },
+    });
+    if (!res.ok) {
+        throw Error(res.statusText);
+    }
+}