ProfilePage displays favourite recipes

src/components/CardEntry.jsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-export const CardEntry = ({ item }) => {
+export const CardEntry = ({ item, className = "col s12 m6" }) => {
   const { idMeal, strMeal, strMealThumb } = item;
   return (
     <Link to={`${idMeal}`}>
       <li>
-        <div className="col s12 m6">
+        <div className={className}>
           <div className="card hoverable">
             <div className="card-image">
               <img src={strMealThumb} alt={strMeal} />

src/controllers/MainRouter.jsx

@@ -12,6 +12,7 @@ import { ContactPage } from "../pages/Contact";
 import { NotFoundPage } from "../pages/NotFoundPage";
 
 import { PrivateRoute } from "../components/PrivateRoute";
+import TestPage from "../pages/TestPage";
 
 const MainRouter = ({
   buttonUrl,

src/controllers/MealController.jsx

@@ -32,9 +32,9 @@ export const MealController = ({ meal, getMeal, getRandomMeal }) => {
   useEffect(() => {
     // Not update fav status of the placeholder recipe. TODO: it's ugly...
     if (idMeal !== "52837" && isAuthenticated) {
-      fb.addToFavs(user.email, idMeal, isFav);
+      fb.addToFavs(user.email, idMeal, strMeal, strMealThumb, isFav);
     }
-  }, [user, idMeal, isFav, fb, isAuthenticated]);
+  }, [user, idMeal, strMeal, strMealThumb, isFav, fb, isAuthenticated]);
 
   const item = {
     mealName: strMeal,

src/controllers/ProfileController.jsx

@@ -6,12 +6,13 @@ import { useFirebase } from "../services/Firebase";
 
 export const ProfileController = () => {
   const { loading, user } = useAuth0();
-  const [data, setData] = useState();
+  const [favs, setFavs] = useState([]);
   const db = useFirebase();
 
   useEffect(() => {
-    db.getByEmail(user.email).then((res) => setData(res));
-    // db.getFavsByEmail(user.email).then((res) => setData(res));
+    db.getByEmail(user.email).then((res) => {
+      setFavs(res.favs);
+    });
   }, [db, user.email]);
 
   return loading || !user ? ( // is catched by PrivateRoute
@@ -19,6 +20,6 @@ export const ProfileController = () => {
       <PreLoader />
     </div>
   ) : (
-    <ProfilePage user={user} data={data} />
+    <ProfilePage user={user} data={favs} />
   );
 };

src/pages/ProfilePage.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { CardEntry } from "../components/CardEntry";
 
 export const ProfilePage = ({ user, data }) => {
   return (
@@ -12,12 +13,12 @@ export const ProfilePage = ({ user, data }) => {
         />
         <h2 className="col s9">{user.name}</h2>
       </div>
-      <p>
+      <div className="row">
         <b>Email: </b>
         {user.email}
         <br />
-        {JSON.stringify(data, null, 2)}
-      </p>
+        <ul>{data && data.map((d, i) => <CardEntry key={i} item={d} />)}</ul>
+      </div>
     </div>
   );
 };

src/services/Firebase/firebase.js

@@ -13,6 +13,8 @@ const CONFIG = {
   measurementId: config.measurementId,
 };
 
+const FAVS = "favs";
+
 /**
  * Firebase initializes the Application and provides method to interact with
  * Firebase services as auth and firestore.
@@ -28,45 +30,48 @@ export default class Firebase {
    * Get infos for user 'email'.
    */
   getByEmail = async (email) => {
-    const query = await this.collection
+    const infos = await this.collection
       .where("email", "==", email)
       .limit(1)
       .get();
 
-    return query.docs[0].data();
+    const favs = await this.getFavsByEmail(email);
+
+    return { infos, favs };
   };
 
-  // get user's favourite recipes
+  /**
+   * Get user's favourite recipes
+   * */
   getFavsByEmail = async (email) => {
-    const query = await this.collection.where("email", "==", email).get();
-    return query.docs[0].collection("favs").get();
+    let favs = [];
+    const query = await this.collection
+      .doc(email)
+      .collection(FAVS)
+      // .orderBy("timestamp", "desc")
+      .limit(10)
+      .get();
 
-    //   .limit(1)
-    //   .get();
+    query.forEach((doc) => favs.push(doc.data()));
 
-    // return query.docs[0].data();
-    // const user = await this.getByEmail(email);
-    // const query = user.collection("favs").get();
-
-    // const favs = [];
-    // query.docs.forEach((doc) => favs.push(doc.data()));
-    // console.log(favs);
-    // return favs;
+    return favs;
   };
 
   /**
    * Create or update favourite status for an authenticated user.
    */
-  addToFavs = async (email, idMeal, isFav) => {
+  addToFavs = async (email, idMeal, strMeal, strMealThumb, isFav) => {
     this.collection
       .doc(email)
-      .collection("favs")
+      .collection(FAVS)
       .doc(idMeal)
       .set({
         email,
         idMeal,
+        strMeal,
+        strMealThumb,
         isFav,
-        timestamp: this.db.FieldValue.serverTimestamp(),
+        // timestamp: app.FieldValue.serverTimestamp(),
       })
       // .then(() => console.log("Fav object created."))
       .catch((err) => console.error("Error adding favs to database", err));