From e43d0491864abc077246c95c544b4135f18ec101 Mon Sep 17 00:00:00 2001 From: QuinnStraus <79025802+QuinnStraus@users.noreply.github.com> Date: Sat, 21 Oct 2023 19:39:06 -0400 Subject: [PATCH 1/6] Clean up firestore connections and fix card delete --- frontend/src/Leadership.js | 25 +------- frontend/src/Parties.js | 25 ++------ frontend/src/components/Admin.jsx | 59 ++++-------------- frontend/src/components/Events.jsx | 20 ++---- frontend/src/components/Home.jsx | 61 +++++-------------- .../Modifiable/ModifiableAddEventCard.jsx | 11 +--- .../Modifiable/ModifiableAddLeadCard.jsx | 17 ++---- .../Modifiable/ModifiableAddPartiesCard.jsx | 8 +-- .../Modifiable/ModifiableEventCard.jsx | 54 +++++----------- .../Modifiable/ModifiableLeadCard.jsx | 39 +++++------- .../Modifiable/ModifiablePartiesCard.jsx | 44 +++++-------- frontend/src/firebase/hooks/useCollection.js | 21 +++++++ .../src/firebase/hooks/useModifiableCard.js | 29 +++++++++ 13 files changed, 147 insertions(+), 266 deletions(-) create mode 100644 frontend/src/firebase/hooks/useCollection.js create mode 100644 frontend/src/firebase/hooks/useModifiableCard.js diff --git a/frontend/src/Leadership.js b/frontend/src/Leadership.js index 903623c..c9b60e5 100644 --- a/frontend/src/Leadership.js +++ b/frontend/src/Leadership.js @@ -1,17 +1,9 @@ import './App.css'; import Bio from "./components/Bio"; -import {useEffect, useState} from "react"; -import {useFirebase} from "./firebase"; +import { useCollection } from './firebase/hooks/useCollection'; function Leadership() { - const [leader_firebase, setLeader] = useState([]); - const firebase = useFirebase(); - useEffect(() => { - async function fetch() { - setLeader(await firebase.getAllGen("leadership")); - } - fetch(); - }, [firebase]); + const leaders = useCollection("leadership"); return (
@@ -20,18 +12,7 @@ function Leadership() {
- {leader_firebase - .map((leader, i) => { - return ( - - ); - })} + {leaders.map((leader, i) => ())}
diff --git a/frontend/src/Parties.js b/frontend/src/Parties.js index ac2fff2..c652738 100644 --- a/frontend/src/Parties.js +++ b/frontend/src/Parties.js @@ -1,17 +1,10 @@ import './App.css'; import Parties from "./components/Parties"; -import {useEffect, useState} from "react"; -import { useFirebase } from "./firebase"; +import { useCollection } from './firebase/hooks/useCollection'; function Parties_page() { - const [party_firebase, setParty] = useState([]); - const firebase = useFirebase(); - useEffect(() => { - async function fetch() { - setParty(await firebase.getAllGen("parties")); - } - fetch(); - }, [firebase]); + const parties = useCollection("parties"); + return (
@@ -20,17 +13,7 @@ function Parties_page() {
- {party_firebase - .map((party, i) => { - return ( - - ); - })} + {parties.map((party, i) => ())}
diff --git a/frontend/src/components/Admin.jsx b/frontend/src/components/Admin.jsx index 4017b69..ff151c7 100644 --- a/frontend/src/components/Admin.jsx +++ b/frontend/src/components/Admin.jsx @@ -1,6 +1,7 @@ import React, { useEffect, useState } from 'react'; import "../App.css"; import { useFirebase } from "../firebase"; +import { useCollection } from '../firebase/hooks/useCollection'; import ModifiableAddEventCard from "./Modifiable/ModifiableAddEventCard"; import ModifiableAddLeadCard from "./Modifiable/ModifiableAddLeadCard"; import ModifiableAddPartiesCard from "./Modifiable/ModifiableAddPartiesCard"; @@ -9,19 +10,9 @@ import ModifiableLeadCard from "./Modifiable/ModifiableLeadCard"; import ModifiablePartiesCard from "./Modifiable/ModifiablePartiesCard"; const Dashboard = ({ signOut }) => { - const [events, setEvents] = useState([]); - const [parties, setParties] = useState([]); - const [leader, setLeaders] = useState([]); - const firebase = useFirebase(); - - useEffect(() => { - async function fetch() { - setEvents((await firebase.getAllGenDocs("events")).sort()); - setParties((await firebase.getAllGenDocs("parties")).sort()); - setLeaders((await firebase.getAllGenDocs("leadership")).sort()); - } - fetch(); - }, [firebase]); + const events = useCollection("events"); + const parties = useCollection("parties"); + const leaders = useCollection("leadership"); return (
@@ -29,19 +20,10 @@ const Dashboard = ({ signOut }) => {

Admin Dashboard

Events :

- {events.map((event, i) => { - const data = event.data(); + {events.map((data) => { return ( -
- +
+
); })} @@ -51,17 +33,10 @@ const Dashboard = ({ signOut }) => {

Parties :

- {parties.map((part, i) => { - const data = part.data(); + {parties.map((data) => { return ( -
- +
+
); })} @@ -71,18 +46,10 @@ const Dashboard = ({ signOut }) => {

Leadership :

- {leader.map((part, i) => { - const data = part.data(); + {leaders.map((data) => { return ( -
- +
+
); })} diff --git a/frontend/src/components/Events.jsx b/frontend/src/components/Events.jsx index b702aed..97ed776 100644 --- a/frontend/src/components/Events.jsx +++ b/frontend/src/components/Events.jsx @@ -1,5 +1,5 @@ -import { useState, useEffect } from "react"; -import { useFirebase } from "../firebase"; +import { useState } from "react"; +import { useCollection } from "../firebase/hooks/useCollection"; const EventCard = ({ image, virtual, title, description, where, when }) => { return ( @@ -53,16 +53,8 @@ const UpcomingPastButton = ({ upcoming, setUpcoming }) => { const Events = () => { const [upcoming, setUpcoming] = useState(true); - const firebase = useFirebase(); - const [events, setEvents] = useState([]); const currentDate = new Date(); - - useEffect(() => { - async function fetch() { - setEvents(await firebase.getAllEvents()); - } - fetch(); - }, [firebase]); + const events = useCollection("events"); return (
@@ -85,11 +77,7 @@ const Events = () => { return ( ); diff --git a/frontend/src/components/Home.jsx b/frontend/src/components/Home.jsx index d8eefcf..e54cbe8 100644 --- a/frontend/src/components/Home.jsx +++ b/frontend/src/components/Home.jsx @@ -1,58 +1,29 @@ -import { useEffect, useState } from "react"; -import Hero from "./Hero"; -import EventHeader from "./EventHeader"; +import { useCollection } from "../firebase/hooks/useCollection"; import Event from "./Event"; -import { useFirebase } from "../firebase"; +import EventHeader from "./EventHeader"; +import Hero from "./Hero"; const Home = () => { - const firebase = useFirebase(); - const [events, setEvents] = useState([]); const currentDate = new Date(); - - useEffect(() => { - async function fetch() { - setEvents(await firebase.getAllEvents()); - } - fetch(); - }, [firebase]); - + const events = useCollection("events"); + const filteredEvents = (filterFunc) => events + .filter(filterFunc) + .map((event, i) => ( + + ) + ) return ( <>
- {events - .filter((event) => event.when.toDate() >= currentDate) - .map((event, i) => { - console.log(event.when.toDate()); - return ( - - ); - })} + {filteredEvents((event) => event.when.toDate() >= currentDate)} - {events - .filter((event) => event.when.toDate() < currentDate) - .map((event, i) => { - return ( - - ); - })} + {filteredEvents((event) => event.when.toDate() < currentDate)}
); diff --git a/frontend/src/components/Modifiable/ModifiableAddEventCard.jsx b/frontend/src/components/Modifiable/ModifiableAddEventCard.jsx index 770d419..64e55c9 100644 --- a/frontend/src/components/Modifiable/ModifiableAddEventCard.jsx +++ b/frontend/src/components/Modifiable/ModifiableAddEventCard.jsx @@ -3,7 +3,6 @@ import React, { useState } from "react"; const ModifiableAddEventCard = () => { - const firestore = getFirestore(); const [currentImage, setCurrentImage] = useState(); const [newEvent, setNewEvent] = useState({ description: "", @@ -15,14 +14,8 @@ const ModifiableAddEventCard = () => { }); const submitEvent = async () => { setCurrentImage(newEvent.image); - await addDoc(collection(firestore, "events"), { - description : newEvent.description, - image: newEvent.image, - title: newEvent.title, - virtual: newEvent.virtual, - when: newEvent.when, - where: newEvent.where, - }); + const firestore = getFirestore(); + await addDoc(collection(firestore, "events"), newEvent); }; const handleInputChange = (event) => { event.preventDefault(); diff --git a/frontend/src/components/Modifiable/ModifiableAddLeadCard.jsx b/frontend/src/components/Modifiable/ModifiableAddLeadCard.jsx index 6165b60..1aadc75 100644 --- a/frontend/src/components/Modifiable/ModifiableAddLeadCard.jsx +++ b/frontend/src/components/Modifiable/ModifiableAddLeadCard.jsx @@ -2,9 +2,8 @@ import { addDoc, collection, getFirestore } from "firebase/firestore"; import React, { useState } from "react"; const ModifiableAddLeadCard = () => { - const firestore = getFirestore(); const [currentImage, setCurrentImage] = useState(); - const [newEvent, setNewEvent] = useState({ + const [newLead, setnewLead] = useState({ image: "", name: "", position: "", @@ -14,20 +13,16 @@ const ModifiableAddLeadCard = () => { const handleInputChange = (event) => { event.preventDefault(); let value = event.target.value; - setNewEvent({ - ...newEvent, + setnewLead({ + ...newLead, [event.target.name]: value, }); }; const submitLead = async () => { - setCurrentImage(newEvent.image); - await addDoc(collection(firestore, "leadership"), { - image: newEvent.image, - name: newEvent.name, - position: newEvent.position, - blurbs: newEvent.blurbs, - }); + const firestore = getFirestore(); + setCurrentImage(newLead.image); + await addDoc(collection(firestore, "leadership"), newLead); }; return ( diff --git a/frontend/src/components/Modifiable/ModifiableAddPartiesCard.jsx b/frontend/src/components/Modifiable/ModifiableAddPartiesCard.jsx index 4a26186..3dfa335 100644 --- a/frontend/src/components/Modifiable/ModifiableAddPartiesCard.jsx +++ b/frontend/src/components/Modifiable/ModifiableAddPartiesCard.jsx @@ -2,7 +2,6 @@ import { addDoc, collection, getFirestore } from "firebase/firestore"; import React, { useState } from "react"; const ModifiableAddPartiesCard = () => { - const firestore = getFirestore(); const [currentImage, setCurrentImage] = useState(); const [newEvent, setNewEvent] = useState({ name: "", @@ -10,12 +9,9 @@ const ModifiableAddPartiesCard = () => { blurbs: "", }); const submitParties = async () => { + const firestore = getFirestore(); setCurrentImage(newEvent.image); - await addDoc(collection(firestore, "parties"), { - name: newEvent.name, - image: newEvent.image, - blurbs: newEvent.blurbs, - }); + await addDoc(collection(firestore, "parties"), newEvent); }; const handleInputChange = (event) => { event.preventDefault(); diff --git a/frontend/src/components/Modifiable/ModifiableEventCard.jsx b/frontend/src/components/Modifiable/ModifiableEventCard.jsx index ccd0097..fcd8f2a 100644 --- a/frontend/src/components/Modifiable/ModifiableEventCard.jsx +++ b/frontend/src/components/Modifiable/ModifiableEventCard.jsx @@ -1,26 +1,15 @@ import { Timestamp } from "firebase/firestore"; -import { useState } from "react"; -import { useFirebase } from "../../firebase"; +import { useModifiableCard } from "../../firebase/hooks/useModifiableCard"; -const ModifiableEventCard = ({ - id, - image, - virtual, - title, - description, - where, - when, - }) => { - const [currentImage, setCurrentImage] = useState(image); - const [newEvent, setNewEvent] = useState({ - description: description, - image: image, - title: title, - virtual: virtual, - when: when, - where: where, - }); - const firebase = useFirebase() +const ModifiableEventCard = (props) => { + const { id, ...baseEvent } = props + const { + currentImage, + currentData, + setCurrentData, + modifyCard, + deleteCard, + } = useModifiableCard("events", id, baseEvent); const handleInputChange = (event) => { event.preventDefault(); let value = event.target.value; @@ -31,26 +20,15 @@ const ModifiableEventCard = ({ tempWhen.setHours(tempWhen.getHours() + 5); value = Timestamp.fromDate(new Date(tempWhen)); } - setNewEvent({ - ...newEvent, + setCurrentData({ + ...currentData, [event.target.name]: value, }); }; - - const modify = async () => { - setCurrentImage(newEvent.image); - firebase.modifyEvent(id, newEvent); - }; - - const deleteEvent = async () => { - setCurrentImage(newEvent.image); - await firebase.deleteGeneral(id, "events") - }; - + const { title, image, description, virtual, when, where } = currentData; let tempWhen = when; tempWhen.setHours(when.getHours() - 5); const date = tempWhen.toISOString().split("T")[0]; - return (
@@ -63,7 +41,7 @@ const ModifiableEventCard = ({ className="font-bold text-2xl mb-1 p-1" onChange={handleInputChange} /> -
+
`` Mode:
@@ -49,8 +43,11 @@ const ModifiableAddEventCard = () => { setNewEvent({ + ...newEvent, + when: Timestamp.fromDate(date), + })} + showTimeInput />

@@ -91,7 +91,7 @@ const ModifiableAddEventCard = () => { name="image" onChange={handleInputChange} type="text" - defaultValue={""} + value={image} />

@@ -45,7 +45,7 @@ const ModifiableLeadCard = (props) => { name="blurbs" rows="6" cols="40" - defaultValue={blurbs} + value={blurbs} className="mb-1 p-1" onChange={handleInputChange} /> @@ -56,7 +56,7 @@ const ModifiableLeadCard = (props) => { name="image" onChange={handleInputChange} type="text" - defaultValue={image} + value={image} />