From abf2c10bfa34af74887b2d5b39de8ac383d4dba2 Mon Sep 17 00:00:00 2001 From: Gisselle Garcia Date: Tue, 14 Mar 2023 20:29:26 -0700 Subject: [PATCH 01/46] Create POST request to database and create post event form --- client/src/components/addeventform.js | 69 +++++++++++++++++++++++++++ client/src/components/events.js | 48 +++++++++++++++---- server/server.js | 22 +++++++++ 3 files changed, 130 insertions(+), 9 deletions(-) create mode 100644 client/src/components/addeventform.js diff --git a/client/src/components/addeventform.js b/client/src/components/addeventform.js new file mode 100644 index 0000000..f9b30e5 --- /dev/null +++ b/client/src/components/addeventform.js @@ -0,0 +1,69 @@ +import { useState } from "react"; + +const AddEventForm = (props) => { + + //This is my state with the initial values empty + const [event, setEvent] = useState({ title: "", location: "", eventtime: "" }) + //This is my data + //{title: 'Women', location: 'Overland'. eventtime: "2023-03-29T07:00:00.000Z"} + + const handleTitleChange = (e) => { + e.preventDefault(); + let newTitle = e.target.value; + setEvent((event) => ({ ...event, title: newTitle })); + //console.log(event.title); + + } + const handleLocationChange = (e) => { + e.preventDefault(); + let newLocation = e.target.value; + setEvent((event) => ({ ...event, location: newLocation })); + //console.log(event.location); + } + const handleDateChange = (e) => { + e.preventDefault(); + let newDate = e.target.value; + setEvent((event) => ({ ...event, eventtime: newDate })); + //console.log(event.eventtime); + } + + const handleSubmit = (e) => { + e.preventDefault(); + setEvent(event); + props.postRequest(event); + } + + return ( +
+ + + + + + + +
+ ) + +} + +export default AddEventForm; diff --git a/client/src/components/events.js b/client/src/components/events.js index 02b5043..551dddb 100644 --- a/client/src/components/events.js +++ b/client/src/components/events.js @@ -1,27 +1,57 @@ import { useState, useEffect } from "react"; import EventCard from "./event"; import CardGroup from 'react-bootstrap/CardGroup'; - +import AddEventForm from "./addeventform"; function Events() { const [events, setEvents] = useState([]); - useEffect(() => { - fetch("http://localhost:8085/api/events") - .then((response) => response.json()) - .then(events => { - setEvents(events); - console.log('Events fetched...', events); - }); - }, []); + // useEffect(() => { + // fetch("http://localhost:8085/api/events") + // .then((response) => response.json()) + // .then(events => { + // setEvents(events); + // console.log('Events fetched...', events); + // }); + // }, []); + + const getRequest = () => { + fetch("http://localhost:8085/api/events") + .then((response) => response.json()) + .then(events => { + setEvents(events); + console.log('Events fetched...', events); + }); + } + + useEffect(() => {getRequest()}, []); + + const postRequest = (newEvent) =>{ + //console.log("From the parent", newEvent); + return fetch("http://localhost:8085/api/events", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(newEvent), + }) + .then((response) => { + return response.json(); + }) + .then((data) => { + //console.log("From the front", data); + setEvents((events) => [...events, data]) + }) + } return ( +
{events.map(event => )} + +
); } diff --git a/server/server.js b/server/server.js index 5d1e543..8435286 100644 --- a/server/server.js +++ b/server/server.js @@ -48,6 +48,28 @@ app.get('/api/events', async (req, res) =>{ // res.json(events); }) +// Create a route for the POST request + +app.post("/api/events", async (req, res) => { + //TO - DO - At the end => save this event to the db + //INSERT INTO events (title, location, eventtime) VALUES ('Women in Tech Techtonica Panel', 'Overland Park Convention Center', '2023-04-21') + try { + const newEvent = { + title: req.body.title, + location: req.body.location, + eventtime: req.body.eventtime + } + const result = await db.query('INSERT INTO events(title, location, eventtime) VALUES ($1, $2, $3) RETURNING *', [newEvent.title, newEvent.location, newEvent.eventtime]); + let response = result.rows[0]; + console.log(response); + res.json(response) + + } catch (e){ + console.log(error); + return res.status(400).json({error}); + } +}) + app.listen(PORT, () => console.log(`Hola! Server running on Port http://localhost:${PORT}`)); \ No newline at end of file From 08cd75c557e2efe291929b3b532d52d74bdeb19a Mon Sep 17 00:00:00 2001 From: Gisselle Garcia Date: Tue, 14 Mar 2023 20:56:56 -0700 Subject: [PATCH 02/46] Add delete button to component --- client/src/components/event.js | 2 ++ client/src/components/events.js | 17 +++++++++++++++++ 2 files changed, 19 insertions(+) diff --git a/client/src/components/event.js b/client/src/components/event.js index 251baa3..7654bfd 100644 --- a/client/src/components/event.js +++ b/client/src/components/event.js @@ -1,6 +1,7 @@ import Card from 'react-bootstrap/Card'; import Moment from "react-moment"; + const EventCard = (props) =>{ return( @@ -11,6 +12,7 @@ const EventCard = (props) =>{ {props.location} + )} diff --git a/client/src/components/events.js b/client/src/components/events.js index 551dddb..b16483a 100644 --- a/client/src/components/events.js +++ b/client/src/components/events.js @@ -4,6 +4,7 @@ import CardGroup from 'react-bootstrap/CardGroup'; import AddEventForm from "./addeventform"; + function Events() { const [events, setEvents] = useState([]); @@ -43,6 +44,22 @@ function Events() { }) } + // const deleteRequest = (whichEvent) =>{ + // return fetch("http://localhost:8085/api/events", { + // method: "DELETE", + // headers: { "Content-Type": "application/json" }, + // body: JSON.stringify(whichEvent), + // }) + // .then((response) => { + // return response.json(); + // }) + // .then((data) => { + // //console.log("From the front", data); + // setEvents((events) => [...events, data]) + // }) + // } + // } + return (
From f1d68ce679d98eff3aa34a51a72a8476edd1cfdd Mon Sep 17 00:00:00 2001 From: Gisselle Garcia Date: Tue, 14 Mar 2023 23:12:19 -0700 Subject: [PATCH 03/46] Started delete request functions in backend and frontend --- client/src/components/event.js | 13 ++++++++++++- client/src/components/events.js | 28 +++++++++++++--------------- server/server.js | 15 +++++++++++++++ 3 files changed, 40 insertions(+), 16 deletions(-) diff --git a/client/src/components/event.js b/client/src/components/event.js index 7654bfd..1665881 100644 --- a/client/src/components/event.js +++ b/client/src/components/event.js @@ -1,9 +1,11 @@ import Card from 'react-bootstrap/Card'; import Moment from "react-moment"; +import { useState } from 'react'; const EventCard = (props) =>{ + return( @@ -17,4 +19,13 @@ const EventCard = (props) =>{ )} -export default EventCard; \ No newline at end of file +export default EventCard; + + +//need value of card to delete (title, location, eventtime) +//get info from eventcard +//add to state +//pass state data to events.js +//make state equal to +//remove whole card +//take title etc and push data to function and delete \ No newline at end of file diff --git a/client/src/components/events.js b/client/src/components/events.js index b16483a..cd5eea0 100644 --- a/client/src/components/events.js +++ b/client/src/components/events.js @@ -44,21 +44,19 @@ function Events() { }) } - // const deleteRequest = (whichEvent) =>{ - // return fetch("http://localhost:8085/api/events", { - // method: "DELETE", - // headers: { "Content-Type": "application/json" }, - // body: JSON.stringify(whichEvent), - // }) - // .then((response) => { - // return response.json(); - // }) - // .then((data) => { - // //console.log("From the front", data); - // setEvents((events) => [...events, data]) - // }) - // } - // } + //testing delete request****************************************************************** + const deleteRequest = async id =>{ + try { + const deleteCard = await fetch(`http://localhost:8085/api/events/${id}`, { + method: "DELETE" + }); + setEvents(events.filter(events => events.id !== id)) + } catch(err) { + console.error(err.message); + } + } + + //************************************************************************* return (
diff --git a/server/server.js b/server/server.js index 8435286..ea55fb0 100644 --- a/server/server.js +++ b/server/server.js @@ -5,6 +5,7 @@ const cors = require('cors'); const path = require('path'); require('dotenv').config(); const db = require('../server/db/db-connection.js'); +const { Pool } = require('pg'); const app = express(); const PORT = 8085; @@ -72,4 +73,18 @@ app.post("/api/events", async (req, res) => { +app.delete("/api/events/:id", async(req,res) => { + try{ + const {id} = req.params; + const deleteEvent = await db.query("DELETE FROM events WHERE id= $1", [ + id + ]); + res.json("Event was deleted") + } catch(err) { + console.log(err.message); + } +}) + + + app.listen(PORT, () => console.log(`Hola! Server running on Port http://localhost:${PORT}`)); \ No newline at end of file From 1c6c127b040f827484cb3dd9921daf804fc5ba37 Mon Sep 17 00:00:00 2001 From: Gisselle Garcia Date: Wed, 15 Mar 2023 14:15:44 -0700 Subject: [PATCH 04/46] Add onClick function to delete button, not fully functioning --- client/src/components/event.js | 15 +++++++++++---- client/src/components/events.js | 4 ++-- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/client/src/components/event.js b/client/src/components/event.js index 1665881..f5555a0 100644 --- a/client/src/components/event.js +++ b/client/src/components/event.js @@ -1,20 +1,22 @@ import Card from 'react-bootstrap/Card'; import Moment from "react-moment"; -import { useState } from 'react'; const EventCard = (props) =>{ - + const deleteFunc = () => { + return props.deleteRequest; + } return( {props.title} Date: {!props.time ? "TBD" : {props.time}} + {props.id} {props.location} - + )} @@ -28,4 +30,9 @@ export default EventCard; //pass state data to events.js //make state equal to //remove whole card -//take title etc and push data to function and delete \ No newline at end of file +//take title etc and push data to function and delete + +/* +- click button (don't need to specify which one, we are working one instance at a time +- when delete button clicks, reference ID in events.js +*/ \ No newline at end of file diff --git a/client/src/components/events.js b/client/src/components/events.js index cd5eea0..fd16ffa 100644 --- a/client/src/components/events.js +++ b/client/src/components/events.js @@ -50,7 +50,7 @@ function Events() { const deleteCard = await fetch(`http://localhost:8085/api/events/${id}`, { method: "DELETE" }); - setEvents(events.filter(events => events.id !== id)) + setEvents(events.filter(event => event.id !== id)) } catch(err) { console.error(err.message); } @@ -62,7 +62,7 @@ function Events() {
{events.map(event => - + )} From 4718e5a1da40d39f4c7950eefff67096346d319b Mon Sep 17 00:00:00 2001 From: Gisselle Garcia Date: Wed, 15 Mar 2023 18:51:59 -0700 Subject: [PATCH 05/46] Make delete button function --- client/src/components/event.js | 22 ++-------------------- client/src/components/events.js | 30 +++++++++++++++++------------- server/server.js | 3 ++- 3 files changed, 21 insertions(+), 34 deletions(-) diff --git a/client/src/components/event.js b/client/src/components/event.js index f5555a0..a204568 100644 --- a/client/src/components/event.js +++ b/client/src/components/event.js @@ -2,37 +2,19 @@ import Card from 'react-bootstrap/Card'; import Moment from "react-moment"; -const EventCard = (props) =>{ - const deleteFunc = () => { - return props.deleteRequest; - } +const EventCard = (props) =>{ return( {props.title} Date: {!props.time ? "TBD" : {props.time}} - {props.id} {props.location} - + )} export default EventCard; - - -//need value of card to delete (title, location, eventtime) -//get info from eventcard -//add to state -//pass state data to events.js -//make state equal to -//remove whole card -//take title etc and push data to function and delete - -/* -- click button (don't need to specify which one, we are working one instance at a time -- when delete button clicks, reference ID in events.js -*/ \ No newline at end of file diff --git a/client/src/components/events.js b/client/src/components/events.js index fd16ffa..ef6e399 100644 --- a/client/src/components/events.js +++ b/client/src/components/events.js @@ -7,7 +7,7 @@ import AddEventForm from "./addeventform"; function Events() { const [events, setEvents] = useState([]); - + // useEffect(() => { // fetch("http://localhost:8085/api/events") // .then((response) => response.json()) @@ -44,19 +44,22 @@ function Events() { }) } - //testing delete request****************************************************************** - const deleteRequest = async id =>{ - try { - const deleteCard = await fetch(`http://localhost:8085/api/events/${id}`, { - method: "DELETE" - }); - setEvents(events.filter(event => event.id !== id)) - } catch(err) { - console.error(err.message); - } - } - //************************************************************************* + +//testing delete request +//parent knows the id of each card, events is all the events because of how we called get request +const deleteRequest = async (id) =>{ + try { + const deleteRequest = await fetch(`http://localhost:8085/api/events/${id}`, { + method: "DELETE" + }); + + setEvents(events.filter(events => events.id !== id)) + + } catch(err) { + console.error(err.message); + } +} return (
@@ -64,6 +67,7 @@ function Events() { {events.map(event => )} +
diff --git a/server/server.js b/server/server.js index ea55fb0..15d820d 100644 --- a/server/server.js +++ b/server/server.js @@ -72,7 +72,7 @@ app.post("/api/events", async (req, res) => { }) - +//$ is oart of the syntax, takes actual value of the id app.delete("/api/events/:id", async(req,res) => { try{ const {id} = req.params; @@ -80,6 +80,7 @@ app.delete("/api/events/:id", async(req,res) => { id ]); res.json("Event was deleted") + console.log("delete button is reaching backend") } catch(err) { console.log(err.message); } From 368b9fc7932f6483f3c210184ac73c827192a526 Mon Sep 17 00:00:00 2001 From: Gisselle Garcia Date: Thu, 16 Mar 2023 11:07:22 -0700 Subject: [PATCH 06/46] Make favorite button that console.logs and make route to edit favorite column in database --- client/public/index.html | 2 +- client/src/components/event.js | 5 ++++- client/src/components/events.js | 34 ++++++++++++++++++++++++++++++++- server/server.js | 16 +++++++++++++++- 4 files changed, 53 insertions(+), 4 deletions(-) diff --git a/client/public/index.html b/client/public/index.html index 8279ed9..11efd12 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -14,7 +14,7 @@ manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ --> - +