diff --git a/src/components/ProductItem/ProductItem.tsx b/src/components/ProductItem/ProductItem.tsx index db77d258a..4b320f17d 100644 --- a/src/components/ProductItem/ProductItem.tsx +++ b/src/components/ProductItem/ProductItem.tsx @@ -1,5 +1,6 @@ import { useEffect, useState } from "react"; import { addCartItem, getCartItems, removeCartItem } from "../../api/cart"; +import { useError } from "../../context/errorContext"; import { formatPrice } from "../../utils/format"; import { CartActionButton } from "../Button"; import { @@ -19,6 +20,7 @@ export const ProductItem = ({ }: Pick) => { const [isInCart, setIsInCart] = useState(false); const [cartItemId, setCartItemId] = useState(null); + const { setErrorStatus } = useError(); const fetchCartItemStatus = async () => { try { @@ -27,31 +29,47 @@ export const ProductItem = ({ setIsInCart(!!cartItem); setCartItemId(cartItem ? cartItem.id : null); } catch (error) { - console.error("Failed to fetch cart item status", error); + setErrorStatus(error.response?.status); } }; - useEffect(() => { - fetchCartItemStatus(); - }, [id]); + const handleAddToCart = async () => { + try { + await addCartItem(id, 1); + setIsInCart(true); + await fetchCartItemStatus(); + } catch (error) { + setErrorStatus(error.response?.status); + setIsInCart(false); + } + }; + + const handleRemoveFromCart = async () => { + if (cartItemId === null) return; - const handleButtonClick = async () => { try { - if (isInCart) { - if (cartItemId !== null) { - await removeCartItem(cartItemId); - setIsInCart(false); - setCartItemId(null); - } - } else { - await addCartItem(id, 1); - await fetchCartItemStatus(); - } + await removeCartItem(cartItemId); + setIsInCart(false); + setCartItemId(null); } catch (error) { - console.error("Error handling cart action:", error); + setErrorStatus(error.response?.status); + setIsInCart(true); + setCartItemId(cartItemId); } }; + const handleButtonClick = async () => { + if (isInCart) { + await handleRemoveFromCart(); + } else { + await handleAddToCart(); + } + }; + + useEffect(() => { + fetchCartItemStatus(); + }, [id]); + return (