Implementación de nuestro componente Alert

De esta manera cambié el color del Alert:

const color = alert.type === 'success' ? 'green-100' : 'red-500';

  return (
    <>
      {alert.active && (
        <div x-data className={`bg-${color} p-5 w-full rounded mb-8`}>

Algo interesante; esto también se puede implementar de manera similar pero bastante más fácil con Sweet Alert

Se instala la dependencia

npm install sweetalert2

Se trae la librería requerida

import Swal from 'sweetalert2';

La validación del formulario

if (validation) {
      addProduct(data);
      Swal.fire({
        icon: 'success',
        title: 'Product added',
        confirmButtonText: 'Okay',
      });
    } else {
      Swal.fire({
        title: 'Something went wrong',
        confirmButtonText: 'Okay',
        icon: 'error',
      });
    }

El efecto es muy similar; pero no se tiene que hacer ni un nuevo hook ni nuevos componentes

Clase #23: Implementación de nuestro componente Alert 23/31: 📟

Continuando con el Proyecto: 🔨

 
En el archivo FormProduts.js en la ruta src/components/ se agrega en la función FormProducts las variables setOpen y setAlert que permitirán que cuando se agregue un producto y salga el alert, se pueda cerrar el modal:

export default function FormProduct({setOpen, setAlert}) {

 
También dentro de addProduct se agrega la lógica para el setAlert, con las características de:

• active: que por defecto está en ‘false’ y se activa con ‘true’,
• message: que contiene el mensaje de que el producto se agregó,
• type: por defecto type está vacío, cuando se agrega el producto cambia a ‘success’. En caso de que se obtenga un error, type cambia a ‘error’.

La lógica de addProduct queda:

addProduct(data)
	.then(() => {
		setAlert({
			active: true, //Muestra el alert
			message: 'Product added successfully',
			type: 'success',
			autoClose: false,
		});
		setOpen(false); //Cierra el modal
})
	.catch((error) => {
		setAlert({
			active: true,
			message: error.message, //Cuando hay error muestra el mensaje del error
			type: 'error',
			autoClose: false,
	});
});

 
Guardamos y ejecutamos en consola npm run dev en el navegador podemos probar agregando un producto y visualizar el alert y que se cierra automáticamente el modal del form.

tuve un pequeño error que viene del componente Alert, debemos cambiar la importación de XCircleIcon
src/common/Alert.js:
de

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

a

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

ajalas no habia visto pero el profe esta usando github copilot bien ahi

Les dejo un pequeño aporte para que apliquen colores al alert depende del tipo.

const bgColor = () => {
    switch (alert.type) {
        case ("error"):
            return 'bg-red-100 text-red-800';
        case ('success'):
            return 'bg-green-100 text-green-800';
        case ('info'):
            return 'bg-sky-100 text-sky-800';
        case ('warning'):
            return 'bg-amber-100 text-amber-800';
        default:
            return 'bg-indigo-100 text-indigo-800';
    }
}

En el return del componente agrega la función:

return (
<>
{alert?.active && (
	<div x-data className={`${bgColor()} p-5 w-full rounded mb-8`}>
...
</div>
</>
)