cuando doy click al boton de eliminar no hace nada y eliminar el producto
mi codigo:
import axios from "axios"
const API_URL = import.meta.env.VITE_API_URL;
const getProducts = async () => {
try {
const response = await axios.get(API_URL + "/api/products")
return response.data
} catch (error) {
throw error
}
}
const addProduct = async (newProduct) => {
try {
const response = await axios.post(API_URL + "/api/products", newProduct)
return response.data
} catch (error) {
throw error
}
}
const deleteProduct = async (productId) => {
if (!productId) {
console.error("No se proporcionó un ID de producto válido para eliminar.");
}
try {
const response = await axios.delete(`${API_URL}/api/products/${productId}`);
console.log(`Producto con ID ${productId} eliminado exitosamente.`);
return response.data; //Mostramos los datos si es necesario
} catch (error) {
if (error.response) {
console.error(`Error en la respuesta del servidor (HTTP ${error.response.status}):`,error.response.data);
} else if (error.request) {
console.error("No se recibió respuesta del servidor:", error.request);
} else {
//Otros tipo de errores
console.error("Error al realizar la solicitud:", error.message);
}
}
};
export { getProducts, addProduct, deleteProduct }
import { useEffect, useState } from 'react'
import { addProduct, getProducts, deleteProduct } from './services/api.js'
import { AddProduct } from "./components/AddProduct.jsx"
import { ProductList } from "./components/ProductList.jsx"
function App() {
const [products, setProduct] = useState([]);
const fetchProducts = async () => {
try {
const data = await getProducts();
setProduct(data);
} catch (error) {
console.error("Error al consumir los productos:", error.message);
}
};
useEffect(() => {
fetchProducts();
}, []);
const handleAddProduct = async (newProduct) => {
try {
const addedProduct = await addProduct(newProduct);
setProduct((prevProducts) => [...prevProducts, addedProduct]);
} catch (error) {
console.error("Error al guardar el producto :(");
}
};
const handleDeleteProduct = async (productId) => {
if (!productId) {
console.error("handleDeleteProduct: El ID obtenido no es válido.");
return;
}
try {
await deleteProduct(productId);
setProduct((prevProducts) =>
prevProducts.filter((product) => product.id !== productId)
);
console.log(`Producto con ID ${productId} eliminado correctamente.`);
} catch (error) {
// Manejo detallado de errores
if (error.response) {
console.error(
`Error en la respuesta del servidor (HTTP ${error.response.status}):`,
error.response.data
);
} else {
console.error("Error en la solicitud:", error.message);
}
}
};
return (
<>
<div
className="container"
>
<div>
<h1 className="title is-1 has-text-centered mb-6">Lista de productos</h1>
<AddProduct handleAddProduct={handleAddProduct} />
<ProductList
products={products}
handleDeleteProduct={handleDeleteProduct} // Pasar la función de eliminación
/>
</div>
</div>
</>
);
}
export default App;
import React from "react";
import "../components/ProductList.css";
const ProductList = ({ products, handleDeleteProduct }) => {
return (
<div className="container">
<div className="columns is-multiline">
{products.map((product, index) => (
<div key={index} className="column is-one-third mt-6">
<div className="card">
{/* Sección de imagen */}
<div className="card-image">
<figure className="image is-4by3">
<img src="/imgproducts.jpg" alt={product.name} />
</figure>
</div>
{/* Contenido del producto */}
<div className="card-content">
<p className="title">{product.name}</p>
<p className="subtitle mt-5 has-text-danger-light">
{product.description}
</p>
<div className="content">
<strong className="has-text-success">Price:</strong>{" "}
<strong className="has-text-white">${product.price}</strong>
<br />
<strong className="has-text-warning">Stock:</strong>{" "}
<strong className="has-text-white">
{product.stock} disponible
</strong>
</div>
</div>
{/* Botones */}
<footer className="card-footer">
<button
className="button is-danger card-footer-item"
onClick={() => {
console.log("Producto enviado al eliminar:", product._id); //Solo para depuración
handleDeleteProduct(product._id); //IMPORTANTE, la variable es _id y no solamente id como habiamos pensado
}}
>
Eliminar
</button>
<button className="button is-primary card-footer-item">Editar</button>
</footer>
</div>
</div>
))}
</div>
</div>
);
};
export { ProductList };