From 9eb8c6bfbd59a5dfecd57b7dd0924e40a9ee054d Mon Sep 17 00:00:00 2001
From: bytesparallel <jason.ross841@gmail.com>
Date: Tue, 15 Feb 2022 15:03:45 -0600
Subject: [PATCH] saving work on ch.11 form

---
 src/components/ApplicationViews.js  |  4 +++
 src/components/game/EventList.js    | 28 +++++++++++----
 src/components/game/EventManager.js | 18 ++++++++++
 src/components/game/GameList.js     |  5 +++
 src/components/game/GameManager.js  |  9 +++++
 src/components/game/UpdateEvent.js  | 56 +++++++++++++++++++++++++----
 6 files changed, 108 insertions(+), 12 deletions(-)

diff --git a/src/components/ApplicationViews.js b/src/components/ApplicationViews.js
index 30114df..6827238 100644
--- a/src/components/ApplicationViews.js
+++ b/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>
     </>
 }
\ No newline at end of file
diff --git a/src/components/game/EventList.js b/src/components/game/EventList.js
index 18b3667..70b15f8 100644
--- a/src/components/game/EventList.js
+++ b/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>
+   
     )
 }
\ No newline at end of file
diff --git a/src/components/game/EventManager.js b/src/components/game/EventManager.js
index 86daf5f..4245cb0 100644
--- a/src/components/game/EventManager.js
+++ b/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()
+            }
+        }
+    )
+
 }
\ No newline at end of file
diff --git a/src/components/game/GameList.js b/src/components/game/GameList.js
index f5c9a48..a18a04a 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 { 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>
+    </>
     )
 }
\ No newline at end of file
diff --git a/src/components/game/GameManager.js b/src/components/game/GameManager.js
index 572a835..290be82 100644
--- a/src/components/game/GameManager.js
+++ b/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:{
diff --git a/src/components/game/UpdateEvent.js b/src/components/game/UpdateEvent.js
index 4520dd1..1f28ea1 100644
--- a/src/components/game/UpdateEvent.js
+++ b/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 = () => {
-    
-}
\ No newline at end of file