Ver código fonte

Guesses endpoint service function added

Kirk Trombley 5 anos atrás
pai
commit
defbbbb766
2 arquivos alterados com 47 adições e 4 exclusões
  1. 35 4
      ui/src/App.js
  2. 12 0
      ui/src/services/ggsh.service.js

+ 35 - 4
ui/src/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { getStatus, createGame, gameInfo, joinGame } from "./services/ggsh.service";
+import { getStatus, createGame, gameInfo, joinGame, getGuesses } from "./services/ggsh.service";
 import './App.css';
 
 class InfoComponent extends React.Component {
@@ -50,6 +50,33 @@ const GameInfo = ({game}) => {
   );
 }
 
+class GuessComp extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      guesses: null,
+    }
+  }
+
+  async componentDidMount() {
+    const { gameId, name } = this.props;
+    const guesses = await getGuesses(gameId, name);
+    this.setState({loading: false, guesses});
+  }
+
+  render() {
+    const { loading, guesses } = this.state;
+
+    if (loading) {
+      return <p>Loading...</p>
+    }
+
+    const { name } = this.props;
+    return <p>Guesses for {name}: {JSON.stringify(guesses)}</p>
+  }
+}
+
 class GameMakerComp extends React.Component {
   constructor(props) {
     super(props);
@@ -75,14 +102,18 @@ class GameMakerComp extends React.Component {
   }
 
   render() {
-    if (this.state.loading) {
+    const { loading, game } = this.state;
+
+    if (loading) {
       return <div><p>Loading...</p></div>
     }
 
-    if (this.state.game) {
+    if (game) {
       return (
         <div>
-          <GameInfo game={this.state.game}/>
+          <GameInfo game={game}/>
+          <p>Your Guesses:</p>
+          <GuessComp gameId={game.gameId} name="testing"/>
           <button onClick={() => this.handleGameJoin()}>Add second user!</button>
         </div>
       );

+ 12 - 0
ui/src/services/ggsh.service.js

@@ -47,3 +47,15 @@ export const joinGame = async (gameId, name) => {
         throw Error(res.statusText);
     }
 }
+
+export const getGuesses = async (gameId, name) => {
+    const res = await fetch(API_BASE + `/game/${gameId}/guesses`, {
+        headers: {
+            "Authorization": `Name ${name}`
+        },
+    });
+    if (!res.ok) {
+        throw Error(res.statusText);
+    }
+    return await res.json();
+}