saving work on ch.11 form

src/components/ApplicationViews.js

@@ -4,6 +4,7 @@ import { EventList } from "./game/EventList.js"
 import { GameList } from "./game/GameList.js"
 import { GameForm } from "./game/GameForm.js"
 import { EventForm } from "./game/EventForm.js"
+import { UpdateEvent } from "./game/UpdateEvent.js"
 export const ApplicationViews = () => {
     return <>
         <main style={{
@@ -22,6 +23,9 @@ export const ApplicationViews = () => {
             <Route exact path = "/events/new" >
                 <EventForm />
             </Route>
+            <Route exact path= "/events/update/:id(\d+)">
+                <UpdateEvent />
+            </Route>
         </main>
     </>
 }

src/components/game/EventList.js

@@ -1,15 +1,20 @@
-import React, { useEffect, useState } from "react"
-import { getEvents } from "./EventManager.js"
+import React, { useEffect, useState, } from "react"
+import { getEvents, } from "./EventManager.js"
+import { UpdateEvent } from "./UpdateEvent.js"
+import { useHistory } from "react-router-dom/cjs/react-router-dom.min"
 
 export const EventList = (props) => {
     const [ events, setEvents ] = useState([])
+    const history = useHistory()
 
     useEffect(() => {
         getEvents().then(data => setEvents(data))
     }, [])
 
 return (
+    
     <article className="events">
+        
         <button 
             className="btn btn-2 btn-sep icon-create"
     onClick={
@@ -23,13 +28,24 @@ return (
     >Register New Event
 </button>
             {
-                events.map(event => {
-                    return <section key={`event--${event.id}`} className="event">
+                events.map(
+                    event => {
+                    return( 
+                    <>
+                    <section key={`event--${event.id}`} className="event">
+                        <button onClick={()=> history.push(`./events/update/${event.id}`) }>Update Event</button>
                         <div className="event__description">{event.description}</div>
                         <div className="event__date">The event is happening on {event.date} at {event.time}.</div>
                     </section>
-                })
-            }
+                    </>
+                    )
+                    
+                        }
+                    )
+                }
+            
+           
         </article>
+   
     )
 }

src/components/game/EventManager.js

@@ -5,4 +5,22 @@ 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 
+        ),
+        headers:{
+            "Authorization": `Token ${localStorage.getItem("lu_token")}`
+            }
+        }
+    )
+    .then(response => {response => {
+        return response.json()
+            }
+        }
+    )
+
 }

src/components/game/GameList.js

@@ -1,9 +1,11 @@
 import React, { useEffect, useState } from "react"
 import { getGames } from "./GameManager.js"
+import { UpdateEvent } from "./UpdateEvent.js"
 
 export const GameList = (props) => {
     const [ games, setGames ] = useState([])
 
+
     useEffect(() => {
         getGames().then(data => setGames(data))
         }, 
@@ -11,6 +13,8 @@ export const GameList = (props) => {
 )
 
     return (
+        <>
+
         <article className="games">
             <button className="btn btn-2 btn-sep icon-create"
     onClick={
@@ -31,5 +35,6 @@ export const GameList = (props) => {
                 })
             }
         </article>
+    </>
     )
 }

src/components/game/GameManager.js

@@ -7,6 +7,15 @@ export const getGames = () => {
         .then(response => response.json())
 }
 
+export const getGamesById = () => {
+    return fetch(`http://localhost:8000/games/${games.id}`, {
+        headers:{
+            "Authorization": `Token ${localStorage.getItem("lu_token")}`
+        }
+    })
+        .then(response => response.json())
+}
+
 export const createGame = (game) => {
     return fetch("http://localhost:8000/games", { 
         headers:{

src/components/game/UpdateEvent.js

@@ -1,9 +1,53 @@
-import react, { useState, useEffect, useHistory} from "react";
+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";
 
-export const UpdateEvent = () => {
-    const [intialvalue, setinitialvalue ] = useState("")
+export const UpdateEvent = (props) => {
+  const [gameList, setGameList] = useState([])
+  let { id } = useParams()
+ const history = useHistory()
+
+ 
+
+
+    useEffect(() => {
+      getGames().then(data => setGameList(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>
+            <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>
+            <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>
+            </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(
+    eventupdateform()
+  )  
 }
 
-const eventupdateform = () => {
-    
-}