diff --git a/src/components/Shop/CartProduct.jsx b/src/components/Shop/CartProduct.jsx index 6ce2ffde..026e0c2b 100644 --- a/src/components/Shop/CartProduct.jsx +++ b/src/components/Shop/CartProduct.jsx @@ -4,12 +4,12 @@ import { useState } from 'react'; import { getCart, removeItemFromCart, updateItemInCart } from '../../common/shop/cart'; import { useSetRecoilState } from 'recoil'; import cartCountState from '../../atoms/shop/cartCountState'; +import { toast } from 'react-toastify'; const ItemRow = styled.div` display: flex; padding: 10px; align-items: center; - border-bottom: 1px solid #ccc; `; const PriceRow = styled.div` @@ -59,11 +59,23 @@ const CartProduct = (props) => { e.preventDefault(); await removeItemFromCart(cartInfo?.id, line_item_id); - const newCartInfo = await getCart(cart.id); - setCartInfo(newCartInfo); - setCartCount(newCartInfo?.line_items?.length || 0); + toast('Removed the Item', { + position: 'top-center', + hideProgressBar: true, + closeOnClick: false, + draggable: false, + progress: undefined, + }); - alert('Item removed from cart'); + if (cart) { + const newCartInfo = await getCart(cart?.id); + setCartInfo(newCartInfo); + setCartCount(newCartInfo?.line_items?.length || 0); + } else { + const newCartInfo = await getCart(localStorage.getItem('cartId')); + setCartInfo(newCartInfo); + setCartCount(newCartInfo?.line_items?.length || 0); + } }; const handleQuantityChange = async (e, line_item_id) => { diff --git a/src/components/views/ProductItem.jsx b/src/components/views/ProductItem.jsx index 671c6919..b08a9793 100644 --- a/src/components/views/ProductItem.jsx +++ b/src/components/views/ProductItem.jsx @@ -5,13 +5,14 @@ import { Container, Header, Logo, AboutContent, BoardsBox, BoardsContent, Custom import Categories from '../Shop/Categories'; import FooterSection from '../FooterSection'; import SidebarMenu from '../SidebarMenu'; -import { useEffect, useState } from 'react'; -import { createCart, addItemToCart } from '../../common/shop/cart'; +import { useEffect, useState, useRef } from 'react'; +import { getCart, createCart, addItemToCart } from '../../common/shop/cart'; import CartButton from '../CartButton'; import { useRecoilState, useSetRecoilState } from 'recoil'; import cartCountState from '../../atoms/shop/cartCountState'; import cartState from '../../atoms/shop/cartState'; import { getProduct } from '../../common/shop/products'; +import { toast } from 'react-toastify'; const Image = styled.img` max-width: unset !important; @@ -29,47 +30,69 @@ const ProductItem = () => { const { id: productId } = useParams(); const [cart, setCart] = useRecoilState(cartState); const [quantity, setQuantity] = useState(1); + const setCartCount = useSetRecoilState(cartCountState); const [product, setProduct] = useState([]); const [loading, setLoading] = useState(true); + const productLoaded = useRef(false); + const cartLoaded = useRef(false); useEffect(() => { + if (cartLoaded.current) return; + cartLoaded.current = true; + const handleCart = async () => { - const cart = await createCart(); - setCart(cart); - localStorage.setItem('cartId', cart.id); + const localCartId = localStorage.getItem('cartId'); + + if (localCartId?.length) { + const cart = await getCart(localCartId); + setCart(cart); + } else { + const cart = await createCart(); + setCart(cart); + localStorage.setItem('cartId', cart.id); + } }; handleCart(); - }, []); + }, [cartLoaded]); useEffect(() => { if (!productId) return; - const fetchProduct = async () => { - try { - const res = await getProduct(productId); - setLoading(false); - console.log('res:', res); - setProduct(res); - } catch (error) { - console.error('Error:', error); - } finally { - setLoading(false); - } - }; - fetchProduct(); - }, [productId]); + if (!productLoaded.current) { + productLoaded.current = true; + + const fetchProduct = async () => { + try { + const res = await getProduct(productId); + setLoading(false); + setProduct(res); + } catch (error) { + console.error('Error:', error); + } finally { + setLoading(false); + } + }; + fetchProduct(); + } + }, [productId, productLoaded]); const handlePurchase = async () => { const items = await addItemToCart(cart?.id, { - id: 'prod_8XO3wp77QNlYAz', + id: productId, quantity: quantity, }); setCartCount(items?.line_items?.length || 0); - alert('Item added to cart'); + toast('Added the Item', { + position: 'top-center', + hideProgressBar: true, + closeOnClick: false, + draggable: false, + progress: undefined, + }); }; const handleQuantityChange = (e) => {