Add create post endpoint and check target to the makefile

webapp/src/client.js

@@ -53,6 +53,20 @@ export class Client {
       throw new Error(`${r.status} invalid response`)
     })
   }
+
+  createPostForGame(gameId, message) {
+    return fetch(`/api/games/${gameId}/post`, {
+      method: 'POST',
+      headers: tokenHeaders(),
+      body: JSON.stringify({ message })
+    }).then(r => {
+      if (r.status === 201) {
+        return r.json()
+      }
+      log.error(`Got invalid response when trying to create a post for game ${id}`)
+      throw new Error(`${r.status} invalid response`)
+    })
+  }
 }
 
 const client = new Client()

webapp/src/index.js

@@ -14,6 +14,7 @@ import { TokenContext } from './context'
 import Login from './pages/login'
 import Home from './pages/home'
 import Game from './pages/game'
+import Chat from './pages/chat'
 
 
 const Secure = ({children}) => {
@@ -33,11 +34,17 @@ const App = () => {
       <CssBaseline />
       <Switch>
         <TokenContext.Provider value={{ token, setToken }}>
-          <Route path="/login">
+          <Route exact path="/login">
             <Login />
           </Route>
 
-          <Route path="/game/:gameId">
+          <Route exact path="/game/:gameId/chat">
+            <Secure>
+              <Chat />
+            </Secure>
+          </Route>
+
+          <Route exact path="/game/:gameId">
             <Secure>
               <Game />
             </Secure>

webapp/src/pages/chat.js

@@ -0,0 +1,64 @@
+import { useState, useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+import {
+  Box,
+  TextField,
+  Button
+} from '@material-ui/core';
+
+import client from '../client'
+
+
+const Chat = () => {
+  const [posts, setPosts] = useState([])
+  const [game, setGame] = useState({})
+  const [message, setMessage] = useState("")
+  const { gameId } = useParams()
+
+  useEffect(() => {
+    client.getGame(gameId).then(game => setGame(game))
+  }, [gameId])
+
+  const handleChange = (e) => {
+    setMessage(e.target.value)
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+
+    client
+      .createPostForGameId(gameId, message)
+      .then(r => {
+        log.debug(`Message posted`)
+      })
+
+    // maybe disable sending and show a spinner instead
+    setMessage("")
+  }
+
+  return (
+    <div className="game-chat">
+      <h1>{game.name}</h1>
+      <h2>Chat</h2>
+
+      <form onSubmit={handleSubmit}>
+        <input
+          id="message"
+          type="text"
+          name="message"
+          placeholder="Message..."
+          value={message}
+          onChange={handleChange}
+        />
+        <Button
+          type="submit"
+          variant="contained"
+          color="primary"
+          onClick={handleSubmit}
+        >Send</Button>
+      </form>
+    </div>
+  )
+}
+
+export default Chat

webapp/src/pages/game.js

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams, Link } from 'react-router-dom'
 
 import client from '../client'
 
@@ -13,8 +13,10 @@ const Game = () => {
   }, [gameId])
 
   return (
-    <div class="game">
+    <div className="game">
       <h1>{game.name}</h1>
+
+      <Link to={ `/game/${gameId}/chat` }><p>Game chat</p></Link>
     </div>
   )
 }