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 = () => {
-
+
+
+
+
>
}
\ 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 (
+
+ )
+}
\ 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 (
+
{
games.map(game => {
return
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