No tienes acceso a esta clase

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

Curso Profesional de Next.js

Curso Profesional de Next.js

Oscar Barajas Tavares

Oscar Barajas Tavares

Implementaci贸n de nuestro componente Alert

23/31
Recursos

Aportes 7

Preguntas 1

Ordenar por:

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

o inicia sesi贸n.

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 鈥榝alse鈥 y se activa con 鈥榯rue鈥,
  • 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 鈥榮uccess鈥. En caso de que se obtenga un error, type cambia a 鈥榚rror鈥.

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>
</>
)