Wishlist-carditem Functionality Partially completed - Gaurav

src/App.jsx

@@ -26,6 +26,7 @@ import Relate from "./pages/Relation";
 import AuthenticityPage from "./pages/AuthenticityPage";
 import AddToCart from "./components/ProductList/AddToCart";
 import ContactUs from "./pages/ContactUs";
+import WishList from './components/profilePage/Arpana/Wishlist'
 
 function App() {
   const { pathname } = useLocation();
@@ -43,8 +44,8 @@ function App() {
         <Route path="/profile" element={<ProfilePage />} />
         <Route path="/product-description" element={<ProductDetails />} />
 
-        {/* Login page
-        <Route path="/login" element={<Auth />} /> */}
+
+        <Route path="/wishlist" element={<WishList />} />
 
 
         {/* Other Pages */}

src/components/Home/Header/Navbar1.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef  , useContext} from "react";
 import {
   FiMenu,
   FiSearch,
@@ -15,8 +15,10 @@ import { FaBars } from "react-icons/fa6";
 import { Divueens } from "../../../assets/assets";
 import navItemData from "./NavDropDownItems";
 import SearchBoxMob from "./SearchBoxMob";
+import {CartContext} from '../../../context/CartContext';
 
 const Navbar1 = ({ navItemText }) => {
+  const {numCartItem} = useContext(CartContext)
   const [openDropdown, setOpenDropdown] = useState(false);
   const [displayAuth, setDisplayAuth] = useState(false);
   const [isDrop, setIsDrop] = useState(false);
@@ -83,12 +85,15 @@ const Navbar1 = ({ navItemText }) => {
                 <SearchBox />
               </div>
               <div className="hidden lg:flex space-x-6 text-slate-500">
-                <button className="md:pl-7 hover:text-rose-800">
-                <NavLink to="/addtocart"> <FiShoppingCart size={20} /> </NavLink>
+                <button className="relative md:pl-7 hover:text-rose-800 px-4">
+                <NavLink to="/addtocart"> <FiShoppingCart size={30} /> </NavLink>
+                <div className="absolute rounded-full top-0 right-0 w-[20px] h-[20px] bg-rose-600 text-white">{numCartItem}</div>
                 </button>
+                <NavLink to='/wishlist'>
                 <button className=" md:hover:text-rose-800">
                   <FiHeart size={20} />
                 </button>
+                </NavLink>
                 <NavLink to='/profile'>
                 <button
                   className=" hover:text-rose-800"

src/components/ProductList/AddToCart.jsx

@@ -1,11 +1,13 @@
-import { useState , useEffect} from "react";
+import { useState , useEffect, useContext} from "react";
 import { RiDeleteBin6Line, RiDiscountPercentLine} from "react-icons/ri";
 import { FaStar , FaChevronRight } from "react-icons/fa6";
 // import { product1, product2 } from '../../assets/assets'
 import allItemData from './ProductListItemData';
 import CartItem from './cardItem2'
+import {CartContext} from '../../context/CartContext';
 
 function Cart() {
+  const {subCartItemNumber} = useContext(CartContext)
   const [arrayOfCartItemId, setArrayOfCartItemId] = useState(JSON.parse(localStorage.getItem("Item-Id")) || []);
     const [cartItemData , setCartItemData] = useState([]);
   const [itemData , setItemData] = useState(allItemData)
@@ -20,6 +22,7 @@ function Cart() {
     },[arrayOfCartItemId,itemData]);
 
     const toRemoveItemFromCart =  (itemId) => {
+      subCartItemNumber()
          setArrayOfCartItemId((prevArray) => {
             const updatedCartArray = prevArray.filter((val) => val !== itemId);
             localStorage.setItem("Item-Id", JSON.stringify(updatedCartArray));

src/components/ProductList/CardItem.jsx

@@ -1,13 +1,14 @@
-import React, { useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 // import { Lipstick } from '../../../assets/assets'
 import productDetails from './ProductListItemData'
 import { FaHeart, FaRegHeart, FaStar } from 'react-icons/fa6';
 import { Link } from 'react-router-dom';
-import AddCart from './AddCart';
+// import AddCart from './AddCart';
+import {CartContext} from '../../context/CartContext';
 
 
 const CardItem = ({ item }) => {
-
+    const {addCartItemNumber , subCartItemNumber} = useContext(CartContext)
     const [currentPage, setCurrentPage] = useState(1);
     const lastPage = Math.ceil(item.length / 12)
     const [likedCards, setLikedCards] = useState({});
@@ -17,12 +18,10 @@ const CardItem = ({ item }) => {
         const storedItems = JSON.parse(localStorage.getItem("Item-Id")) || [];
         setCardItem(storedItems);
 
-        // return () => {
-        //   setCardItem(storedItems)
-        // }
     }, []);
 
     const addingItemToCart = (ItemId) => {
+        // addCartItemNumber()
         let updatedItems;
         if (cardItem.includes(ItemId)) {
             updatedItems = cardItem.filter(id => id !== ItemId);
@@ -83,7 +82,14 @@ const CardItem = ({ item }) => {
                             </div>
                             <div className="flex items-end justify-between absolute bottom-6 sm:gap-2 lg:-bottom-4 xl:-bottom-2 left-0 right-0">
                                 <span className="font-semibold text-[0.8rem] sm:text-[1rem] md:text-base lg:text-lg">₹ {p.price}</span>
-                                <button className='bg-rose-600 text-white md:w-[120px] rounded-full text-[0.7rem] sm:text-[0.8rem] px-2 py-1 md:p-3 lg:text-base' onClick={() => addingItemToCart(p.id)}>{isInCart ? "Remove from Cart" : "Add to Cart"}</button>
+                                <button className='bg-rose-600 text-white md:w-[120px] rounded-full text-[0.7rem] sm:text-[0.8rem] px-2 py-1 md:p-3 lg:text-base' onClick={() => {
+                                    if (isInCart) {
+                                        subCartItemNumber()
+                                    addingItemToCart(p.id)}
+                                    else{
+                                        addCartItemNumber()
+                                        addingItemToCart(p.id)
+                                    }}}>{isInCart ? "Remove from Cart" : "Add to Cart"}</button>
                             </div>
                         </div>
 

src/components/profilePage/Arpana/Wishlist.jsx

@@ -1,29 +1,36 @@
-import  { useEffect, useState } from 'react';
+import  { useContext, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { FaHeart} from 'react-icons/fa';
 import Trash from '../../../assets/trash.png';
 import Share from '../../../assets/share.png';
 import productData from '../../ProductList/ProductListItemData';
+import {CartContext} from '../../../context/CartContext';
+import Cart from '../../ProductList/AddToCart';
 
 const Wishlist = () => {
+  const {addCartItemNumber , subCartItemNumber} = useContext(CartContext)
   const [wishlist, setWishlist] = useState([]);
   const [wishListItem , setWishListItem] = useState(productData)
+  const [addCartItemList , setCartItemList] = useState([...new Set(JSON.parse(localStorage.getItem('wishlist')))] || [])
 
   useEffect(() => {
     const storedWishlist = [...new Set(JSON.parse(localStorage.getItem('wishlist')))] || [];
     setWishlist(storedWishlist);
     const tempData = wishListItem.filter(product => storedWishlist.includes(product.id));
-    setWishListItem(tempData)
+    if(wishListItem !== tempData)setWishListItem(tempData)
+
   }, [wishListItem]);
 
   const handleRemoveFromWishlist = (id) => {
+    subCartItemNumber()
     const updatedWishlist = wishlist.filter(item => item !== id);
     setWishlist(updatedWishlist);
     localStorage.setItem('wishlist', JSON.stringify(updatedWishlist));
   }; 
 
-  const [cardItem, setCardItem] = useState([]);
+  const [cardItem, setCardItem] = useState([...new Set(JSON.parse(localStorage.getItem('wishlist')))] || []);
   const addingItemToCart = (ItemId) => {
+
     let updatedItems;
     if (cardItem.includes(ItemId)) {
         updatedItems = cardItem.filter(id => id !== ItemId);
@@ -70,7 +77,14 @@ const Wishlist = () => {
               </div>
               <div className="font-semibold text-[0.8rem] sm:text-sm md:text-base lg:text-lg my-3 ">MRP: ₹ {item.price}</div>
               <div className="flex  sm:gap-4 gap-2 lg:-bottom-4 xl:-bottom-2 left-0 right-0">
-                <button className="bg-pink-400 font-bold  text-white  rounded-2xl text-[0.7rem]  px-6 py-1  lg:text-base" onClick={() => addingItemToCart(item.id)}>{isInCart ? "Remove from Cart" : "Add to Cart"}</button>
+                <button className="bg-pink-400 font-bold  text-white  rounded-2xl text-[0.7rem]  px-6 py-1  lg:text-base" onClick={() => {
+                  if (isInCart) {
+                    subCartItemNumber()
+                    addingItemToCart(item.id)}
+                else{
+                    addCartItemNumber()
+                    addingItemToCart(item.id)
+                  }}}>{isInCart ? "Remove from Cart" : "Add to Cart"}</button>
                 <button><img src={Share}  className='md:h-6 h-5' /> </button>
               </div>
             </div>

src/components/profilePage/GauravAndMahak/LogOut.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Navigate , NavLink } from "react-router-dom";
+import { AiOutlineLogout } from "react-icons/ai";
+
+function LogOut() {
+  const handleLogout = () => {
+    localStorage.removeItem("token");
+    Navigate("/");
+  };
+  return (
+    <div>
+      <div onClick={handleLogout} className="flex justify-center items-center">
+        <NavLink to="/" className="flex justify-center items-center gap-3 py-3 px-5 text-rose-600 bg-transparent border-[2px] border-rose-600 rounded-lg hover:bg-rose-600 hover:text-white">
+          <button >
+            Log Out !
+          </button>
+          <AiOutlineLogout size={25}/>
+        </NavLink>
+
+      </div>
+    </div>
+  );
+}
+
+export default LogOut;

src/components/profilePage/GauravAndMahak/MyProfilePage.jsx

@@ -46,9 +46,9 @@ const MyProfilePage = () => {
     setPicture(null);
   };
 
-  const handleChange = (e) => {
-    setProfile({ ...profile, [e.target.name]: e.target.value });
-  };
+  // const handleChange = (e) => {
+  //   setProfile({ ...profile, [e.target.name]: e.target.value });
+  // };
 
   const handleSave = () => {
     setIsEditing(false);
@@ -81,8 +81,8 @@ const MyProfilePage = () => {
               <input
                 name="name"
                 type="text"
-                value={profile.name || name}
-                onChange={(e) => setProfile({ ...profile, name: e.target.value })}
+                value={profile.name}
+                onChange={(e) => setProfile({name: e.target.value })}
                 className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
               />
             </div>
@@ -93,8 +93,8 @@ const MyProfilePage = () => {
               <input
                 name="email"
                 type="tel"
-                value={profile.email || email}
-                onChange={(e) => setProfile({ ...profile, email: e.target.value })}
+                value={profile.email }
+                onChange={(e) => setProfile({ email: e.target.value })}
                 className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
               />
             </div>
@@ -105,8 +105,8 @@ const MyProfilePage = () => {
               <input
                 name="phoneNumber"
                 type="tel"
-                value={profile.phoneNumber || contact}
-                onChange={(e) => setProfile({ ...profile, phoneNumber: e.target.value })}
+                value={profile.phoneNumber }
+                onChange={(e) => setProfile({ phoneNumber: e.target.value })}
                 className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
               />
             </div>
@@ -117,8 +117,8 @@ const MyProfilePage = () => {
               <input
                 name="birthday"
                 type="date"
-                value={profile.birthday || birthday}
-                onChange={(e) => setProfile({ ...profile, birthday: e.target.value })}
+                value={profile.birthday }
+                onChange={(e) => setProfile({ birthday: e.target.value })}
                 className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
               />
             </div>
@@ -130,8 +130,8 @@ const MyProfilePage = () => {
                     type="radio"
                     name="gender"
                     value="Female"
-                    checked={profile.gender === 'Female' || gender === 'Female'}
-                    onChange={(e) => setProfile({ ...profile, gender: e.target.value })}
+                    checked={profile.gender === 'Female'}
+                    onChange={(e) => setProfile({  gender: e.target.value })}
                     className="mr-1"
                   />
                   Female
@@ -141,8 +141,8 @@ const MyProfilePage = () => {
                     type="radio"
                     name="gender"
                     value="Male"
-                    checked={profile.gender === 'Male' || gender === 'Male'}
-                    onChange={(e) => setProfile({ ...profile, gender: e.target.value })}
+                    checked={profile.gender === 'Male' }
+                    onChange={(e) => setProfile({ gender: e.target.value })}
                     className="mr-1"
                   />
                   Male

src/components/profilePage/ProfilePage.jsx

@@ -9,6 +9,7 @@ import MyProfilePage from './GauravAndMahak/MyProfilePage';
 // import AddressCard from './GauravAndMahak/AddressPage';
 import Wishlist from './Arpana/Wishlist';
 import MyOrder from './Jatin/myOrder';
+import LogoutPage from './GauravAndMahak/LogOut';
 
 function ProfilePage() {
     const [isTabActive, setIsTabActive] = useState('');
@@ -26,7 +27,7 @@ function ProfilePage() {
             case 'myorders':
                 return <MyOrder />;
             case 'logout':
-                return <><div className='flex justify-center items-center '><button className='py-3 px-5 text-rose-600 bg-transparent border-[2px] border-rose-600 rounded-lg hover:bg-rose-600 hover:text-white'>Log Out !</button></div></>;
+                return <LogoutPage />;
             default:
                 return <MyProfilePage />;
         }

src/context/CartContext.jsx

@@ -0,0 +1,23 @@
+import { createContext , useState } from 'react';
+
+export const CartContext = createContext(null);
+
+export const CartCountProvider = (props) => {
+   const [numCartItem , setNumCartItem] = useState(Math.max( 0))
+   const addCartItemNumber = () => {
+    setNumCartItem(Math.max(numCartItem + 1 , 0))
+   }
+   const subCartItemNumber = () => {
+    setNumCartItem(Math.max(numCartItem - 1 , 0))
+   }
+  return (
+    <CartContext.Provider value={{
+      numCartItem , 
+      setNumCartItem,
+      addCartItemNumber,
+      subCartItemNumber
+    }}>
+      {props.children}
+    </CartContext.Provider>
+  )
+}