From 3a8ff23a451d16ca96668b15dc541fefd10af628 Mon Sep 17 00:00:00 2001
From: dharshib <Dharshib.8@gmail.com>
Date: Tue, 4 Jun 2024 08:22:39 +0530
Subject: [PATCH] added wishlist empty message wrapper

---
 src/Components/SavedItems.jsx | 163 ++++++++++++++--------------------
 1 file changed, 68 insertions(+), 95 deletions(-)

diff --git a/src/Components/SavedItems.jsx b/src/Components/SavedItems.jsx
index 15eb4cc..c3590f3 100644
--- a/src/Components/SavedItems.jsx
+++ b/src/Components/SavedItems.jsx
@@ -1,109 +1,82 @@
 
 import React from "react"
-import {useContext} from "react"
-import {SavedContext} from "../Context/SavedContext"
+import { useContext } from "react"
+import { SavedContext } from "../Context/SavedContext"
 import { ShopContext } from "../Context/ShopContext";
+import { Link } from "react-router-dom";
 
 
-const SavedItems=()=>{
-    const {all_products,listItem,AddToList,RemoveFromList,getListQuantity}=useContext(SavedContext)
-    const {AddToCart}=useContext(ShopContext)
+const SavedItems = () => {
+    const { all_products, listItem, AddToList, RemoveFromList, getListQuantity } = useContext(SavedContext)
+    const { AddToCart } = useContext(ShopContext)
 
 
-    return(
-        <>
-        
-        <div className="flex my-50"><p className="font-normal ">Total products Wishlisted:  </p><p className="font-bold">{getListQuantity()}</p></div>
-        
-        <div className="grid grid-cols-3 ">
-        {
-        all_products.map((item) => {
-          if (listItem[item.id] > 0) {
-            return(
-                <div className="h-220 w-94 bg-white space-x-7" key={item.id}>
-            <img src={item.image} alt={item.name} className="h-150 w-92"/>
-            <div className="h-150 w-92">
-            <p className="font-semibold font-serif">
-                {(item.name.length > 40) ? (
-    // Truncate the name to the maximum length
-                    item.name.substring(0, 40) + "..."
-                ): (item.name)
-                }
-            </p>
-            <p className="font-mono font-bold">Category: {item.category}</p>
-            <div className="grid grid-cols-2">
-                <div><p className="font-bold text-green-900">${item.new_price}</p></div>
-                <div><p className="line-through text-red-600">${item.old_price}</p></div>
-            
-            </div>
-            <div className="flex space-x-20">
-            
-                <div><button onClick={()=>{
-                    RemoveFromList(item.id)
-                    }} className="bg-blue-950 text-white p-4 font-bold">Remove</button></div>
-                <div><button  className="bg-red-700 text-white p-4 font-extrabold" onClick={()=>{
-                    AddToCart(item.id)
-                }}>Add to Cart</button></div>
-            
-            </div>
-            </div>
-
-            
-        </div>
-            )
-          }
-        })
-        }
-    
-    
-
-        </div>
-        
-        </>
-    )
-}
-
-export default SavedItems;
+    const wishlistItems = all_products.filter(item => listItem[item.id] > 0)
+    console.log(wishlistItems)
 
-/*function CardComponent(item){
-    return(
-
-        <div className="h-220 w-94 bg-white">
-            <img src={item.image} alt={item.name} className="h-150 w-92"/>
-            <p className="font-semibold">{item.name}</p>
-            <p className="font-normal">#Category:{item.category}</p>
-            <div className="flex justify-between">
-                <p className="font-bold text-green-900">${item.new_price}</p>
-                <p className="line-through text-red-600">${item.old_price}</p>
-            
-            </div>
-
-            
-        </div>
-    )
-}*/
 
+    return (
+        <>
 
+            {
+                wishlistItems.length === 0 ? (
+                    <div className="grid place-items-center w-full py-20">
+                        <h1 className="text-lg text-orange-500 mb-2">Your wishlist is empty!</h1>
+                        <p className="text-center">Seems like you do not have any wishes here. <br /> Make a wish!</p>
+                        <Link to="/"><button className="px-5 py-3 bg-orange-500 rounded-full my-4 text-white hover:bg-orange-600">Start shopping</button></Link>
+                    </div>
+                ) : <>
+                    <div className="flex my-4 px-4">
+                        <p className="font-normal ">Total products Wishlisted:  </p><p className="font-bold">{getListQuantity()}</p>
+                    </div>
+                    <div className="grid grid-cols-3 p-4">
+                        {
+                            wishlistItems.map((item) => {
+                                return (
+                                    <div className="h-220 w-94 bg-white space-x-7" key={item.id}>
+                                        <img src={item.image} alt={item.name} className="h-150 w-92" />
+                                        <div className="h-150 w-92">
+                                            <p className="font-semibold font-serif">
+                                                {(item.name.length > 40) ? (
+                                                    // Truncate the name to the maximum length
+                                                    item.name.substring(0, 40) + "..."
+                                                ) : (item.name)
+                                                }
+                                            </p>
+                                            <p className="font-mono font-bold">Category: {item.category}</p>
+                                            <div className="grid grid-cols-2">
+                                                <div><p className="font-bold text-green-900">${item.new_price}</p></div>
+                                                <div><p className="line-through text-red-600">${item.old_price}</p></div>
+
+                                            </div>
+                                            <div className="flex space-x-20">
+
+                                                <div><button onClick={() => {
+                                                    RemoveFromList(item.id)
+                                                }} className="bg-blue-950 text-white p-4 font-bold">Remove</button></div>
+                                                <div><button className="bg-red-700 text-white p-4 font-extrabold" onClick={() => {
+                                                    AddToCart(item.id)
+                                                }}>Add to Cart</button></div>
+
+                                            </div>
+                                        </div>
+
+
+                                    </div>
+                                )
+                            })
+                        }
+
+
+
+                    </div>
+                </>
+            }
 
-/*<div className="flex justify-between bg-pink-300">
-        {
-        all_products.map((item) => {
-          if (listItem[item.id] > 0) {
-            return(
-                <CardComponent item={item}/>
-            )
-          }
-        })
-        }
-    
-    
 
-        </div>*/
 
+        </>
+    )
+}
 
-/*<div className="flex justify-between">
-                <button onClick={()=>{
-                    RemoveFromList(item.id)
-                    }} className="bg-blue-950 text-white">Remove</button>
-                <button  className="bg-red-700 text-white">Add to Cart</button>
-            </div>*/
+export default SavedItems;