get favs data from firebase to profile page

src/App.jsx

@@ -14,7 +14,6 @@ import MainRouter from "./controllers/MainRouter";
 export const App = () => {
   const { loading } = useAuth0();
   const [searchString, setSearchString] = useState("");
-
   const [searchResults, setSearchResults] = useState({ meals: [] });
   // Default meal object. TODO: Find a better alternative …
   const mealDef = {
@@ -93,8 +92,8 @@ export const App = () => {
       : getData(searchString, setSearchResults, "search");
   };
 
-  const handleChange = (ev) => {
+  const handleChange = (e) => {
-    const { value } = ev.target;
+    const { value } = e.target;
     setSearchString(value);
   };
 

src/components/ContactForm.jsx

@@ -8,8 +8,8 @@ export const ContactForm = ({ setIsSubmitted }) => {
   const [phone, setPhone] = useState("");
   const [message, setMessage] = useState("");
 
-  const handleSubmit = (ev) => {
+  const handleSubmit = (e) => {
-    ev.preventDefault();
+    e.preventDefault();
     // confirmationMail(email);
     // const body = `Sender: ${firstName} ${lastName}\nPhone: ${phone}\nMessage: ${message}`;
     // notificationMail(email, `New message from ${firstName} ${lastName}`, body);

src/controllers/ProfileController.jsx

@@ -1,18 +1,23 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useAuth0 } from "../utils/auth0-spa";
 import { PreLoader } from "../components/PreLoader";
 import { ProfilePage } from "../pages/ProfilePage";
+import { useFirebase } from "../services/Firebase";
 
 export const ProfileController = () => {
   const { loading, user } = useAuth0();
+  const [data, setData] = useState();
+  const db = useFirebase();
 
-  // const fn = async () => await fire.getByEmail(user.email);
+  useEffect(() => {
+    db.get(user.email).then((res) => setData(res));
+  }, [db, user.email]);
 
   return loading || !user ? ( // is catched by PrivateRoute
     <div className="container center-align">
       <PreLoader />
     </div>
   ) : (
-    <ProfilePage user={user} />
+    <ProfilePage user={user} data={data} />
   );
 };

src/layouts/MainLayout.jsx

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-
 import { Navbar } from "../components/Navbar";
 import { SearchBar } from "../components/SearchBar";
 import { Footer } from "../components/Footer";
@@ -19,26 +18,26 @@ const MainLayout = ({
 
   const links = ["categories", "contact"];
 
-  const openNavClick = (ev) => {
+  const openNavClick = (e) => {
-    ev.preventDefault();
+    e.preventDefault();
     setShowNav(true);
     document.addEventListener("keydown", handleEscKey);
     // document.addEventListener("click", handleOutsideClick);
   };
 
-  const closeNavClick = (ev) => {
+  const closeNavClick = (e) => {
-    ev.preventDefault();
+    e.preventDefault();
     setShowNav(false);
     document.removeEventListener("keydown", handleEscKey);
   };
 
-  const handleEscKey = (ev) => {
+  const handleEscKey = (e) => {
-    if (ev.key === "Escape") {
+    if (e.key === "Escape") {
       setShowNav(false);
     }
   };
-  // const handleOutsideClick = ev => {
+  // const handleOutsideClick = e => {
-  //   console.log(ev);
+  //   console.log(e);
   // };
 
   return (

src/pages/ProfilePage.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export const ProfilePage = ({ user }) => {
+export const ProfilePage = ({ user, data }) => {
   return (
     <div className="container">
       <div className="row">
@@ -14,9 +14,8 @@ export const ProfilePage = ({ user }) => {
         <p>
           <b>Email: </b>
           {user.email}
-          {/* <a href={`mailto:${user.email}`}>{user.email}</a> */}
+          {JSON.stringify(data, null, 2)}
         </p>
-        {/* <code>{JSON.stringify(user, null, 2)}</code> */}
       </div>
     </div>
   );

src/services/Firebase/firebase.js

@@ -20,7 +20,7 @@ export default class Firebase {
     app.initializeApp(CONFIG);
     this.db = app.firestore();
   }
-
+  // this should put email, idMeal, strMeal and isFav
   add = async (email, id, fav) => {
     await this.db
       .collection("MealPlannerFavs")
@@ -39,4 +39,15 @@ export default class Firebase {
     const snapshot = query.docs[0];
     return snapshot.data();
   };
+
+  // get all favs for user 'email'
+  get = async (email) => {
+    const query = await this.db
+      .collection("mealPlannerUsers")
+      .where("email", "==", email)
+      .get();
+    // .then((doc) => doc.data());
+    const snapshot = query.docs[0];
+    return snapshot.data();
+  };
 }

src/utils/inputHook.js

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-export const useInput = initialValue => {
+export const useInput = (initialValue) => {
   const [value, setValue] = useState(initialValue);
 
   return {
@@ -9,9 +9,9 @@ export const useInput = initialValue => {
     reset: () => setValue(""),
     bind: {
       value,
-      onChange: ev => {
+      onChange: (e) => {
-        setValue(ev.target.value);
+        setValue(e.target.value);
-      }
+      },
-    }
+    },
   };
 };