saving copy-pasta from ch. 9

src/components/ApplicationViews.js

@@ -13,7 +13,10 @@ export const ApplicationViews = () => {
             </Route>
             <Route exact path="/">
                 <EventList />
-            </Route>
+            </Route> 
+            <Route exact path = "/games/new" >
+                <GameForm/>
+                </Route>
         </main>
     </>
 }

src/components/game/GameForm.js

@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from "react"
+import { useHistory } from 'react-router-dom'
+import { createGame, getGameTypes } from './GameManager.js'
+
+
+export const GameForm = () => {
+    const history = useHistory()
+    const [gameTypes, setGameTypes] = useState([])
+
+    /*
+        Since the input fields are bound to the values of
+        the properties of this state variable, you need to
+        provide some default values.
+    */
+    const [currentGame, setCurrentGame] = useState({
+        skillLevel: 1,
+        numberOfPlayers: 0,
+        title: "",
+        maker: "",
+        gameTypeId: 0
+    })
+
+    useEffect(() => {
+        // TODO: Get the game types, then set the state
+    }, [])
+
+    const changeGameState = (domEvent) => {
+        // TODO: Complete the onChange function
+    }
+
+    return (
+        <form className="gameForm">
+            <h2 className="gameForm__title">Register New Game</h2>
+            <fieldset>
+                <div className="form-group">
+                    <label htmlFor="title">Title: </label>
+                    <input type="text" name="title" required autoFocus className="form-control"
+                        value={currentGame.title}
+                        onChange={changeGameState}
+                    />
+                </div>
+            </fieldset>
+
+            {/* TODO: create the rest of the input fields */}
+
+            <button type="submit"
+                onClick={evt => {
+                    // Prevent form from being submitted
+                    evt.preventDefault()
+
+                    const game = {
+                        maker: currentGame.maker,
+                        title: currentGame.title,
+                        numberOfPlayers: parseInt(currentGame.numberOfPlayers),
+                        skillLevel: parseInt(currentGame.skillLevel),
+                        gameTypeId: parseInt(currentGame.gameTypeId)
+                    }
+
+                    // Send POST request to your API
+                    createGame(game)
+                        .then(() => history.push("/games"))
+                }}
+                className="btn btn-primary">Create</button>
+        </form>
+    )
+}

src/components/game/GameList.js

@@ -6,10 +6,21 @@ export const GameList = (props) => {
 
     useEffect(() => {
         getGames().then(data => setGames(data))
-    }, [])
+        }, 
+    []
+)
 
     return (
         <article className="games">
+            <button className="btn btn-2 btn-sep icon-create"
+    onClick={
+        () => {
+        history.push(
+            { pathname: "/games/new" }
+            )
+    }
+}
+>Register New Game</button>
             {
                 games.map(game => {
                     return <section key={`game--${game.id}`} className="game">

src/components/game/GameManager.js

@@ -5,4 +5,22 @@ export const getGames = () => {
         }
     })
         .then(response => response.json())
+}
+
+export const createGame = (game) => {
+    return fetch("http://localhost:8000/games", { 
+        headers:{
+            "Authorization": `Token ${localStorage.getItem("lu_token")}`
+        }
+    })
+        .then(response => response.json())
+}
+
+export const getGameTypes = () => {
+    return fetch("http://localhost:8000/gametypes", {
+        headers:{
+            "Authorization": `Token ${localStorage.getItem("lu_token")}`
+        }
+     })
+        .then(response => response.json())
 }