Merge pull request #17 from fullstackatbrown/firebase

Fix firebase multiple app issues

frontend/src/App.js

@@ -1,14 +1,13 @@
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import Footnote from "./components/Footnote";
-import Navbar from "./components/Navbar";
-import Home from "./components/Home";
 import AboutUs from "./components/AboutUs";
-import Events from "./components/Events";
 import Admin from "./components/Admin";
-import Parties from "./Parties";
+import { default as Event, default as Events } from "./components/Events";
+import Footnote from "./components/Footnote";
+import Home from "./components/Home";
+import Navbar from "./components/Navbar";
 import Leadership from "./Leadership";
-import Event from "./components/Events";
-import Contact from "./contact"
+import Parties from "./Parties";
+// import Contact from "./contact"
 import ConstitutionReact from "./ConstitutionReact";
 
 // Router : A constant determining the total connection between the home page and
@@ -24,7 +23,7 @@ const router = createBrowserRouter([
   { path: "/events", element: <Event /> },
   { path: "/leadership", element: <Leadership /> },
   { path: "/constitution", element: <ConstitutionReact /> },
-  { path: "/contact", element: <Contact /> },
+  // { path: "/contact", element: <Contact /> },
   { path: "/parties", element: <Parties /> },
 ]);
 

frontend/src/components/Admin.jsx

@@ -1,18 +1,19 @@
-import { useState, useEffect } from "react";
+import React, { useEffect, useState } from 'react';
+import "../App.css";
 import { useFirebase } from "../firebase";
-import ModifiableEventCard from "./Modifiable/ModifiableEventCard";
-import ModifiablePartiesCard from "./Modifiable/ModifiablePartiesCard";
-import ModifiableLeadCard from "./Modifiable/ModifiableLeadCard";
 import ModifiableAddEventCard from "./Modifiable/ModifiableAddEventCard";
 import ModifiableAddLeadCard from "./Modifiable/ModifiableAddLeadCard";
 import ModifiableAddPartiesCard from "./Modifiable/ModifiableAddPartiesCard";
-import React from 'react';
-import "../App.css"
+import ModifiableEventCard from "./Modifiable/ModifiableEventCard";
+import ModifiableLeadCard from "./Modifiable/ModifiableLeadCard";
+import ModifiablePartiesCard from "./Modifiable/ModifiablePartiesCard";
 
-const Dashboard = ({ firebase, signOut }) => {
+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());
@@ -33,7 +34,6 @@ const Dashboard = ({ firebase, signOut }) => {
                       return (
                           <div className="my-2" key={i}>
                               <ModifiableEventCard
-                                  firebase={firebase}
                                   id={event.id}
                                   image={data.image}
                                   virtual={data.virtual}
@@ -172,8 +172,6 @@ const Admin = () => {
       <div className="mt-40 mx-auto max-w-screen-lg px-8">
         {loggedIn ? (
           <Dashboard
-              firebase={firebase}
-              firestore={firebase.firestore}
               signOut={signOut}
           />
         ) : (

frontend/src/components/Modifiable/ModifiableAddEventCard.jsx

@@ -1,21 +1,9 @@
-import {useState} from "react";
-import {addDoc, collection, getFirestore, Timestamp} from "firebase/firestore";
-import React from "react";
-import {initializeApp} from "firebase/app";
+import { addDoc, collection, getFirestore, Timestamp } from "firebase/firestore";
+import React, { useState } from "react";
 
-const config = {
-    apiKey: process.env.REACT_APP_API_KEY,
-    authDomain: process.env.REACT_APP_AUTH_DOMAIN,
-    projectId: process.env.REACT_APP_PROJECT_ID,
-    storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
-    messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
-    appId: process.env.REACT_APP_APP_ID,
-    measurementId: process.env.REACT_APP_MEASUREMENT_ID,
-};
 
 const ModifiableAddEventCard = () => {
-    const app = initializeApp(config);
-    const firestore = getFirestore(app);
+    const firestore = getFirestore();
     const [currentImage, setCurrentImage] = useState();
     const [newEvent, setNewEvent] = useState({
         description: "",

frontend/src/components/Modifiable/ModifiableAddLeadCard.jsx

@@ -1,21 +1,8 @@
-import {useState} from "react";
-import React from "react";
-import {collection, addDoc, getFirestore} from "firebase/firestore";
-import {initializeApp} from "firebase/app";
-
-const config = {
-    apiKey: process.env.REACT_APP_API_KEY,
-    authDomain: process.env.REACT_APP_AUTH_DOMAIN,
-    projectId: process.env.REACT_APP_PROJECT_ID,
-    storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
-    messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
-    appId: process.env.REACT_APP_APP_ID,
-    measurementId: process.env.REACT_APP_MEASUREMENT_ID,
-};
+import { addDoc, collection, getFirestore } from "firebase/firestore";
+import React, { useState } from "react";
 
 const ModifiableAddLeadCard = () => {
-    const app = initializeApp(config);
-    const firestore = getFirestore(app);
+    const firestore = getFirestore();
     const [currentImage, setCurrentImage] = useState();
     const [newEvent, setNewEvent] = useState({
         image: "",

frontend/src/components/Modifiable/ModifiableAddPartiesCard.jsx

@@ -1,21 +1,8 @@
-import {useState} from "react";
-import React from "react";
-import {addDoc, collection, getFirestore} from "firebase/firestore";
-import {initializeApp} from "firebase/app";
-
-const config = {
-    apiKey: process.env.REACT_APP_API_KEY,
-    authDomain: process.env.REACT_APP_AUTH_DOMAIN,
-    projectId: process.env.REACT_APP_PROJECT_ID,
-    storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
-    messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
-    appId: process.env.REACT_APP_APP_ID,
-    measurementId: process.env.REACT_APP_MEASUREMENT_ID,
-};
+import { addDoc, collection, getFirestore } from "firebase/firestore";
+import React, { useState } from "react";
 
 const ModifiableAddPartiesCard = () => {
-    const app = initializeApp(config);
-    const firestore = getFirestore(app);
+    const firestore = getFirestore();
     const [currentImage, setCurrentImage] = useState();
     const [newEvent, setNewEvent] = useState({
         name: "",

frontend/src/components/Modifiable/ModifiableEventCard.jsx

@@ -1,8 +1,8 @@
-import {useState} from "react";
-import {Timestamp} from "firebase/firestore";
+import { Timestamp } from "firebase/firestore";
+import { useState } from "react";
+import { useFirebase } from "../../firebase";
 
 const ModifiableEventCard = ({
-                                 firebase,
                                  id,
                                  image,
                                  virtual,
@@ -20,6 +20,7 @@ const ModifiableEventCard = ({
         when: when,
         where: where,
     });
+    const firebase = useFirebase()
     const handleInputChange = (event) => {
         event.preventDefault();
         let value = event.target.value;

frontend/src/firebase/firebase.js

@@ -1,6 +1,6 @@
-import {initializeApp} from "firebase/app";
-import {getAuth, signInWithEmailAndPassword, createUserWithEmailAndPassword} from "firebase/auth";
-import {collection, doc, getDocs, getFirestore, query, updateDoc, deleteDoc} from "firebase/firestore";
+import { getApp, getApps, initializeApp } from "firebase/app";
+import { createUserWithEmailAndPassword, getAuth, signInWithEmailAndPassword } from "firebase/auth";
+import { collection, deleteDoc, doc, getDocs, getFirestore, query, updateDoc } from "firebase/firestore";
 
 const config = {
   apiKey: process.env.REACT_APP_API_KEY,
@@ -12,13 +12,22 @@ const config = {
   measurementId: process.env.REACT_APP_MEASUREMENT_ID,
   databaseURL: process.env.REACT_APP_DATABASE_URL,
 };
+export function firebaseInit() {
+  let app;
 
+  if (getApps().length === 0) {
+      app = initializeApp(config);
+  } else {
+      app = getApp();
+  }
+  return app;
+}
 export class Firebase {
   firestore;
   auth;
 
   constructor() {
-    const app = initializeApp(config);
+    const app = firebaseInit();
     this.firestore = getFirestore(app);
     this.auth = getAuth(app);
   }