Wishlist Refactor by Backend API Integration

src/components/Product-listing/product-card/ProductCard.jsx

@@ -11,16 +11,14 @@ import {
   StarRoundedIcon,
 } from "assets";
 import {
-  ADD_TO_WISHLIST,
-  REMOVE_FROM_WISHLIST,
   ADD_TO_CART,
   REMOVE_FROM_CART,
 } from "utils";
 import "./productcard.css";
 
 const ProductCard = ({ product }) => {
   const navigate = useNavigate();
-  const { wishlistState, wishlistDispatch } = useWishlist();
+  const { wishlistState, removeFromWishlistHandler,addToWishlistHandler } = useWishlist();
   const { wishlist } = wishlistState;
   const { cartState, cartDispatch } = useCart();
   const { cart } = cartState;
@@ -41,28 +39,24 @@ const ProductCard = ({ product }) => {
 
   // Check if the product is in the wishlist
   const isFavorite =
-    wishlist && wishlist.find((wishlistProduct) => wishlistProduct._id === _id);
-
-  const toggleWishlist = (e) => {
-    e.stopPropagation();
-
-    if (!isLoggedIn) {
-      navigate("/login");
-      return;
-    }
-    const actionType = isFavorite ? REMOVE_FROM_WISHLIST : ADD_TO_WISHLIST;
-    const payload = isFavorite ? _id : product;
-
-    wishlistDispatch({
-      type: actionType,
-      payload,
-    });
-
-    const toastMessage = isFavorite
-      ? "Removed from wishlist"
-      : "Added to wishlist";
-    toast.success(toastMessage);
-  };
+  isLoggedIn && wishlist && wishlist.find((wishlistProduct) => wishlistProduct._id === _id);
+
+    const toggleWishlist = (e) => {
+      e.stopPropagation();
+
+      if (!isLoggedIn) {
+        navigate("/login");
+        return;
+      }
+
+      if (isFavorite) {
+        removeFromWishlistHandler(_id);
+        toast.success(`${product.name} removed from wishlist`);
+      } else {
+        addToWishlistHandler(product);
+        toast.success(`${product.name} added to wishlist`);
+      }
+    };
 
   //--------------For Cart----------------------//
 

src/components/cart/CartItem.jsx

@@ -3,12 +3,12 @@ import { toast } from  "react-hot-toast";
 import { useNavigate } from "react-router-dom";
 
 import { useCart, useWishlist } from "context";
-import { ADD_TO_WISHLIST, REMOVE_FROM_CART } from "utils";
+import { REMOVE_FROM_CART } from "utils";
 
 const CartItem = ({ product, quantity, setQuantity }) => {
   const navigate = useNavigate();
   const { cartDispatch } = useCart();
-  const { wishlistState,wishlistDispatch } = useWishlist();
+  const { wishlistState,addToWishlistHandler } = useWishlist();
   const { wishlist } = wishlistState;
 
   // Decrease the quantity of the cart item
@@ -34,13 +34,10 @@ const CartItem = ({ product, quantity, setQuantity }) => {
     e.stopPropagation();
     if (isProductInWishlist) {
         navigate("/wishlist");
-        toast.success("Already in Wishlist");
+        toast.success(`${product.name} is already in wishlist`);
       } else {
-        wishlistDispatch({
-          type: ADD_TO_WISHLIST,
-          payload: product,
-        });
-        toast.success("Added to Wishlist");
+        addToWishlistHandler(product);
+        toast.success(`${product.name} added to wishlist`);
       }
   };
 

src/components/product-details/ProductDetails.jsx

@@ -7,17 +7,23 @@ import {
   LocalShippingIcon,
   StarRoundedIcon,
 } from "assets";
-import { useCart, useProductsData, useWishlist } from "context";
-import { ADD_TO_CART, ADD_TO_WISHLIST } from "utils";
-import { toast } from  "react-hot-toast";
+import {
+  useAuth,
+  useCart,
+  useProductsData,
+  useWishlist,
+} from "context";
+import { ADD_TO_CART } from "utils";
+import { toast } from "react-hot-toast";
 import "./productdetails.css";
 
 const ProductDetails = () => {
   const { productId } = useParams();
   const navigate = useNavigate();
 
+  const { isLoggedIn } = useAuth();
   const { productsData } = useProductsData();
-  const { wishlistState, wishlistDispatch } = useWishlist();
+  const { wishlistState, addToWishlistHandler } = useWishlist();
   const { wishlist } = wishlistState;
   const { cartState, cartDispatch } = useCart();
   const { cart } = cartState;
@@ -26,12 +32,17 @@ const ProductDetails = () => {
     return product._id === productId;
   });
 
-  const isFavorite =
-    wishlist &&
-    wishlist.find((wishlistProduct) => wishlistProduct._id === product._id);
+  const isFavorite = wishlist && wishlist.find((wishlistProduct) => wishlistProduct._id === product._id);
+  const isAddedToCart = cart && cart.find((cartProduct) => cartProduct._id === product._id);
 
-  const isAddedToCart =
-    cart && cart.find((cartProduct) => cartProduct._id === product._id);
+  const handleAddToWishlist = () => {
+    if (isLoggedIn) {
+      addToWishlistHandler(product);
+      toast.success(`${product.name} added to wishlist`);
+    } else {
+      navigate("/login");
+    }
+  };
 
   return (
     <>
@@ -92,25 +103,15 @@ const ProductDetails = () => {
                 </span>
               )}
             </button>
-            <button className="product-detail-add-to-whishlist-btn">
-              {isFavorite ? (
-                <span onClick={() => navigate("/wishlist")}>
-                  Go To Wishlist
-                </span>
-              ) : (
-                <span
-                  onClick={() => {
-                    wishlistDispatch({
-                      type: ADD_TO_WISHLIST,
-                      payload: product,
-                    });
-                    toast.success("Added to wishlist");
-                  }}
-                >
-                  Add To Whishlist
-                </span>
-              )}
-            </button>
+            {isFavorite ? (
+              <button className="product-detail-add-to-whishlist-btn" onClick={() => navigate("/wishlist")}>
+                Go To Wishlist
+              </button>
+            ) : (
+              <button className="product-detail-add-to-whishlist-btn" onClick={handleAddToWishlist}>
+                Add To Wishlist
+              </button>
+            )}
           </div>
         </div>
       </div>

src/components/wishlist/Wishlist.jsx

@@ -7,12 +7,12 @@ import {
   DeleteOutlinedIcon,
   AddShoppingCartRoundedIcon,
 } from "assets";
-import { ADD_TO_CART, REMOVE_FROM_WISHLIST } from "utils";
+import { ADD_TO_CART } from "utils";
 import "./wishlist.css";
 
 const Wishlist = () => {
   const navigate = useNavigate();
-  const { wishlistState, wishlistDispatch } = useWishlist();
+  const { wishlistState ,removeFromWishlistHandler} = useWishlist();
   const { wishlist } = wishlistState;
   const { cartState, cartDispatch } = useCart();
   const { cart } = cartState;
@@ -27,13 +27,12 @@ const Wishlist = () => {
     toast.success("Already in cart");
   };
 
-  const handleRemoveFromWishlist = (e, productId) => {
+  const handleRemoveFromWishlist = (e, product) => {
     e.stopPropagation();
-    wishlistDispatch({
-      type: REMOVE_FROM_WISHLIST,
-      payload: productId,
-    });
-    toast.success("Item removed from wishlist");
+    removeFromWishlistHandler(
+      product._id
+    );
+    toast.success(`${product.name} removed from wishlist`);
   };
 
   return (
@@ -95,7 +94,7 @@ const Wishlist = () => {
                     <button
                       className="wishlist-delete-icon"
                       onClick={(e) =>
-                        handleRemoveFromWishlist(e, product._id)
+                        handleRemoveFromWishlist(e, product)
                       }
                     >
                       <DeleteOutlinedIcon className="delete-icon" />

src/context/wishlistContext.js

@@ -1,9 +1,21 @@
-import { createContext, useReducer, useContext } from "react";
+import React, { createContext, useReducer, useContext } from "react";
+
 import { wishlistReducer } from "reducer";
+import {
+  ADD_TO_WISHLIST,
+  REMOVE_FROM_WISHLIST,
+  SET_WISHLIST,
+  addToWishlist,
+  getWishlist,
+  removeFromWishlist,
+} from "utils";
+import { useAuth } from "./authContext";
 
 const WishlistContext = createContext();
 
 const WishlistContextProvider = ({ children }) => {
+  const { token } = useAuth();
+
   // Set the initial state for the wishlist context
   const initialState = {
     wishlist: [],
@@ -15,8 +27,46 @@ const WishlistContextProvider = ({ children }) => {
     initialState
   );
 
+  const fetchWishlist = async () => {
+    try {
+      const response = await getWishlist(token);
+      const { data } = response;
+      wishlistDispatch({ type: SET_WISHLIST, payload: data.wishlist });
+    } catch (error) {
+      console.error("Fetch Wishlist Error:", error);
+    }
+  };
+
+  const addToWishlistHandler = async (product) => {
+    try {
+      await addToWishlist(token, product);
+      wishlistDispatch({
+        type: ADD_TO_WISHLIST,
+        payload: product,
+      });
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const removeFromWishlistHandler = async (productId) => {
+    try {
+      await removeFromWishlist(token, productId);
+      wishlistDispatch({ type: REMOVE_FROM_WISHLIST, payload: productId });
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
   return (
-    <WishlistContext.Provider value={{ wishlistState, wishlistDispatch }}>
+    <WishlistContext.Provider
+      value={{
+        wishlistState,
+        fetchWishlist,
+        addToWishlistHandler,
+        removeFromWishlistHandler,
+      }}
+    >
       {children}
     </WishlistContext.Provider>
   );
@@ -25,4 +75,4 @@ const WishlistContextProvider = ({ children }) => {
 // Custom hook to consume the WishlistContext
 const useWishlist = () => useContext(WishlistContext);
 
-export { useWishlist, WishlistContextProvider };
+export { WishlistContextProvider, useWishlist };

src/reducer/wishlistReducer.js

@@ -1,21 +1,24 @@
-import { ADD_TO_WISHLIST, REMOVE_FROM_WISHLIST } from "utils";
+import { ADD_TO_WISHLIST, REMOVE_FROM_WISHLIST, SET_WISHLIST } from "utils";
 
 const wishlistReducer = (state, action) => {
   switch (action.type) {
+    case SET_WISHLIST:
+      return {
+        ...state,
+        wishlist: action.payload,
+      };
+
     case ADD_TO_WISHLIST:
       const { payload } = action;
 
-      // Check if the product is already in the wishlist
       const isAlreadyInWishlist = state.wishlist.some(
         (item) => item._id === payload._id
       );
 
-      // If the item is already in the wishlist, return the current state
       if (isAlreadyInWishlist) {
         return state;
       }
 
-      // Add the item to the wishlist
       const updatedWishlist = [...state.wishlist, payload];
 
       return {
@@ -24,7 +27,6 @@ const wishlistReducer = (state, action) => {
       };
 
     case REMOVE_FROM_WISHLIST:
-      // Remove the item from the wishlist
       return {
         ...state,
         wishlist: state.wishlist.filter(

src/utils/constants.js

@@ -6,6 +6,7 @@ const SORT_BY_RATING = "SORT_BY_RATING";
 const FILTER_BY_SECTION = "FILTER_BY_SECTION";
 const FILTER_BY_CATEGORY = "FILTER_BY_CATEGORY";
 const CLEAR_FILTERS = "CLEAR_FILTERS";
+const SET_WISHLIST = "SET_WISHLIST";
 const ADD_TO_WISHLIST = "ADD_TO_WISHLIST";
 const REMOVE_FROM_WISHLIST = "REMOVE_FROM_WISHLIST";
 const ADD_TO_CART = "ADD_TO_CART";
@@ -19,6 +20,7 @@ export {
   FILTER_BY_SECTION,
   FILTER_BY_CATEGORY,
   CLEAR_FILTERS,
+  SET_WISHLIST,
   ADD_TO_WISHLIST,
   REMOVE_FROM_WISHLIST,
   ADD_TO_CART,

src/utils/index.js

@@ -17,9 +17,15 @@ export {
   FILTER_BY_SECTION,
   FILTER_BY_CATEGORY,
   CLEAR_FILTERS,
+  SET_WISHLIST,
   ADD_TO_WISHLIST,
   REMOVE_FROM_WISHLIST,
   ADD_TO_CART,
   REMOVE_FROM_CART,
 } from "./constants";
 export { loginService, signupService } from "./authServices";
+export {
+  getWishlist,
+  addToWishlist,
+  removeFromWishlist,
+} from "./wishlistServices";