Applied redux store in all components

src/components/cart/Cart.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { useCartData } from '../../contexts/CartDataContext.jsx';
 import CartItem from './CartItem.jsx';
 import PlaceOrderWindow from './PlaceOrderWindow.jsx';
+import { useCartItems } from '../../hooks/useStoreItems.js';
 
 export default function Cart() {
 
-    // Getting cartItems from CartData context
-    const { cartItems } = useCartData();
+    // Getting cartItems from store.
+    const cartItems = useCartItems();
 
     return (
         <div>

src/components/cart/CartItem.jsx

@@ -1,15 +1,19 @@
 import React, { useEffect } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useCartData } from '../../contexts/CartDataContext.jsx';
-import { useWishlistData } from '../../contexts/WishlistDataContext.jsx';
+import useWishlistActions from '../../hooks/wishlistReducerHooks.js';
+import { useIsItemInWishlist } from '../../hooks/useStoreItems.js';
+import useCartActions from '../../hooks/cartReducerHooks.js';
 
 export default function CartItem({ item }) {
 
-    // Getting functions from CartData context.
-    const { removeItemFromCart, incrementItemCount, decrementItemCount } = useCartData();
+    // Getting functions to manage cart.
+    const { removeItemFromCart, incrementItemCount, decrementItemCount } = useCartActions();
 
-    // Getting functions from WishlistData context.
-    const { addItemToWishlist, removeItemFromWishlist, isItemInWishlist } = useWishlistData();
+    // Getting functions to manage wishlist.
+    const { addItemToWishlist, removeItemFromWishlist } = useWishlistActions();
+
+    // Function to know whether item is already in wishlist.
+    const isItemInWishlist = useIsItemInWishlist();
 
     // Getting item details.
     const { image: itemImage, name: itemName, originalPrice: itemPrice, discountPercentage, count: itemQuantity } = item;
@@ -96,4 +100,4 @@ export default function CartItem({ item }) {
             </div>
         </div>
     );
-}
+};

src/components/cart/PlaceOrderWindow.jsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { useCartData } from '../../contexts/CartDataContext.jsx';
+import { useCartItems } from '../../hooks/useStoreItems.js';
 
 export default function PlaceOrderWindow() {
 
-    // Getting cart items from CartData context.
-    const { cartItems } = useCartData();
+    // Getting cart items from store.
+    const cartItems = useCartItems();
 
     // State for total price.
     const [totalPrice, setTotalPrice] = useState(0);

src/components/products/ProductCard.jsx

@@ -2,16 +2,23 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useCartData } from '../../contexts/CartDataContext.jsx';
-import { useWishlistData } from '../../contexts/WishlistDataContext.jsx';
+import useCartActions from '../../hooks/cartReducerHooks.js';
+import { useIsItemInCart, useIsItemInWishlist } from '../../hooks/useStoreItems.js';
+import useWishlistActions from '../../hooks/wishlistReducerHooks.js';
 
 export default function ProductCard({ productDetails }) {
 
-    // Getting required functions from CartData context.
-    const { addItemToCart, removeItemFromCart, isItemInCart } = useCartData();
+    // Getting functions to add and remove items form cart.
+    const { addItemToCart, removeItemFromCart } = useCartActions();
 
-    // Getting required functions from WishlistDataContext.
-    const { addItemToWishlist, removeItemFromWishlist, isItemInWishlist } = useWishlistData();
+    // Getting functions to add and remove items from wishlist.
+    const { addItemToWishlist, removeItemFromWishlist } = useWishlistActions();
+
+    // Function to check whether item is already in cart or not.
+    const isItemInCart = useIsItemInCart();
+
+    // Function to check whether item is already in wishlist or not.
+    const isItemInWishlist = useIsItemInWishlist();
 
     // Getting product details.
     const productImg = productDetails['image'];

src/components/products/ProductDetail.jsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { useProductData } from '../../contexts/ProductDataContext';
 import { useParams } from 'react-router-dom';
-import { useCartData } from '../../contexts/CartDataContext.jsx';
-import { useWishlistData } from '../../contexts/WishlistDataContext.jsx';
+import useCartActions from '../../hooks/cartReducerHooks.js';
+import useWishlistActions from '../../hooks/wishlistReducerHooks.js';
+import { useIsItemInCart, useIsItemInWishlist } from '../../hooks/useStoreItems.js';
 import Loader from '../Loader.jsx';
 import Rating from './Rating.jsx';
 
@@ -14,11 +15,17 @@ export default function ProductDetail() {
     // Getting product name from URL.
     const { productname } = useParams();
 
-    // Getting required functions from CartData context.
-    const { addItemToCart, removeItemFromCart, isItemInCart } = useCartData();
+    // Getting functions to manage cart state.
+    const { addItemToCart, removeItemFromCart } = useCartActions();
 
-    // Getting required functions from WishlistDataContext.
-    const { addItemToWishlist, removeItemFromWishlist, isItemInWishlist } = useWishlistData();
+    // Getting functions to manage wishlist state.
+    const { addItemToWishlist, removeItemFromWishlist } = useWishlistActions();
+
+    // Function to check whether the item is already in cart or not.
+    const isItemInCart = useIsItemInCart();
+
+    // Function to check whether the item is already in wishlist or not.
+    const isItemInWishlist = useIsItemInWishlist();
 
     // State for product whose details have to be shown.
     const [productDetails, setProductDetails] = useState(null);

src/components/wishlist/Wishlist.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import WishlistItem from './WishlistItem';
-import { useWishlistData } from '../../contexts/WishlistDataContext.jsx';
+import WishlistItem from './WishlistItem.jsx';
+import { useWishlistItems } from '../../hooks/useStoreItems.js';
 
 export default function Wishlist() {
 
-    // Getting wishlist items from WishlistData context.
-    const { wishlistItems } = useWishlistData();
+    // Getting wishlist items from state.
+    const wishlistItems = useWishlistItems();
 
     return (
         <div className="flex flex-row flex-wrap justify-start items-start gap-4 w-fit my-8 mx-4">

src/components/wishlist/WishlistItem.jsx

@@ -1,17 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useWishlistData } from '../../contexts/WishlistDataContext.jsx';
 import { Link } from 'react-router-dom';
-import { useCartData } from '../../contexts/CartDataContext.jsx';
+import useWishlistActions from '../../hooks/wishlistReducerHooks.js';
+import useCartActions from '../../hooks/cartReducerHooks.js';
+import { useIsItemInCart } from '../../hooks/useStoreItems.js';
 
 export default function WishlistItem({ item }) {
 
-    // Getting functions from WishlistData context.
-    const { removeItemFromWishlist, moveToCart } = useWishlistData();
+    // Getting functions to manage cart and wishlist.
+    const { addItemToCart } = useCartActions();
+    const { removeItemFromWishlist } = useWishlistActions();
 
-    // Getting functions from CartData context.
-    const { isItemInCart } = useCartData();
+    // Function to check whether item is already in cart or not.
+    const isItemInCart = useIsItemInCart();
 
     // Getting item details.
     const itemImage = item['image'];
@@ -82,7 +84,7 @@ export default function WishlistItem({ item }) {
             ) : (
                 <button
                     className="bg-slate-900 border-2 border-slate-900 text-white w-full mt-4 rounded-md py-[6px] tracking-wider uppercase hover:text-slate-900 hover:bg-white duration-300"
-                    onClick={() => { moveToCart(item) }}
+                    onClick={() => { addItemToCart(item) }}
                 >
                     Move to Cart
                 </button>