From 830780142dcd2bebbfbcf71ded80e86614f46846 Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Thu, 10 Feb 2022 13:45:45 -0600 Subject: [PATCH 1/7] saving copy-pasta from ch. 9 --- src/components/ApplicationViews.js | 5 ++- src/components/game/GameForm.js | 66 ++++++++++++++++++++++++++++++ src/components/game/GameList.js | 13 +++++- src/components/game/GameManager.js | 18 ++++++++ 4 files changed, 100 insertions(+), 2 deletions(-) create mode 100644 src/components/game/GameForm.js diff --git a/src/components/ApplicationViews.js b/src/components/ApplicationViews.js index 56d2011..69b9878 100644 --- a/src/components/ApplicationViews.js +++ b/src/components/ApplicationViews.js @@ -13,7 +13,10 @@ export const ApplicationViews = () => { - + + + + } \ No newline at end of file diff --git a/src/components/game/GameForm.js b/src/components/game/GameForm.js new file mode 100644 index 0000000..b127f91 --- /dev/null +++ b/src/components/game/GameForm.js @@ -0,0 +1,66 @@ +import React, { useState, useEffect } from "react" +import { useHistory } from 'react-router-dom' +import { createGame, getGameTypes } from './GameManager.js' + + +export const GameForm = () => { + const history = useHistory() + const [gameTypes, setGameTypes] = useState([]) + + /* + Since the input fields are bound to the values of + the properties of this state variable, you need to + provide some default values. + */ + const [currentGame, setCurrentGame] = useState({ + skillLevel: 1, + numberOfPlayers: 0, + title: "", + maker: "", + gameTypeId: 0 + }) + + useEffect(() => { + // TODO: Get the game types, then set the state + }, []) + + const changeGameState = (domEvent) => { + // TODO: Complete the onChange function + } + + return ( +
+

Register New Game

+
+
+ + +
+
+ + {/* TODO: create the rest of the input fields */} + + +
+ ) +} \ No newline at end of file diff --git a/src/components/game/GameList.js b/src/components/game/GameList.js index 7983eb0..f5c9a48 100644 --- a/src/components/game/GameList.js +++ b/src/components/game/GameList.js @@ -6,10 +6,21 @@ export const GameList = (props) => { useEffect(() => { getGames().then(data => setGames(data)) - }, []) + }, + [] +) return (
+ { games.map(game => { return
diff --git a/src/components/game/GameManager.js b/src/components/game/GameManager.js index 69fd552..572a835 100644 --- a/src/components/game/GameManager.js +++ b/src/components/game/GameManager.js @@ -5,4 +5,22 @@ export const getGames = () => { } }) .then(response => response.json()) +} + +export const createGame = (game) => { + return fetch("http://localhost:8000/games", { + headers:{ + "Authorization": `Token ${localStorage.getItem("lu_token")}` + } + }) + .then(response => response.json()) +} + +export const getGameTypes = () => { + return fetch("http://localhost:8000/gametypes", { + headers:{ + "Authorization": `Token ${localStorage.getItem("lu_token")}` + } + }) + .then(response => response.json()) } \ No newline at end of file -- 2.47.3 From 0a707dbbcaaae97fab171ced90e0a9292c026625 Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Thu, 10 Feb 2022 13:56:44 -0600 Subject: [PATCH 2/7] saving work on ch. 9 --- src/components/ApplicationViews.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/ApplicationViews.js b/src/components/ApplicationViews.js index 69b9878..b16872c 100644 --- a/src/components/ApplicationViews.js +++ b/src/components/ApplicationViews.js @@ -15,8 +15,11 @@ export const ApplicationViews = () => { - - + + + + + } \ No newline at end of file -- 2.47.3 From c6ca17650d1d322643353805ed571d23ffd3c29a Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Thu, 10 Feb 2022 13:56:52 -0600 Subject: [PATCH 3/7] saving work on ch. 9 --- src/components/game/EventForm.js | 67 ++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 src/components/game/EventForm.js diff --git a/src/components/game/EventForm.js b/src/components/game/EventForm.js new file mode 100644 index 0000000..b90a915 --- /dev/null +++ b/src/components/game/EventForm.js @@ -0,0 +1,67 @@ +import React, { useState, useEffect } from "react" +import { useHistory } from 'react-router-dom' +import { createEvent } from './EventManager' + + +export const EventForm = () => { + const history = useHistory() + const [eventTypes, setEventTypes] = useState([]) + + /* + Since the input fields are bound to the values of + the properties of this state variable, you need to + provide some default values. + */ + const [currentEvent, setCurrentEvent] = useState({ + skillLevel: 1, + Description: "", + date: "", + time: "", + game_id: 1, + organizer_id: 1 + }) + + useEffect(() => { + // TODO: Get the event types, then set the state + }, []) + + const changeEventState = (domEvent) => { + // TODO: Complete the onChange function + } + + return ( +
+

Register New Event

+
+
+ + +
+
+ + {/* TODO: create the rest of the input fields */} + + +
+ ) +} \ No newline at end of file -- 2.47.3 From f9e1ae1b8da0e6cbcb9ed731dbc45549300ebbe5 Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Fri, 11 Feb 2022 13:51:16 -0600 Subject: [PATCH 4/7] testing projectnotes functionality --- .gitignore | 2 ++ src/components/ApplicationViews.js | 2 ++ src/components/game/EventForm.js | 1 - src/components/game/EventList.js | 16 ++++++++++++++-- src/components/game/UpdateEvent.js | 9 +++++++++ src/components/game/UpdateGame.js | 0 6 files changed, 27 insertions(+), 3 deletions(-) create mode 100644 src/components/game/UpdateEvent.js create mode 100644 src/components/game/UpdateGame.js diff --git a/.gitignore b/.gitignore index 4d29575..74fdfbe 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +projectnotes.md* diff --git a/src/components/ApplicationViews.js b/src/components/ApplicationViews.js index b16872c..30114df 100644 --- a/src/components/ApplicationViews.js +++ b/src/components/ApplicationViews.js @@ -2,6 +2,8 @@ import React from "react" import { Route } from "react-router-dom" import { EventList } from "./game/EventList.js" import { GameList } from "./game/GameList.js" +import { GameForm } from "./game/GameForm.js" +import { EventForm } from "./game/EventForm.js" export const ApplicationViews = () => { return <>
{ diff --git a/src/components/game/EventList.js b/src/components/game/EventList.js index c65ad54..18b3667 100644 --- a/src/components/game/EventList.js +++ b/src/components/game/EventList.js @@ -8,8 +8,20 @@ export const EventList = (props) => { getEvents().then(data => setEvents(data)) }, []) - return ( -
+return ( +
+ { events.map(event => { return
diff --git a/src/components/game/UpdateEvent.js b/src/components/game/UpdateEvent.js new file mode 100644 index 0000000..4520dd1 --- /dev/null +++ b/src/components/game/UpdateEvent.js @@ -0,0 +1,9 @@ +import react, { useState, useEffect, useHistory} from "react"; + +export const UpdateEvent = () => { + const [intialvalue, setinitialvalue ] = useState("") +} + +const eventupdateform = () => { + +} \ No newline at end of file diff --git a/src/components/game/UpdateGame.js b/src/components/game/UpdateGame.js new file mode 100644 index 0000000..e69de29 -- 2.47.3 From 9eb8c6bfbd59a5dfecd57b7dd0924e40a9ee054d Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Tue, 15 Feb 2022 15:03:45 -0600 Subject: [PATCH 5/7] 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 <>
{ + + +
} \ 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 ( +
+ { - events.map(event => { - return
+ events.map( + event => { + return( + <> +
+
{event.description}
The event is happening on {event.date} at {event.time}.
- }) - } + + ) + + } + ) + } + +
+ ) } \ 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 ( + <> +
+ ) } \ 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( + <> +

Update Event

+
+ + + + + + + + + + putEvents(evt)} onSubmit={()=> history.push("/")}> +
+ + + // 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 -- 2.47.3 From a304a1d02d2d0574d9b7983f8d9764fd37cba684 Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Thu, 17 Feb 2022 15:38:22 -0600 Subject: [PATCH 6/7] 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 <>
{ + + +
} \ 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
+
{game.title} by {game.maker}
{game.number_of_players} players needed
Skill level is {game.skill_level}
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( <>

Update Event

- - + + { + const copy = {...eventToEdit} + copy.description = e.target.value + setEventToEdit(copy) + } + } + > + + - + { + const copy = {...eventToEdit} + copy.game_id = e.target.value + setEventToEdit(copy)} + }> + + + + + { gameList.map( + (gameList) => ) } - - - - - putEvents(evt)} onSubmit={()=> history.push("/")}> + + + { + const copy = {...eventToEdit} + copy.date = e.target.value + setEventToEdit(copy) + } + } + > + + + + + { + const copy = {...eventToEdit} + copy.time = e.target.value + setEventToEdit(copy)} + } + + > + + + { + e.preventDefault() + putEvents(eventToEdit) + history.push("/") + } + } + > + +
- // 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( + <> +

Update Event

+
+ + + { + const copy = {...gameToEdit} + copy.description = e.target.value + setGameToEdit(copy) + } + } + > + + + + + + + { + const copy = {...gameToEdit} + copy.date = e.target.value + setGameToEdit(copy) + } + } + > + + + + + { + const copy = {...gameToEdit} + copy.time = e.target.value + setGameToEdit(copy)} + } + + > + + + { + e.preventDefault() + putEvents(gameToEdit) + history.push("/") + } + } + > + + +
+ + + + ) + } + return( + gameupdateform() + ) +} + -- 2.47.3 From 77dfd1cabaf45a82b67c01cbe03d4e63f4489de8 Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Thu, 17 Feb 2022 21:55:27 -0600 Subject: [PATCH 7/7] saving changes from feb 17th --- src/components/game/GameManager.js | 14 ++++ src/components/game/UpdateGame.js | 109 +++++++++++++++-------------- 2 files changed, 69 insertions(+), 54 deletions(-) diff --git a/src/components/game/GameManager.js b/src/components/game/GameManager.js index 3d81c95..e26aed1 100644 --- a/src/components/game/GameManager.js +++ b/src/components/game/GameManager.js @@ -32,4 +32,18 @@ export const getGameTypes = () => { } }) .then(response => response.json()) +} + +export const putGames = (editedGame) => { + return fetch(`http://localhost:8000/games/${editedGame.id}`, { + method: "PUT", + body: JSON.stringify( + editedGame + ), + headers:{ + "Authorization": `Token ${localStorage.getItem("lu_token")}`, + "Content-Type": "Application/json" + } + } + ) } \ No newline at end of file diff --git a/src/components/game/UpdateGame.js b/src/components/game/UpdateGame.js index cc5a740..749870b 100644 --- a/src/components/game/UpdateGame.js +++ b/src/components/game/UpdateGame.js @@ -1,16 +1,12 @@ 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"; +import { getGames, getGameById, getGameTypes, putGames } 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({}) - - + const [ gameToEdit, setGameToEdit ] = useState({}) + const [gametypes, setGameTypes ] = useState([]) let { id } = useParams() const history = useHistory() @@ -19,10 +15,11 @@ export const UpdateGame = (props) => { useEffect(() => { getGames().then(data => setGameList(data)) - getEvents().then(data => setEventList(data)) + getGameTypes().then(data=> setGameTypes(data)) getGameById(id).then(data => { - setGamegameToEdit(data) + data.game_type = data.game_type.id + setGameToEdit(data) } ) @@ -35,75 +32,79 @@ useEffect(() => { const gameupdateform = () => { return( <> -

Update Event

-
- - Update Game + + + { const copy = {...gameToEdit} - copy.description = e.target.value + copy.title = e.target.value setGameToEdit(copy) } } - > + /> - - - + { + const copy = {...gameToEdit} + copy.maker = e.target.value + setGameToEdit(copy) + } + } /> + + - { - const copy = {...gameToEdit} - copy.game_id = e.target.value - setGameToEdit(copy)} - }> - - - - - { gameList.map( - (gameList) => - ) - } - - - { const copy = {...gameToEdit} - copy.date = e.target.value - setGameToEdit(copy) - } - } - > - - - - - { - const copy = {...gameToEdit} - copy.time = e.target.value + copy.number_of_players = e.target.value setGameToEdit(copy)} } - > - + /> + + + { + const copy = {...gameToEdit} + copy.skill_level = e.target.value + setGameToEdit(copy)} + } + + /> + + + { e.preventDefault() - putEvents(gameToEdit) + putGames(gameToEdit) history.push("/") } } - > + /> - +
-- 2.47.3