No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

1D
18H
17M
56S
Curso Profesional de Next.js

Curso Profesional de Next.js

Oscar Barajas Tavares

Oscar Barajas Tavares

Eliminado de productos en la API

24/31
Recursos

Aportes 6

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥淒elete鈥:

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 鈥淒elete鈥 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)}
                                                />
             ....
        </>
    )
}