Feature/add favorite button

components/product/favorite.js

@@ -0,0 +1,29 @@
+import { SingleProductComponent } from "./single";
+
+export const FavoriteProductComponent = ({
+  products = [],
+  handleClearCart,
+  handleRemoveFromCart,
+}) => {
+
+
+  return (
+    <>
+      <div className="flex justify-between py-4 px-3">
+        <h3 className="text-lg font-bold">Your Favorite Cart</h3>
+        <button className="bg-red-400 p-2" onClick={handleClearCart}>
+          Empty cart
+        </button>
+      </div>
+      <div className="flex">
+        {products.map((product) => (
+          <SingleProductComponent
+            key={product.name}
+            product={product}
+            onRemoveFromCartClick={handleRemoveFromCart}
+          />
+        ))}
+      </div>
+    </>
+  );
+};

components/product/list.js

@@ -1,13 +1,16 @@
 import { SingleProductComponent } from "./single";
 
-export const ListProductComponent = ({ products = [], handleAddToCartClick }) => {
+export const ListProductComponent = ({ products = [], handleAddToCartClick, handleAddFavoriteCart}) => {
   return (
     <div className="flex">
       {products.map((product) => (
         <SingleProductComponent
           key={product.name}
           product={product}
           onAddToCartClick={handleAddToCartClick}
+          onAddToFavorite={handleAddFavoriteCart}
+
+
         />
       ))}
     </div>

components/product/single.js

@@ -1,9 +1,21 @@
 import Image from "next/image";
+import React, {useState} from "react";
+
+
+
 export const SingleProductComponent = ({
   product = {},
   onAddToCartClick,
   onRemoveFromCartClick,
+  onAddToFavorite,
+  onRemoveFromFavorite
+
 }) => {
+
+  const [click, setClick] = useState(false)
+  const [showFavorite, setShowFavorite] = useState(true)
+
+
   return (
     <div className="p-4 shadow rounded-sm mx-3">
       <Image
@@ -23,12 +35,30 @@ export const SingleProductComponent = ({
           className="px-3 py-2 bg-indigo-200 text-gray-800"
           onClick={(e) => {
             e.preventDefault();
-            onAddToCartClick(product);
+             onAddToCartClick(product);             
           }}
         >
           Add to cart
         </button>
       )}
+
+
+        {showFavorite && !!onAddToFavorite && (
+
+            <button className="px-3 py-2 mx-3 bg-indigo-200 text-gray-800"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      onAddToFavorite(product);
+                      setClick(!click);
+                    }}
+            >
+              {!!click ? "Remove Favorite❌" : "Add favorite 👍🏼"}            
+            </button>
+
+         )}
+
+
+
       {!!onRemoveFromCartClick && (
         <button
           className="px-3 py-2 bg-indigo-200 text-gray-800"

data/database.js

@@ -5,4 +5,8 @@ db.version(1).stores({
   cartItems: `name, price, description, image, count`,
 });
 
+db.version(2).stores({
+  favoriteItems: `name, price, description, image, count`,
+});
+
 export default db;

hooks/cart.js

@@ -37,9 +37,8 @@ export const useCart = () => {
     }
 
     setCartItems(newCartItems);
-  };
-
-  const handleRemoveFromCart = (product) => {
+  };  
+    const handleRemoveFromCart = (product) => {
     const existingItemFromCart = cartItems.find(
       (item) => item.name === product.name
     );

hooks/favorites.js

@@ -0,0 +1,60 @@
+import { useState, useEffect } from "react";
+import db from "../data/database";
+
+const getItemsFromDb = () => db.favoriteItems.toArray();
+const addItemToDb = (item) => db.favoriteItems.put(item);
+const updateItemInDb = (item, count) => {
+  db.favoriteItems.where("name").equalsIgnoreCase(item.name).modify({ count });
+};
+const removeItemFromDb = (item) => {
+  db.favoriteItems.where("name").equalsIgnoreCase(item.name).delete();
+};
+const clearItemsFromDb = () => db.favoriteItems.clear();
+
+export const useFavoriteCart = () => {
+  const [favoriteItems, setfavoriteItems] = useState([]);
+
+  useEffect(() => {
+    getItemsFromDb().then((itemsFromDb) => setfavoriteItems(itemsFromDb));
+  }, []);
+
+  const handleAddFavoriteCart = (product) => {
+    const existingItemFromCart = favoriteItems.find(
+      (item) => item.name === product.name
+    );
+    let newfavoriteItems = [];
+
+    if (existingItemFromCart) {
+        removeItemFromDb(product)
+      }else {
+      newfavoriteItems = [...favoriteItems, { ...product, count: 1 }];
+      addItemToDb({ ...product, count: 1 });
+    }
+
+    setfavoriteItems(newfavoriteItems);
+  };  
+    const handleRemoveFromFavorite = (product) => {
+    const existingItemFromCart = favoriteItems.find(
+      (item) => item.name === product.name
+    );
+    let newfavoriteItems = [];
+
+    if (existingItemFromCart) {
+      newfavoriteItems = favoriteItems.filter((item) => item.name !== product.name);
+      removeItemFromDb(product);
+    } 
+        setfavoriteItems(newfavoriteItems);
+  };
+
+  const handleClearCart = () => {
+    setfavoriteItems([]);
+    clearItemsFromDb();
+  };
+
+  return {
+    favoriteItems,
+    handleClearCart,
+    handleAddFavoriteCart,
+    handleRemoveFromFavorite,
+  };
+};

pages/favorites.js

@@ -0,0 +1,31 @@
+import Link from 'next/link';
+import React from 'react'
+import { FavoriteProductComponent } from '../components/product/favorite';
+
+import { useFavoriteCart } from '../hooks/favorites';
+
+function Favorites() {
+
+    const {
+        favoriteItems,
+        handleClearCart,
+        handleRemoveFromFavorite,
+      } = useFavoriteCart();
+
+
+
+    return (
+        <div>
+            <FavoriteProductComponent
+              products={favoriteItems}
+              handleClearCart={handleClearCart}
+              handleRemoveFromCart={handleRemoveFromFavorite}
+            />
+            <Link  href="/">
+          <a className="px-3 py-2 my-3 bg-indigo-200 text-gray-800">go to list</a>
+      </Link>
+        </div>
+    )
+}
+
+export default Favorites;

pages/index.js

@@ -3,6 +3,8 @@ import { ListProductComponent } from "../components/product/list";
 import { products } from "../data/products";
 import { CartProductComponent } from "../components/product/cart";
 import { useCart } from "../hooks/cart";
+import Link from "next/link";
+import { useFavoriteCart } from "../hooks/favorites";
 
 export default function Home() {
   const {
@@ -12,6 +14,10 @@ export default function Home() {
     handleRemoveFromCart,
   } = useCart();
 
+  const {
+    handleAddFavoriteCart
+  } = useFavoriteCart();
+
   return (
     <div>
       <Head>
@@ -25,6 +31,7 @@ export default function Home() {
         <ListProductComponent
           products={products}
           handleAddToCartClick={handleAddToCartClick}
+          handleAddFavoriteCart={handleAddFavoriteCart}
         />
 
         {cartItems.length > 0 && (
@@ -37,6 +44,12 @@ export default function Home() {
           </div>
         )}
       </div>
+      <Link  href="/order">
+          <a className="px-3 py-2 bg-indigo-200 text-gray-800">Your order</a>
+      </Link>
+      <Link  href="/favorites">
+          <a className="px-3 py-2 mx-3 bg-indigo-200 text-gray-800">go to Favorites</a>
+      </Link>
     </div>
   );
 }

pages/order.js

@@ -0,0 +1,16 @@
+import { Fragment } from "react";
+import { products } from "../data/products";
+export const Order = () => {
+  return (
+    <div>
+      {products.map((product) => (
+        <Fragment key={product.id}>
+          <h1>{product.name}</h1>
+          <p>{product.price}</p>
+          <p>{product.description}</p>
+        </Fragment>
+      ))}
+    </div>
+  );
+};
+export default Order;