Merge pull request #121 from TanayMaurya84/wishlist

Added feature of Wishlist(Saving items for future reference)! #23

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 About from "./Pages/About";
 
 import "./index.css";
@@ -28,12 +29,16 @@ 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 />} />
         <Route path="/about" element={<About/>} />
+
       </Routes>
     </Router>
   );
 };
 
+
+
 const LoginWithFooter = () => (
   <>
     <Login />
@@ -69,4 +74,13 @@ const ShopCategoryWithFooter = ({ banner, category }) => (
   </>
 );
 
+const WishlistWithFooter=()=>(
+
+  <>
+    <Saved />
+    <Footer />
+  </>
+
+);
+
 export default App;

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>
   );

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 (product.size === "") {
@@ -113,6 +115,20 @@ 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 toastStyle={{backgroundColor: "lightgreen" , color: "black", fontWeight:"bold",marginTop:"28px"}}/>
         </div>
         <div className="flex flex-col my-2">

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>*/

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;

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;
+

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>,
 )