completed event form and have rough structure for game form complete

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(