From a304a1d02d2d0574d9b7983f8d9764fd37cba684 Mon Sep 17 00:00:00 2001
From: bytesparallel <jason.ross841@gmail.com>
Date: Thu, 17 Feb 2022 15:38:22 -0600
Subject: [PATCH] completed event form and have rough structure for game form
 complete

---
 src/components/ApplicationViews.js  |   4 +
 src/components/game/EventManager.js |  31 ++++++--
 src/components/game/GameList.js     |   3 +
 src/components/game/GameManager.js  |   4 +-
 src/components/game/UpdateEvent.js  |  98 +++++++++++++++++++----
 src/components/game/UpdateGame.js   | 117 ++++++++++++++++++++++++++++
 6 files changed, 232 insertions(+), 25 deletions(-)

diff --git a/src/components/ApplicationViews.js b/src/components/ApplicationViews.js
index 6827238..d9fba45 100644
--- a/src/components/ApplicationViews.js
+++ b/src/components/ApplicationViews.js
@@ -5,6 +5,7 @@ import { GameList } from "./game/GameList.js"
 import { GameForm } from "./game/GameForm.js"
 import { EventForm } from "./game/EventForm.js"
 import { UpdateEvent } from "./game/UpdateEvent.js"
+import { UpdateGame} from "./game/UpdateGame.js"
 export const ApplicationViews = () => {
     return <>
         <main style={{
@@ -26,6 +27,9 @@ export const ApplicationViews = () => {
             <Route exact path= "/events/update/:id(\d+)">
                 <UpdateEvent />
             </Route>
+            <Route exact path= "/games/update/:id(\d+)">
+                <UpdateGame />
+            </Route>
         </main>
     </>
 }
\ No newline at end of file
diff --git a/src/components/game/EventManager.js b/src/components/game/EventManager.js
index 4245cb0..41d190f 100644
--- a/src/components/game/EventManager.js
+++ b/src/components/game/EventManager.js
@@ -6,14 +6,24 @@ export const getEvents = () => {
     })
         .then(response => response.json())
 }
-export const putEvents = (evt) => {
-    return fetch(`http://localhost:8000/events/${evt.id}`, {
-        method: "PUT",
-        body: JSON.stringify(
-            evt 
-        ),
+
+export const getEventById = (id) => {
+    return fetch(`http://localhost:8000/events/${id}`, {
         headers:{
             "Authorization": `Token ${localStorage.getItem("lu_token")}`
+        }
+    })
+        .then(response => response.json())
+}
+export const putEvents = (editedEvent) => {
+    return fetch(`http://localhost:8000/events/${editedEvent.id}`, {
+        method: "PUT",
+        body: JSON.stringify(
+            editedEvent 
+        ),
+        headers:{
+            "Authorization": `Token ${localStorage.getItem("lu_token")}`,
+            "Content-Type": "Application/json"
             }
         }
     )
@@ -23,4 +33,13 @@ export const putEvents = (evt) => {
         }
     )
 
+}
+
+export const createEvent = (event) => {
+    return fetch("http://localhost:8000/events", { 
+        headers:{
+            "Authorization": `Token ${localStorage.getItem("lu_token")}`
+        }
+    })
+        .then(response => response.json())
 }
\ No newline at end of file
diff --git a/src/components/game/GameList.js b/src/components/game/GameList.js
index a18a04a..5fa53b8 100644
--- a/src/components/game/GameList.js
+++ b/src/components/game/GameList.js
@@ -1,9 +1,11 @@
 import React, { useEffect, useState } from "react"
 import { getGames } from "./GameManager.js"
+import {useHistory } from "react-router-dom"
 import { UpdateEvent } from "./UpdateEvent.js"
 
 export const GameList = (props) => {
     const [ games, setGames ] = useState([])
+    const history = useHistory()
 
 
     useEffect(() => {
@@ -28,6 +30,7 @@ export const GameList = (props) => {
             {
                 games.map(game => {
                     return <section key={`game--${game.id}`} className="game">
+                        <button onClick={()=> history.push(`./games/update/${game.id}`) }>Update Game</button>
                         <div className="game__title">{game.title} by {game.maker}</div>
                         <div className="game__players">{game.number_of_players} players needed</div>
                         <div className="game__skillLevel">Skill level is {game.skill_level}</div>
diff --git a/src/components/game/GameManager.js b/src/components/game/GameManager.js
index 290be82..3d81c95 100644
--- a/src/components/game/GameManager.js
+++ b/src/components/game/GameManager.js
@@ -7,8 +7,8 @@ export const getGames = () => {
         .then(response => response.json())
 }
 
-export const getGamesById = () => {
-    return fetch(`http://localhost:8000/games/${games.id}`, {
+export const getGameById = (id) => {
+    return fetch(`http://localhost:8000/games/${id}`, {
         headers:{
             "Authorization": `Token ${localStorage.getItem("lu_token")}`
         }
diff --git a/src/components/game/UpdateEvent.js b/src/components/game/UpdateEvent.js
index 1f28ea1..73a9b4c 100644
--- a/src/components/game/UpdateEvent.js
+++ b/src/components/game/UpdateEvent.js
@@ -2,48 +2,112 @@ import react, { useState, useEffect, } from "react";
 import { useParams, useHistory } from "react-router-dom/cjs/react-router-dom.min";
 import { getGames } from "./GameManager";
 import { putEvents } from "./EventManager";
+import { getEvents, getEventById } from "./EventManager";
 
+// getGames is imported to allow the select to display a list of games
 export const UpdateEvent = (props) => {
-  const [gameList, setGameList] = useState([])
+  const [ gameList, setGameList] = useState([])
+  const [ eventList, setEventList] = useState([])
+  const [ eventToEdit, setEventToEdit ] = useState({})
+  
+
   let { id } = useParams()
- const history = useHistory()
+  const history = useHistory()
 
  
 
 
-    useEffect(() => {
-      getGames().then(data => setGameList(data))
+useEffect(() => {
+  getGames().then(data => setGameList(data))
+  getEvents().then(data => setEventList(data))
+  getEventById(id).then(data => 
+    {
+      setEventToEdit(data)
+      
+    }
+    )
       }, 
   []
 )
 
+
     // Still need to write out this form and figure out controlled/uncontrolled input for it. Event pk value needs to be passed to the form as props if I'm understanding this correctly
     const eventupdateform = () => {
         return(
             <>
             <h2>Update Event</h2>
             <form id="editeventform">
-            <input type="text" id="event_id" disabled hidden value={id} ></input>
             <label for="description">Event Description</label> 
-            <input type="text" id="description"></input>
+            <input type="text" id="description" value={eventToEdit.description} onChange=
+            {
+              (e)=>
+              {
+                const copy = {...eventToEdit}
+                copy.description = e.target.value
+                setEventToEdit(copy)
+                }
+              }
+              >
+
+              </input>
             <label for="games">Select Game</label>
-            <select name="games" form_id="editeventform">
-              <option selected disabled hidden >Select a Game</option>
-              {gameList.map(
-                (gameList) => <option>{gameList.title}</option>
+            <select name="games" form_id="editeventform"
+            /* Set game via parsing the gameId as the indicator to select the correct game for the event*/
+            onChange={(e)=>
+              {
+                const copy = {...eventToEdit}
+                copy.game_id = e.target.value
+                setEventToEdit(copy)}
+              }>
+              <option value={""} selected disabled>Change Game from {eventToEdit.game?.title}</option>
+              
+              
+              
+              { gameList.map(
+                (gameList) => <option value={gameList.id}>{gameList.title}</option>
               )
             }
             </select>
-            <label for="eventdate">Updated Event Date</label>
-            <input type="date" id="eventdate"></input>
-            <label for="eventtime">Updated Event Time</label>
-            <input type="time" id="eventtime"></input>
-            <input type="submit" onClick={(evt)=> putEvents(evt)} onSubmit={()=> history.push("/")}></input>
+            <label for="date">Updated Event Date</label>
+            <input type="date" id="eventdate" value={eventToEdit.date}
+            onChange={
+            (e)=> 
+            {
+              const copy = {...eventToEdit}
+              copy.date = e.target.value
+              setEventToEdit(copy)
+            }
+          }
+            >
+
+            </input>
+            <label for="time">Updated Event Time</label>
+            <input type="time" id="time" value={eventToEdit.time} onChange={(e)=>
+            {
+              const copy = {...eventToEdit}
+              copy.time = e.target.value
+              setEventToEdit(copy)}
+            }
+              
+            >
+            </input>
+            <input type="submit" 
+            
+            onClick={
+              (e)=> 
+              {
+              e.preventDefault()
+              putEvents(eventToEdit)
+              history.push("/")
+              }
+            }
+              >
+
+              </input>
             </form>
         
             </>
-            // How to associate the event id with the form?
-    // Rough form completed, need to change input type to be controlled by React. Import putEvents and then worry about getting state to be controlled by React.
+            
         )
     }
   return(
diff --git a/src/components/game/UpdateGame.js b/src/components/game/UpdateGame.js
index e69de29..cc5a740 100644
--- a/src/components/game/UpdateGame.js
+++ b/src/components/game/UpdateGame.js
@@ -0,0 +1,117 @@
+import react, { useState, useEffect, } from "react";
+import { useParams, useHistory } from "react-router-dom/cjs/react-router-dom.min";
+import { getEvents } from "./EventManager";
+import { putGames } from "./GameManager";
+import { getGames, getGameById } from "./GameManager";
+
+// getGames is imported to allow the select to display a list of games
+export const UpdateGame = (props) => {
+  const [ gameList, setGameList] = useState([])
+  const [ eventList, setEventList] = useState([])
+  const [ gameToEdit, setGamegameToEdit ] = useState({})
+  
+
+  let { id } = useParams()
+  const history = useHistory()
+
+ 
+
+
+useEffect(() => {
+  getGames().then(data => setGameList(data))
+  getEvents().then(data => setEventList(data))
+  getGameById(id).then(data => 
+    {
+      setGamegameToEdit(data)
+      
+    }
+    )
+      }, 
+  []
+)
+
+
+    
+    const gameupdateform = () => {
+        return(
+            <>
+            <h2>Update Event</h2>
+            <form id="editeventform">
+            <label for="description">Event Description</label> 
+            <input type="text" id="description" value={gameToEdit.description} onChange=
+            {
+              (e)=>
+              {
+                const copy = {...gameToEdit}
+                copy.description = e.target.value
+                setGameToEdit(copy)
+                }
+              }
+              >
+
+              </input>
+            <label for="games">Select Game</label>
+            <select name="games" form_id="editeventform"
+            /* Set game via parsing the gameId as the indicator to select the correct game for the event*/
+            onChange={(e)=>
+              {
+                const copy = {...gameToEdit}
+                copy.game_id = e.target.value
+                setGameToEdit(copy)}
+              }>
+              <option disabled>Change Game from {gameToEdit.game?.title}</option>
+              
+              
+              
+              { gameList.map(
+                (gameList) => <option value={gameList.id}>{gameList.title}</option>
+              )
+            }
+            </select>
+            <label for="date">Updated Event Date</label>
+            <input type="date" id="eventdate" value={gameToEdit.date}
+            onChange={
+            (e)=> 
+            {
+              const copy = {...gameToEdit}
+              copy.date = e.target.value
+              setGameToEdit(copy)
+            }
+          }
+            >
+
+            </input>
+            <label for="time">Updated Event Time</label>
+            <input type="time" id="time" value={gameToEdit.time} onChange={(e)=>
+            {
+              const copy = {...gameToEdit}
+              copy.time = e.target.value
+              setGameToEdit(copy)}
+            }
+              
+            >
+            </input>
+            <input type="submit" 
+            
+            onClick={
+              (e)=> 
+              {
+              e.preventDefault()
+              putEvents(gameToEdit)
+              history.push("/")
+              }
+            }
+              >
+
+              </input>
+            </form>
+        
+            </>
+            
+        )
+    }
+  return(
+    gameupdateform()
+  )  
+}
+