Eliminado de productos en la API

llegado a esta parte, vi que unos compañeros borraron los productos bonitos que salían al principio, de aqui a ayer eran los productos del 2 al 32, borren sus productos feos que ustedes crearon!!! /: recuerden la presentación de los productos también les afecta a ustedes, no abusen de la herramienta que les dan /:

Les dejo la funcion handleDelete

const handleDelete = (id) => {
        deleteProduct(id)
            .then(() => {
                setAlert({
                    active: true,
                    message: "Product Deleted",
                    type: "success",
                    autoClose: false,
                });
            })
            .catch((error) => {
                setAlert({
                    active: true,
                    message: error.message,
                    type: "error",
                    autoClose: false,
                });
            });
    };

Continuando con el Proyecto: 🔧

Vamos agregar la función para eliminar un producto desde el dashboard de los productos. Para ello, en el arhivo index.js de la ruta src/services/api modificamos la variable que está en plural deleteProducts por singular:

deleteProduct: (id) => `${API}/api/${VERSION}/products/${id}/`,

 
En el archivo products.js de la misma carpeta donde está index.js, se agrega la lógica para hacer la petición a la API, antes teníamos solamente para agregar un producto:

const deleteProduct = async (id) => {
	const response = await axios.delete(endPoints.products.deleteProduct(id));
	return response.data;
}

export { addProduct, deleteProduct };

 
Luego en el archivo de products.js de la ruta src/pages/dashboard, se agrega el import para hacer el llamado de deleteProduct:

import { deleteProduct } from '@services/api/products';

 
También se agrega el ícono de XCircle de Hero Icons que vamos a necesitar para el diseño que salga el ícono circular con la X, en lugar de la palabra “Delete”:

import { DocumentAddIcon, XCircleIcon } from '@heroicons/react/solid';

 
Dentro de la función Products, se agrega la constante handleDelete que contiene el llamado a deleteProduct, en caso de que sea exitoso el delete del producto, muestra el alert:

const handleDelete = (id) => {
	deleteProduct(id)
		.then(() =>{
			setAlert({
				active: true,
				message: 'Delete product successfuly',
				type: 'success',
				autoClose: true,
			});
	});
};

 
Dentro del return, en la parte de la estructura donde teníamos “Delete” se borra toda la etiqueta de la referencia de <a></a> y se agrega la etiqueta del ícono <XCircleIcon />:

<XCircleIcon className='flex-shrink-0 h-6 w-6 text-gray-400 cursor-pointer'
			aria-hidden="true"
			onClick={() => handleDelete(product.id)}
/>

 
Para entender los componentes de XCircleIcon, si vemos la documentación de TailWindsCSS:
 

• flex-shrink-0 → evita que un elemento flex se encoja (Fuente: aquí)
   
• h-6 → establece la altura del elemento de forma fija, para h-6 es height: 1.5rem; /* 24px */ (Fuente: aquí)
   
• w-6 → establece el ancho del elemento de forma fija, para w-6 es width: 1.5rem; /* 24px */ (Fuente: aquí)
   
• text-gray-400 → establece el color del texto a gris, 400 indica la opacidad: color: rgb(156 163 175); (Fuente: aquí)
   
• cursor-pointer → el cursor-{style} controla qué cursor se muestra al pasar el cursor sobre un elemento (Fuente: aquí)
   
• aria-hidden="true" → el ícono no tiene el foco, por lo que cuando se elimina el producto, indica que el ícono es puramente decorativo y que no tiene hijos o elementos secundarios que eliminar (Fuente: aquí)
   

hice un catch por si hay un error al eliminar producto igual que al agregar uno

llega el momento que cambien su tema de visual code para que nosotros podamos vizualisar mejor!
me estoy quedando ciegooooo por su pantalla
no se ve bien T.T

creamos una nueva función para eliminar productos de la API
src/services/api/products.js:

const deleteProduct = async (id)=> {
    const response = await axios.delete(endPoints.products.deleteProducts(id))
    return response.data
}

export { addProduct, deleteProduct }

luego la integramos a nuestra sección de productos
src/pages/dashboard/products.js:

import { PlusIcon, XCircleIcon } from "@heroicons/react/20/solid";
import { deleteProduct } from "@services/api/product"; 
 
export default function Products(){
    const [open, setOpen] = useState(false);
    const [products, setProducts] = useState([]);
    const { alert, setAlert, toggleAlert } = useAlert(); 

    const handleDelete = (id) => { 
        deleteProduct(id)
            .then(()=> {
                setAlert({
                    active: true, 
                    message: "Delete product successfully",
                    type: 'error',
                    autoClose: true 
                })
            })
            .catch(()=> {
                setAlert({
                    active: true, 
                    message: error.message,
                    type: 'error',
                    autoClose: false 
                })
            });
    } 

    useEffect(()=> {
        ....
    }, [alert])
    
    return (
        <>
            ....
	    <XCircleIcon 
                                                    className="flex-shrink-0 h-6 w-6 text-gray-400 cursor-pointer"
                                                    aria-hidden="true"
                                                    onClick={()=> handleDelete(product.id)}
                                                />
             ....
        </>
    )
}