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`}>
Introducción
Construye un dashboard de productos con Next.js
Configuración del proyecto
Inicializando nuestro proyecto con Next.js
Configuración de ESLint y Prettier
Integrando PostCSS y TailwindCSS a nuestro proyecto
Configuración del archivo jsconfig.js
Cómo integrar componentes predefinidos con TailwindUI
Commons Components
Creación del layout principal e integración de los Page Components
Autenticación
Creando la lógica del componente login
Presentación de la API
Creación del custom hook useAuth
Autenticándonos en la API usando Axios
Obteniendo el token de la API
Guardado del token en una cookie para mantener la sesión
Usando nuestro useAuth para cargar la información del usuario
Integración de la API
Obteniendo la lista de productos desde la API
Creando el componente Chart
Implementación de nuestro componente Chart en el dashboard
Conexión del modal para crear productos
Construcción del modal para crear productos
Inserción de los datos del producto en la API
Creación del componente Alert
Implementación de nuestro componente Alert
Eliminado de productos en la API
Creación y cargado de datos para actualizar un producto
Actualizado del producto en la API
Implementación del logout
Deploy a producción
Haciendo el deploy de nuestra aplicación en Vercel
Conexión de un subdominio a nuestra aplicación
Cierre
Continúa alimentando tu proyecto
Conclusiones y cierre del curso
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 7
Preguntas 1
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
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>
</>
)
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.