Fav Button

README.md

@@ -96,7 +96,8 @@ Free meal planner for cooks short on ideas! (like me …)
 ## TO DO
 
 1. send message after contact form validation (confirm to sender and msg+info to admin)
-1. Design & Breadcrumb
+1. Local storage of prefeernces
+1. Breadcrumb
 1. Cookie bar
 1. code cleanup (props and refactoring)
 1. Back to top button

src/components/MealPresentation.jsx

@@ -7,7 +7,9 @@ export const MealPresentation = props => {
     imgAddress,
     videoAddress,
     mealCategory,
-    mealArea
+    mealArea,
+    isFav,
+    setIsFav
   } = props.meal;
   return (
     <div className="row">
@@ -38,7 +40,22 @@ export const MealPresentation = props => {
                 <div className="chip">
                   <b>Origin:</b> {mealArea}
                 </div>
+                <div className="chip">
+                  <b>
+                    {isFav ? "Remove from favourites" : "Add to favourites"}:
+                  </b>
+
+                  <Link to="#">
+                    <i
+                      className="close material-icons"
+                      onClick={() => setIsFav(!isFav)}
+                    >
+                      {isFav ? "favorite" : "favorite_border"}
+                    </i>
+                  </Link>
+                </div>
               </li>
+              <li></li>
             </ul>
           </div>
         </div>

src/controllers/MealController.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { MealPage } from "../pages/MealPage";
 import { NotFoundPage } from "../pages/NotFoundPage";
@@ -22,12 +22,27 @@ export const MealController = ({ meal, getMeal, getRandomMeal }) => {
     strInstructions
   } = mealItem;
 
+  const favInit = Boolean(localStorage.getItem(strMeal));
+  // console.log(favInit);
+  const [isFav, setIsFav] = useState(favInit);
+  // console.log(isFav);
+
+  useEffect(() => {
+    isFav
+      ? localStorage.setItem(strMeal, isFav)
+      : localStorage.setItem(strMeal, "");
+    console.log(localStorage.getItem(strMeal));
+    console.log(isFav);
+  }, [isFav, strMeal]);
+
   const item = {
     mealName: strMeal,
     imgAddress: strMealThumb,
     videoAddress: strYoutube,
     mealCategory: strCategory,
-    mealArea: strArea
+    mealArea: strArea,
+    isFav: isFav,
+    setIsFav: setIsFav
   };
 
   let ingredientList = [];

src/utils/methods.js

@@ -22,3 +22,5 @@ export const getData = (keyword, set, option = null) => {
 export const upFirstChar = lower => {
   return lower.replace(/^\w/, c => c.toUpperCase());
 };
+
+export const addToFavourites = () => {};