Archived
118 lines
3.3 KiB
JavaScript
118 lines
3.3 KiB
JavaScript
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 [ eventList, setEventList] = useState([])
|
|
const [ eventToEdit, setEventToEdit ] = useState({})
|
|
|
|
|
|
let { id } = useParams()
|
|
const history = useHistory()
|
|
|
|
|
|
|
|
|
|
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">
|
|
<label for="description">Event Description</label>
|
|
<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"
|
|
/* 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="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>
|
|
|
|
</>
|
|
|
|
)
|
|
}
|
|
return(
|
|
eventupdateform()
|
|
)
|
|
}
|
|
|