Merge pull request #185 from DharshiBalasubramaniyam/wishlist

Add wishlist button in the product card (fixes #134)

src/Components/Item.jsx

@@ -1,13 +1,18 @@
-import React from "react";
+import React, { useContext } from "react";
 import { Link } from "react-router-dom";
+import { SavedContext } from "../Context/SavedContext"
+import filled_Wishlist from '../assets/filled_wishlist.png'
+import outlined_Wishlist from '../assets/outlined_wishlist.png'
 
 const Item = (props) => {
   const { image, name, new_price, old_price, id } = props.data;
+  const { AddToList, listItem } = useContext(SavedContext);
 
   return (
-    <div className="m-5 cursor-pointer dark:text-white">
+
+    <div className="m-5 cursor-pointer transition delay-300 scale-100 hover:scale-95 relative">
       <Link to={`/product/${id}`}>
-        <div className="transition delay-300 scale-100 hover:scale-95 dark:hover:brightness-75">
+        <div>
           <img
             onClick={window.scrollTo(0, 0)}
             src={image}
@@ -23,6 +28,17 @@ const Item = (props) => {
           </div>
         </div>
       </Link>
+      <button
+            onClick={() => {
+              AddToList(id);
+            }}
+            className="absolute top-0 right-0 mt-3 mr-3 bg-transparent border-none rounded"
+          >
+            {
+              listItem[id] ? <img src={filled_Wishlist} alt="wishlist" className="h-8 w-8 scale-100 hover:scale-95 rounded" /> :
+              <img src={outlined_Wishlist} alt="wishlist" className="h-8 w-8 scale-100 hover:scale-95 rounded" />
+            }
+          </button>
     </div>
   );
 };

src/Components/Popular.jsx

@@ -4,14 +4,18 @@ import Item from "./Item";
 
 const Popular = () => {
   return (
-    <div className="grid items-center grid-cols-1 ps-20 sm:p-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-7">
+    <div>
       <h1 className="text-4xl font-medium text-center font-Poppins mt-9 col-span-full">
         Popular In Women
       </h1>
-      <hr className="w-[200px] mx-auto h-2 bg-gray-400 rounded-xl col-span-full" />
-      {dataProduct.map((item) => {
-        return <Item data={item} key={item.id} />;
-      })}
+
+
+      <div className="grid items-center grid-cols-1 ps-20 sm:p-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-7">
+        {dataProduct.map((item) => {
+          return <Item data={item} key={item.id} />;
+        })}
+      </div>
+
     </div>
   );
 };

src/Context/SavedContext.jsx

@@ -13,9 +13,10 @@ const defaultWishlist = () => {
 const SavedContextProvider = (props) => {
   const [listItem, setListItem] = useState(defaultWishlist());
   const AddToList = (id) => {
+
     setListItem((prev) => {
 
-        const updatedState = { ...prev, [id]: true };
+        const updatedState = { ...prev, [id]: !listItem[id] };
         console.log(updatedState);
       return updatedState;