From 6c6f8ad72bc10b6c978d215df34bd698c8e65e52 Mon Sep 17 00:00:00 2001
From: unknown <tanaymaurya6704@gmail.com>
Date: Tue, 14 May 2024 03:05:40 +0530
Subject: [PATCH 1/2] feature_of_wishlist_added

---
 src/App.jsx                       |  13 ++++
 src/Components/Navbar.jsx         |  10 +++
 src/Components/ProductDisplay.jsx |  15 +++-
 src/Components/SavedItems.jsx     | 109 ++++++++++++++++++++++++++++++
 src/Context/SavedContext.jsx      |  75 ++++++++++++++++++++
 src/Pages/WishList.jsx            |  13 ++++
 src/assets/wishlist_icon.png      | Bin 0 -> 3900 bytes
 src/main.jsx                      |   6 +-
 8 files changed, 239 insertions(+), 2 deletions(-)
 create mode 100644 src/Components/SavedItems.jsx
 create mode 100644 src/Context/SavedContext.jsx
 create mode 100644 src/Pages/WishList.jsx
 create mode 100644 src/assets/wishlist_icon.png

diff --git a/src/App.jsx b/src/App.jsx
index 557f163..4927037 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -10,6 +10,7 @@ import Login from "./Pages/Login";
 import Product from "./Pages/Product";
 import Shop from "./Pages/Shop";
 import ShopCategory from "./Pages/ShopCategory";
+import Saved from "./Pages/WishList"
 
 import "./index.css";
 import Signup from "./Pages/Signup";
@@ -27,11 +28,14 @@ const App = () => {
         <Route path="/kids" element={<ShopCategoryWithFooter banner={kids_banner} category="kid" />} />
         <Route path="/product/:productId" element={<ProductWithFooter />} />
         <Route path="/cart" element={<CartWithFooter />} />
+        <Route path="/wishlist" element={<WishlistWithFooter />} />
       </Routes>
     </Router>
   );
 };
 
+
+
 const LoginWithFooter = () => (
   <>
     <Login />
@@ -67,4 +71,13 @@ const ShopCategoryWithFooter = ({ banner, category }) => (
   </>
 );
 
+const WishlistWithFooter=()=>(
+  
+  <>
+    <Saved />
+    <Footer />
+  </>
+  
+);
+
 export default App;
diff --git a/src/Components/Navbar.jsx b/src/Components/Navbar.jsx
index bf0be38..0e6a1f5 100644
--- a/src/Components/Navbar.jsx
+++ b/src/Components/Navbar.jsx
@@ -1,10 +1,14 @@
 import React, { useState, useContext } from "react";
 import { Link } from "react-router-dom";
 import { ShopContext } from "../Context/ShopContext";
+import {SavedContext} from "../Context/SavedContext"
 import Cart from "../assets/cart_icon.png";
+import Wishlist from "../assets/wishlist_icon.png";
+
 
 const Navbar = () => {
   const { getCartQuantity } = useContext(ShopContext);
+  const { getListQuantity }=useContext(SavedContext);
   return (
     <div className="flex items-center justify-around bg-white shadow-md  top-0 left-0 w-screen">
       <div className="text-orange-400 font-bold text-2xl mx-5 text-center">
@@ -54,6 +58,12 @@ const Navbar = () => {
         <div className="relative -top-2 right-[10px] bg-orange-400 rounded-full w-4 h-4 text-xs text-white text-center pointer-events-none">
           {getCartQuantity()}
         </div>
+        <Link to="/wishlist">
+          <img src={Wishlist} alt="wishlist" className="w-6 h-6 cursor-pointer" />
+        </Link>
+        <div className="relative -top-2 right-[10px] bg-orange-400 rounded-full w-4 h-4 text-xs text-white text-center pointer-events-none">
+          {getListQuantity()}
+        </div>
       </div>
     </div>
   );
diff --git a/src/Components/ProductDisplay.jsx b/src/Components/ProductDisplay.jsx
index 15234f0..61c0aff 100644
--- a/src/Components/ProductDisplay.jsx
+++ b/src/Components/ProductDisplay.jsx
@@ -2,12 +2,14 @@ import React, { useContext, useState } from "react";
 import starIcon from "../assets/star_icon.png";
 import starDullIcon from "../assets/star_dull_icon.png";
 import { ShopContext } from "../Context/ShopContext";
+import { SavedContext } from "../Context/SavedContext"
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 
 const ProductDisplay = (props) => {
   const { product } = props.data;
   const { AddToCart } = useContext(ShopContext);
+  const  { AddToList }=useContext(SavedContext);
   const [selectedSize, setSelectedSize] = useState("");
 
   const handleSizeClick = (size) => {
@@ -95,7 +97,7 @@ const ProductDisplay = (props) => {
             </button>
           </div>
         </div>
-        <div className="flex items-center mb-2 justify-start">
+        <div className="flex items-center mb-2 justify-start space-x-4">
           <button
             onClick={() => {
               if (selectedSize === "") {
@@ -109,6 +111,17 @@ const ProductDisplay = (props) => {
           >
             Add to Cart
           </button>
+
+          <button
+            onClick={() => {
+              
+              AddToList(product.id);
+              toast.success("Added to Wishlist");
+            }}
+            className="bg-blue-950 w-40 text-white px-4 py-2 rounded"
+          >
+            Add to Wishlist
+          </button>
           <ToastContainer />
         </div>
         <div className="flex flex-col my-2">
diff --git a/src/Components/SavedItems.jsx b/src/Components/SavedItems.jsx
new file mode 100644
index 0000000..15eb4cc
--- /dev/null
+++ b/src/Components/SavedItems.jsx
@@ -0,0 +1,109 @@
+
+import React from "react"
+import {useContext} from "react"
+import {SavedContext} from "../Context/SavedContext"
+import { ShopContext } from "../Context/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;
+
+/*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>
+    )
+}*/
+
+
+
+/*<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>*/
diff --git a/src/Context/SavedContext.jsx b/src/Context/SavedContext.jsx
new file mode 100644
index 0000000..267d3e2
--- /dev/null
+++ b/src/Context/SavedContext.jsx
@@ -0,0 +1,75 @@
+import react, { createContext, useState } from "react";
+import all_products from "../assets/all_product";
+export const SavedContext = createContext(null);  //ContextAPI for providing state variables to components of Wishlist
+
+const defaultWishlist = () => {
+  let list = {};
+  for (let index = 0; index < all_products.length; index++) {
+    list[index] = false;
+  }
+  return list;
+};
+
+const SavedContextProvider = (props) => {
+  const [listItem, setListItem] = useState(defaultWishlist());
+  const AddToList = (id) => {
+    setListItem((prev) => {
+      
+        const updatedState = { ...prev, [id]: true };
+        console.log(updatedState);
+      return updatedState;
+      
+      
+    });
+  };
+
+  const RemoveFromList = (id) => {
+    if (listItem[id]) {
+      setListItem((prev) => {
+        
+        const updatedState = { ...prev, [id]: false };
+        
+        console.log(updatedState);
+        return updatedState;
+      });
+    }
+  };
+
+  /*const getCartTotalAmount = () => {
+    let totalAmount = 0;
+    for (const item in cartItem) {
+      if (cartItem[item] > 0) {
+        let itemInfo = all_products.find(
+          (product) => product.id === Number(item)
+        );
+        totalAmount += cartItem[item] * itemInfo.new_price;
+      }
+    }
+    return totalAmount;
+  };*/
+
+  const getListQuantity = () => {
+    let totalQuantity = 0;
+    for (const item in listItem) {
+      if (listItem[item]) {
+        totalQuantity ++;
+      }
+    }
+    return totalQuantity;
+  };
+
+  const contextValue = {
+    all_products,
+    listItem,
+    AddToList,
+    RemoveFromList,
+    getListQuantity,
+  };
+  return (
+    <SavedContext.Provider value={contextValue}>
+      {props.children}
+    </SavedContext.Provider>
+  );
+};
+
+export default SavedContextProvider;
diff --git a/src/Pages/WishList.jsx b/src/Pages/WishList.jsx
new file mode 100644
index 0000000..616bd37
--- /dev/null
+++ b/src/Pages/WishList.jsx
@@ -0,0 +1,13 @@
+import React from "react"
+import SavedItems from "../Components/SavedItems"
+
+
+const Saved=()=>{
+    return(
+        <div>
+            <SavedItems />
+        </div>
+    )
+}
+export default Saved;
+
diff --git a/src/assets/wishlist_icon.png b/src/assets/wishlist_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..67a9e4f897c33523bf78464286df5efadb2abae0
GIT binary patch
literal 3900
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
KMNUMnLSTYxhjJzW

literal 0
HcmV?d00001

diff --git a/src/main.jsx b/src/main.jsx
index b14ad48..2d772bb 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -3,9 +3,13 @@ import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
 import './index.css'
 import ShopContextProvider from './Context/ShopContext.jsx'
+import SavedContextProvider from './Context/SavedContext.jsx';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <ShopContextProvider>
-    <App />
+    <SavedContextProvider>
+      <App/>
+    </SavedContextProvider>
+    
   </ShopContextProvider>,
 )

From b72236bf77205d365c013730804311e3487f9dd9 Mon Sep 17 00:00:00 2001
From: unknown <tanaymaurya6704@gmail.com>
Date: Tue, 14 May 2024 12:52:27 +0530
Subject: [PATCH 2/2] feature_after_resolving_conflict

---
 src/Components/ProductDisplay.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/ProductDisplay.jsx b/src/Components/ProductDisplay.jsx
index 61c0aff..bfa4f8a 100644
--- a/src/Components/ProductDisplay.jsx
+++ b/src/Components/ProductDisplay.jsx
@@ -122,7 +122,7 @@ const ProductDisplay = (props) => {
           >
             Add to Wishlist
           </button>
-          <ToastContainer />
+          <ToastContainer toastStyle={{backgroundColor: "lightgreen" , color: "black", fontWeight:"bold",marginTop:"28px"}}/>
         </div>
         <div className="flex flex-col my-2">
           <p>