depurando code

Author: urian121

BackEndLaravel10/public/avatars/oeRwLw3J2kV94Qytg8ov.jpg

@@ -10,6 +10,12 @@
     👉 npm i nextjs-toast-notify
     👉 https://www.npmjs.com/package/nextjs-toast-notify
     👉 https://www.nextjstoastnotify.com/
+    👉 https://www.youtube.com/watch?v=mVY0iprskvQ
+
+#### instalar la Librería loading-request para agregar un efecto Loading mientras se realiza una solicitud HTTP con Javascript
+    👉 npm i loading-request
+    👉 https://www.npmjs.com/package/loading-request
+    👉 https://www.youtube.com/watch?v=1SHAlJYXvok&t=8s
 
 #### Instalar la Librería react-data-table-component para mejorar la tabla con buscador y paginación.
 

BackEndLaravel10/public/avatars/xw5ry8ItW94eN5OUdole.jpg

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^1.6.7",
+    "loading-request": "^2.2.0",
     "nextjs-toast-notify": "^1.27.0",
     "react": "^18.2.0",
     "react-data-table-component": "^7.6.2",

FrontEndReactJS/README.md

@@ -4,12 +4,12 @@ import { useForm } from "react-hook-form";
 
 // importando la funcion toast Librería nextjs-toast-notify para las alertas
 import { toast } from "nextjs-toast-notify";
-import VariablesDeEstados from "./VariablesDeEstados";
-import "../styles/loading.css";
+
+// importando la Librería loading-request para agregar un efecto Loading mientras se realiza una solicitud HTTP con Javascript
+import { showLoading, hideLoading } from "loading-request";
 
 import SelectEdad from "./SelectEdad";
 import SelectCargoEmpleado from "./SelectCargoEmpleado";
-import Loading from "./Loading";
 
 const FormlarioEmpleado = ({
   URL_API,
@@ -19,8 +19,6 @@ const FormlarioEmpleado = ({
   dataEditarEmpleado,
   avatarUrl,
 }) => {
-  const { loading, setLoading } = VariablesDeEstados();
-
   const {
     register,
     handleSubmit,
@@ -41,7 +39,13 @@ const FormlarioEmpleado = ({
     : "";
 
   const customHandleSubmit = async (data) => {
-    setLoading(true);
+    // Agregando función showLoading para inabilitar la pantalla mientras se realiza la petición HTTP
+    showLoading({
+      message: "Enviando información...",
+      spinnerColor: "#8201ff",
+      textLoadingColor: "#8201ff",
+      textLoadingSize: "20px",
+    });
 
     const formData = new FormData();
     formData.append("nombre", data.nombre);
@@ -59,22 +63,35 @@ const FormlarioEmpleado = ({
         },
       });
 
-      // Simulamos un envío de formulario asíncrono
-      setTimeout(() => {
-        setLoading(false);
-      }, 1000);
+      //setLoading(false);
+      toast.success("Empleado agregado correctamente", {
+        duration: 4000,
+        progress: true,
+        position: "top-right",
+        transition: "swingInverted",
+        icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check"><path d="M20 6 9 17l-5-5"/></svg>',
+        sonido: true,
+      });
 
-      toast.success("Empleado agregado correctamente");
       // Consulto la API para obtener la lista de empleados actualizada y actualizo la lista de empleados
       const empleadosData = await obtenerEmpleados();
       setEmpleados(empleadosData);
     } catch (error) {
       console.error("Error al agregar empleado:", error);
+    } finally {
+      // Agregando función hideLoading para habilitar la pantalla
+      hideLoading({ timeLoading: 1500 });
     }
   };
 
   const handleSubmitUpdateForm = async (data) => {
-    setLoading(true);
+    showLoading({
+      message: "eliminando el empleado...",
+      spinnerColor: "#8201ff",
+      textLoadingColor: "#8201ff",
+      textLoadingSize: "20px",
+    });
+
     /**
      * IMPORTANTE: para enviar el formulario por el metodo put, se debe enmascarar(engañar) el tipo de solicitud, diciendo con axios que la solicitud
      * es de tipo POST, pero en realidad es de tipo PUT ya que esta agregando formData.append("_method", "PUT"); y esto define el metodo de envio.
@@ -105,18 +122,19 @@ const FormlarioEmpleado = ({
           "Content-Type": "multipart/form-data",
         },
       });
-      // Simulamos un envío de formulario asíncrono
-      setTimeout(() => {
-        setLoading(false);
-      }, 1000);
 
-      toast.success("Empleado actualizado correctamente");
+      toast.success("Empleado actualizado correctamente", {
+        transition: "bounceIn",
+        sonido: true,
+      });
       // Consulto la API para obtener la lista de empleados actualizada y actualizo la lista de empleados
       const empleadosData = await obtenerEmpleados();
       setEmpleados(empleadosData);
       volverAlHomeDesdeEditar();
     } catch (error) {
       console.error("Error al actualizar el empleado:", error);
+    } finally {
+      hideLoading({ timeLoading: 1000 });
     }
   };
 
@@ -265,8 +283,6 @@ const FormlarioEmpleado = ({
           </button>
         </div>
       </form>
-
-      {loading && <Loading />}
     </>
   );
 };

FrontEndReactJS/package-lock.json

@@ -2,8 +2,10 @@ import FormlarioEmpleado from "./FormlarioEmpleado";
 import ListaEmpleados from "./ListaEmpleados";
 import VariablesDeEstados from "./VariablesDeEstados";
 
-// importando Librería para las alertas
+// Importando nextjs-toast-notify.css para las alertas, forma parte del paquete nextjs-toast-notify
 import "nextjs-toast-notify/dist/nextjs-toast-notify.css";
+// Importando index.css para agregar un efecto Loading mientras se realiza una solicitud HTTP con Javascript
+import "loading-request/dist/index.css";
 
 const URL_API = "http://127.0.0.1:8500/api/empleados";
 const avatarUrl = "http://127.0.0.1:8500/avatars/";

FrontEndReactJS/package.json

@@ -6,6 +6,9 @@ import { useEffect } from "react";
 // importando la funcion toast Librería nextjs-toast-notify para las alertas
 import { toast } from "nextjs-toast-notify";
 
+// importando la Librería loading-request para agregar un efecto Loading mientras se realiza una solicitud HTTP con Javascript
+import { showLoading, hideLoading } from "loading-request";
+
 import DetallesEmpleado from "./DetallesEmpleado";
 import TablaEmpleado from "./TablaEmpleado";
 
@@ -37,15 +40,28 @@ const ListaEmpleados = ({
    * Función para eliminar un empleado
    */
   const eliminarEmpleado = async (idEmpleado) => {
+    // Agregando función showLoading para inabilitar la pantalla mientras se realiza la petición HTTP
+    showLoading({
+      message: "eliminando el empleado...",
+      spinnerColor: "#8201ff",
+      textLoadingColor: "#8201ff",
+      textLoadingSize: "20px",
+    });
+
     try {
       await axios.delete(`${URL_API}/${idEmpleado}`);
       const nuevaListaEmpleados = empleados.filter(
         (empleado) => empleado.id !== idEmpleado
       );
-      toast.success("Empleado eliminado correctamente");
+      toast.success("Empleado eliminado correctamente", {
+        sonido: true,
+      });
       setEmpleados(nuevaListaEmpleados);
     } catch (error) {
       console.error("Error al eliminar el empleado:", error);
+    } finally {
+      // Agregando función hideLoading para habilitar la pantalla
+      hideLoading({ timeLoading: 1000 });
     }
   };
 

FrontEndReactJS/src/components/FormlarioEmpleado.jsx

@@ -1,6 +1,5 @@
 import { useState } from "react";
 const VariablesDeEstados = () => {
-  const [loading, setLoading] = useState(false); // Para manejar el estado de carga cuando se enviar el formulario
   const [mostrarDetallesEmpleado, setMostarDetallesEmpleado] = useState(false); // Para manejar el estado del detalles del empleado
   const [dataInformacionEmpleado, setDataInformacionEmpleado] = useState({}); // Almacenar informacion del empleado cuando se observa detalles del mismo
   const [dataEditarEmpleado, setDataEditarEmpleado] = useState({}); // Almacenar informacion del empleado para editar
@@ -9,8 +8,6 @@ const VariablesDeEstados = () => {
   const [empleados, setEmpleados] = useState([]); // Para almacenar la lista de empleados
 
   return {
-    loading,
-    setLoading,
     empleados,
     setEmpleados,
     mostrarDetallesEmpleado,