From 830780142dcd2bebbfbcf71ded80e86614f46846 Mon Sep 17 00:00:00 2001
From: bytesparallel <jason.ross841@gmail.com>
Date: Thu, 10 Feb 2022 13:45:45 -0600
Subject: [PATCH] saving copy-pasta from ch. 9

---
 src/components/ApplicationViews.js |  5 ++-
 src/components/game/GameForm.js    | 66 ++++++++++++++++++++++++++++++
 src/components/game/GameList.js    | 13 +++++-
 src/components/game/GameManager.js | 18 ++++++++
 4 files changed, 100 insertions(+), 2 deletions(-)
 create mode 100644 src/components/game/GameForm.js

diff --git a/src/components/ApplicationViews.js b/src/components/ApplicationViews.js
index 56d2011..69b9878 100644
--- a/src/components/ApplicationViews.js
+++ b/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>
     </>
 }
\ No newline at end of file
diff --git a/src/components/game/GameForm.js b/src/components/game/GameForm.js
new file mode 100644
index 0000000..b127f91
--- /dev/null
+++ b/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>
+    )
+}
\ No newline at end of file
diff --git a/src/components/game/GameList.js b/src/components/game/GameList.js
index 7983eb0..f5c9a48 100644
--- a/src/components/game/GameList.js
+++ b/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">
diff --git a/src/components/game/GameManager.js b/src/components/game/GameManager.js
index 69fd552..572a835 100644
--- a/src/components/game/GameManager.js
+++ b/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())
 }
\ No newline at end of file