Merge pull request #18 from fullstackatbrown/firebase

Clean up firebase and improve date handling

frontend/package.json

@@ -7,9 +7,12 @@
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
     "cors": "^2.8.5",
+    "date-fns": "^2.30.0",
     "nodemailer": "^6.9.1",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-collapsed": "^4.0.2",
+    "react-datepicker": "^4.21.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "react-social-icons": "^5.15.0",

frontend/src/App.js

@@ -9,6 +9,8 @@ import Leadership from "./Leadership";
 import Parties from "./Parties";
 // import Contact from "./contact"
 import ConstitutionReact from "./ConstitutionReact";
+import { AuthProvider } from "./firebase/auth";
+import { firebaseInit } from "./firebase/firebase";
 
 // Router : A constant determining the total connection between the home page and
 // the other pages
@@ -29,12 +31,15 @@ const router = createBrowserRouter([
 
 // App : The function that creates the
 function App() {
+  firebaseInit()
   return (
-    <main className="h-screen">
-      <Navbar />
-      <RouterProvider router={router} />
-      <Footnote />
-    </main>
+    <AuthProvider>
+      <main className="h-screen">
+        <Navbar />
+        <RouterProvider router={router} />
+        <Footnote />
+      </main>
+    </AuthProvider>
   );
 }
 

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 (
         <div>
             <div className="h-32 mt-24 justify-center">
@@ -20,18 +12,7 @@ function Leadership() {
                 </div>
             </div>
             <div className="h-screen grid grid-cols-3 gap-x-2 gap-y-24 ml-28">
-                {leader_firebase
-                    .map((leader, i) => {
-                        return (
-                            <Bio
-                                key={i}
-                                name={leader.name}
-                                position={leader.position}
-                                blurbs={leader.blurbs}
-                                image={leader.image}
-                            />
-                        );
-                    })}
+                {leaders.map((leader, i) => (<Bio key={i} {...leader} />))}
             </div>
             <div className="h-32"> </div>
         </div>

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 (
         <div>
             <div className="h-32 mt-24 justify-center">
@@ -20,17 +13,7 @@ function Parties_page() {
                 </div>
             </div>
             <div className="h-screen grid grid-cols-3 gap-x-8 gap-y-16 ml-28">
-                {party_firebase
-                    .map((party, i) => {
-                        return (
-                            <Parties
-                                key={i}
-                                name={party.name}
-                                blurbs={party.blurbs}
-                                image={party.image}
-                            />
-                        );
-                    })}
+                {parties.map((party, i) => (<Parties key={i} {...party} />))}
             </div>
             <div className="h-32"> </div>
         </div>

frontend/src/components/Admin.jsx

@@ -1,47 +1,30 @@
-import React, { useEffect, useState } from 'react';
+import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';
+import React, { useState } from 'react';
 import "../App.css";
-import { useFirebase } from "../firebase";
+import { useAuth } from '../firebase/auth';
+import { useCollection } from '../firebase/hooks/useCollection';
 import ModifiableAddEventCard from "./Modifiable/ModifiableAddEventCard";
 import ModifiableAddLeadCard from "./Modifiable/ModifiableAddLeadCard";
 import ModifiableAddPartiesCard from "./Modifiable/ModifiableAddPartiesCard";
 import ModifiableEventCard from "./Modifiable/ModifiableEventCard";
 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 Dashboard = () => {
+  const events = useCollection("events");
+  const parties = useCollection("parties");
+  const leaders = useCollection("leadership");
 
   return (
       <div>
           <section>
               <h3 className="font-bold text-3xl text-center">Admin Dashboard</h3>
               <h3 className="font-bold text-3xl">Events : </h3>
               <div className="grid pb-16 mx-auto px-8 grid-cols-1 gap-8">
-                  {events.map((event, i) => {
-                      const data = event.data();
+                  {events.map((data) => {
                       return (
-                          <div className="my-2" key={i}>
-                              <ModifiableEventCard
-                                  id={event.id}
-                                  image={data.image}
-                                  virtual={data.virtual}
-                                  title={data.title}
-                                  description={data.description}
-                                  where={data.where}
-                                  when={data.when.toDate()}
-                              />
+                        <div className="my-2" key={data.id}>
+                              <ModifiableEventCard {...data} />
                           </div>
                       );
                   })}
@@ -51,17 +34,10 @@ const Dashboard = ({ signOut }) => {
               </div>
               <h3 className="font-bold text-3xl">Parties : </h3>
               <div className="grid pb-16 mx-auto px-8 grid-cols-1 gap-8">
-                  {parties.map((part, i) => {
-                      const data = part.data();
+                  {parties.map((data) => {
                       return (
-                          <div className="my-2" key={i}>
-                              <ModifiablePartiesCard
-                                  firebase={firebase}
-                                  id={part.id}
-                                  name={data.name}
-                                  image={data.image}
-                                  blurbs={data.blurbs}
-                              />
+                          <div className="my-2" key={data.id}>
+                              <ModifiablePartiesCard {...data} />
                           </div>
                       );
                   })}
@@ -71,18 +47,10 @@ const Dashboard = ({ signOut }) => {
               </div>
               <h3 className="font-bold text-3xl my-5">Leadership : </h3>
               <div className="grid pb-16 mx-auto px-8 grid-cols-1 gap-8">
-                  {leader.map((part, i) => {
-                      const data = part.data();
+                  {leaders.map((data) => {
                       return (
-                          <div className="my-2" key={i}>
-                              <ModifiableLeadCard
-                                  firebase={firebase}
-                                  id={part.id}
-                                  name={data.name}
-                                  image={data.image}
-                                  position={data.position}
-                                  blurbs={data.blurbs}
-                              />
+                          <div className="my-2" key={data.id}>
+                              <ModifiableLeadCard {...data} />
                           </div>
                       );
                   })}
@@ -92,7 +60,10 @@ const Dashboard = ({ signOut }) => {
               </div>
               <button
                   className="font-bold border-2 p-2 rounded-md border-slate-400 bg-gray-600 text-white hover:bg-[#650202] mb-5"
-                  onClick={signOut}
+                  onClick={async () => {
+                    const auth = getAuth()
+                    await auth.signOut()
+                  }}
               >
                   Sign out
               </button>
@@ -101,7 +72,19 @@ const Dashboard = ({ signOut }) => {
   );
 };
 
-const LogInSection = ({ signIn, setEmail, setPassword }) => {
+const LogInSection = () => {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const auth = getAuth();
+  const signIn = async () => {
+    signInWithEmailAndPassword(auth, email, password)
+      .catch((error) => {
+        console.error(error.code, error.message);
+      });
+  }
+
+
   const handleInputChange = (event) => {
     event.preventDefault();
     const name = event.target.name;
@@ -145,41 +128,15 @@ const LogInSection = ({ signIn, setEmail, setPassword }) => {
 };
 
 const Admin = () => {
-  const firebase = useFirebase();
-
-  const [loggedIn, setLoggedIn] = useState(false);
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-
-  const signIn = async () => {
-    await firebase.signIn(email, password);
-  };
-
-  const signOut = async () => {
-    await firebase.auth.signOut();
-    setLoggedIn(false);
-  };
-
-  useEffect(() => {
-    firebase.auth.onAuthStateChanged(async (user) => {
-      if (!user) return;
-      setLoggedIn(true);
-    });
-  }, [firebase]);
+  const {isLoggedIn} = useAuth()
 
   return (
     <div>
       <div className="mt-40 mx-auto max-w-screen-lg px-8">
-        {loggedIn ? (
-          <Dashboard
-              signOut={signOut}
-          />
+        {isLoggedIn ? (
+          <Dashboard />
         ) : (
-          <LogInSection
-            signIn={signIn}
-            setEmail={setEmail}
-            setPassword={setPassword}
-          />
+          <LogInSection />
         )}
       </div>
     </div>

frontend/src/components/Event.jsx

@@ -1,3 +1,5 @@
+import { format } from 'date-fns';
+
 const Event = ({ image, virtual, title, description, where, when }) => {
   return (
     <div className="flex flex-col md:flex-row mb-12 drop-shadow-lg">
@@ -21,7 +23,7 @@ const Event = ({ image, virtual, title, description, where, when }) => {
           </p>
           <p>
             <span className="font-bold">When: </span>
-            {when}
+            {format(when.toDate(), 'h:mm a, E MMM d, yyyy')}
           </p>
         </div>
       </div>

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 (
     <div>
@@ -85,11 +77,7 @@ const Events = () => {
             return (
               <EventCard
                 key={i}
-                image={event.image}
-                virtual={event.virtual}
-                title={event.title}
-                description={event.description}
-                where={event.where}
+                {...event}
                 when={event.when.toDate().toDateString()}
               />
             );