diff --git a/frontend/src/components/ShoppingCartComponent.jsx b/frontend/src/components/ShoppingCartComponent.jsx
index 0109cfe..714a39e 100644
--- a/frontend/src/components/ShoppingCartComponent.jsx
+++ b/frontend/src/components/ShoppingCartComponent.jsx
@@ -1,54 +1,28 @@
import { Link } from "react-router-dom";
-import { memo, useState, useEffect } from "react";
+import { memo, useState, useEffect, useContext } from "react";
+import { UserContext } from "../context/userContext";
+import { CartContext } from "../context/cartContext";
import axios from "axios";
+import toast from "react-hot-toast";
-const ShoppingCartComponent = ({ cartProducts }) => {
- const [products, setProducts] = useState([]);
- const [totalPrice, setTotalPrice] = useState(0);
- const [quantity, setQuantity] = useState(0);
+const ShoppingCartComponent = () => {
+ const { user } = useContext(UserContext);
+ const { setCartChanged, products, quantity, totalPrice } =
+ useContext(CartContext);
- useEffect(() => {
- console.log("Cart Products:", cartProducts);
+ const deleteCartProduct = async (productId) => {
+ try {
+ const response = await axios.delete(
+ `/remove-from-cart/${user._id}/${productId}`
+ );
- if (!Array.isArray(cartProducts)) {
- console.error("cartProducts is not an array:", cartProducts);
- return;
- }
-
- const getProducts = async () => {
- try {
- const productDetails = await Promise.all(
- cartProducts.map(async (cartProduct) => {
- const response = await axios.get(
- `/get-product/${cartProduct.product}`
- );
- return { ...response.data, quantity: cartProduct.quantity };
- })
- );
-
- setProducts(productDetails);
-
- const totalQuantity = productDetails.reduce(
- (acc, product) => acc + product.quantity,
- 0
- );
- setQuantity(totalQuantity);
-
- const total = productDetails.reduce(
- (acc, curr) => acc + Number(curr.price) * curr.quantity,
- 0
- );
- setTotalPrice(total);
- } catch (error) {
- console.error(error);
+ if (!response.data.error) {
+ toast.success(response.data.message);
+ setCartChanged((val) => !val);
+ } else {
+ toast.error(response.data.error);
}
- };
-
- getProducts();
- }, [cartProducts]);
-
- const deleteCartProduct = (productId) => {
- // Lógica para eliminar el producto del carrito
+ } catch (error) {}
};
return (
diff --git a/frontend/src/context/cartContext.jsx b/frontend/src/context/cartContext.jsx
index 1215b70..8132d0c 100644
--- a/frontend/src/context/cartContext.jsx
+++ b/frontend/src/context/cartContext.jsx
@@ -1,14 +1,76 @@
-import { createContext, useState } from "react";
+import { createContext, useState, useEffect, useContext } from "react";
+import { UserContext } from "./userContext";
+import axios from "axios";
-export const CartContext = createContext({
- productAdded: false,
- setProductAdded: () => {},
-});
+export const CartContext = createContext({});
export function CartContextProvider({ children }) {
- const [productAdded, setProductAdded] = useState(false);
+ const [cartChanged, setCartChanged] = useState(false);
+ const [cartProducts, setCartProducts] = useState([]);
+ const { user } = useContext(UserContext);
+ const [products, setProducts] = useState([]);
+ const [totalPrice, setTotalPrice] = useState(0);
+ const [quantity, setQuantity] = useState(0);
+
+ useEffect(() => {
+ if (user) {
+ const fetchCartProducts = async () => {
+ try {
+ const response = await axios.get(`/get-cart-products/${user._id}`);
+ if (!response.data.error) {
+ setCartProducts(response.data);
+ }
+ } catch (error) {
+ console.error(error);
+ }
+ };
+ fetchCartProducts();
+ }
+ }, [user, cartChanged]);
+
+ useEffect(() => {
+ const getProducts = async () => {
+ try {
+ const productDetails = await Promise.all(
+ cartProducts.map(async (cartProduct) => {
+ const response = await axios.get(
+ `/get-product/${cartProduct.product}`
+ );
+ return { ...response.data, quantity: cartProduct.quantity };
+ })
+ );
+
+ setProducts(productDetails);
+
+ const totalQuantity = productDetails.reduce(
+ (acc, product) => acc + product.quantity,
+ 0
+ );
+ setQuantity(totalQuantity);
+
+ const total = productDetails.reduce(
+ (acc, curr) => acc + Number(curr.price) * curr.quantity,
+ 0
+ );
+ setTotalPrice(total);
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ getProducts();
+ }, [cartProducts]);
+
return (
-
+
{children}
);
diff --git a/frontend/src/pages/Cart.jsx b/frontend/src/pages/Cart.jsx
index 0bfa435..01a4cbe 100644
--- a/frontend/src/pages/Cart.jsx
+++ b/frontend/src/pages/Cart.jsx
@@ -1,7 +1,134 @@
-import React from 'react'
+import { useContext } from "react";
+import { UserContext } from "../context/userContext";
+import { CartContext } from "../context/cartContext";
+import { Link } from "react-router-dom";
+import Error from "./error/Error";
+import axios from "axios";
+import toast from "react-hot-toast";
export default function Cart() {
+ const { user } = useContext(UserContext);
+ const { setCartChanged, products, quantity, totalPrice } =
+ useContext(CartContext);
+
+ const deleteCartProduct = async (productId) => {
+ try {
+ const response = await axios.delete(
+ `/remove-from-cart/${user._id}/${productId}`
+ );
+
+ if (!response.data.error) {
+ toast.success(response.data.message);
+ setCartChanged((val) => !val);
+ } else {
+ toast.error(response.data.error);
+ }
+ } catch (error) {
+ toast.error("Error del servidor");
+ }
+ };
+
+ const addCartProduct = async (productId) => {
+ try {
+ const response = await axios.post(
+ `/add-to-cart/${user._id}/${productId}`
+ );
+ if (!response.data.error) {
+ toast.success(response.data.message);
+ setCartChanged((val) => !val);
+ } else {
+ toast.error(response.data.error);
+ }
+ } catch (error) {
+ toast.error("Error del servidor");
+ }
+ };
+
return (
- Cart
- )
+ <>
+ {user ? (
+
+
{quantity} Productos
+ {products ? (
+ products?.map((product) => (
+
+
+
+
+
{product.productName}
+
{product.description}
+
+
+
+ {/** Boton restar */}
+
+
{product.quantity}
+ {/** Boton sumar */}
+
+
+
{product.price}€
+
+
+
+ ))
+ ) : (
+
No hay productos
+ )}
+
+
Total:
+
{totalPrice.toFixed(2)}€
+
+
+
+
+
+
+
+
+
+
+
+ Detalles de envio
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Resumen del pedido
+
+
+
+
+ Total productos
+
+ {totalPrice.toFixed(2)}€
+
+
+
+ Envío
+ 0.00€
+
+
+
+ Total
+ {totalPrice.toFixed(2)}€
+
+
+
+
+
+
+
+
+
+