Administrador de Pacientes: Veterinaria (Zustand con React Hook)

Enlace: React - TypeScript - React Hook Form - Zustand - Tailwind

En los videos anteriores, se explicó cómo agregar la sintaxis para establecer errores en cada campo de un formulario, lo cual es parte de la validación del formulario. Ahora, se introduce Zustand como una herramienta para almacenar la información de los pacientes. Zustand es una biblioteca que simplifica el uso de useReducer y la gestión de un estado global en aplicaciones de React.

En este contexto, patients es un arreglo de objetos Patient[], pero en este caso, los datos son un borrador. Para manejar esto, es necesario generar un ID antes de establecer el estado. Para lograrlo, se crea una función separada y se instala la dependencia uuid, que se utiliza para generar identificadores únicos.

Para implementar la funcionalidad de persistencia con react-toastify en tu proyecto, puedes seguir estos pasos:

1. Instalación de react-toastify: Asegúrate de tener react-toastify instalado en tu proyecto. Si no lo tienes, puedes instalarlo usando npm o yarn:

    npm install react-toastify
   

   o

    yarn add react-toastify
   

2. Configuración de react-toastify: Importa y configura react-toastify en tu archivo principal de la aplicación (por ejemplo, App.js o index.js):

    import { ToastContainer, toast } from 'react-toastify';
    import 'react-toastify/dist/ReactToastify.css';
   
    function App() {
      return (
        <div>
          <ToastContainer />
          {/* El resto de tu aplicación */}
        </div>
      );
    }
   

3. Uso de toast con opciones de persistencia: Cuando llames a toast, puedes pasarle opciones para controlar su comportamiento. Para persistir notificaciones, puedes usar localStorage o sessionStorage para guardar el estado de las notificaciones. Aquí tienes un ejemplo de cómo podrías hacerlo:

    const notify = (message) => {
      toast(message, {
        onClose: () => {
          // Guardar en localStorage o sessionStorage
          localStorage.setItem('lastToast', message);
        }
      });
    };
   
    // Para mostrar la notificación
    notify('Paciente actualizado con éxito');
   

4. Recuperación de notificaciones persistentes: Al iniciar la aplicación, puedes verificar si hay notificaciones guardadas y mostrarlas:

    const lastToast = localStorage.getItem('lastToast');
    if (lastToast) {
      toast(lastToast);
      localStorage.removeItem('lastToast'); // Eliminar después de mostrar
    }
   

Con estos pasos, puedes integrar react-toastify en tu proyecto y manejar la persistencia de las notificaciones usando localStorage o sessionStorage. Esto te permitirá mantener el estado de las notificaciones incluso después de recargar la página.