Creating an optimized production build

Author: LePeanutButter

src/App.js

@@ -1,5 +1,5 @@
 // App.js
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect,  useRef, useCallback } from "react";
 import {
   BrowserRouter as Router,
   Route,
@@ -124,37 +124,42 @@ const obtenerCorreoDesdeToken = (token) => {
 function AppRoutes({ user, setUser }) {
   const [loading, setLoading] = useState(true);
   const navigate = useNavigate();
-
-  useEffect(() => {
-    const fetchUser = async () => {
-      const token = localStorage.getItem("token");
-      if (token) {
-        try {
-          const correoGuardado = obtenerCorreoDesdeToken(token);
-          if (correoGuardado) {
-            const usuario = await consultarUsuarioPorCorreo(correoGuardado);
-            setUser(usuario);
-
-            if (usuario.isAdmin) {
-              document.documentElement.style.setProperty("--variable-collection-current-color", "var(--variable-collection-user-admin)");
-              navigate("/administrador");
-            } else {
-              document.documentElement.style.setProperty("--variable-collection-current-color", "var(--variable-collection-user-estandar)");
-              navigate("/home");
-            }
-          } else {
-            localStorage.removeItem("token");
-          }
-        } catch (error) {
-          console.error("Error obteniendo usuario:", error);
+  const hasFetchedUser = useRef(false);
+
+  const fetchUser = useCallback(async () => {
+    const token = localStorage.getItem("token");
+    if (token) {
+      try {
+        const correoGuardado = obtenerCorreoDesdeToken(token);
+        if (correoGuardado) {
+          const usuario = await consultarUsuarioPorCorreo(correoGuardado);
+          setUser(usuario);
+
+          const currentPath = usuario.isAdmin ? "/administrador" : "/home";
+          document.documentElement.style.setProperty(
+            "--variable-collection-current-color",
+            usuario.isAdmin
+              ? "var(--variable-collection-user-admin)"
+              : "var(--variable-collection-user-estandar)"
+          );
+          navigate(currentPath);
+        } else {
           localStorage.removeItem("token");
         }
+      } catch (error) {
+        console.error("Error obteniendo usuario:", error);
+        localStorage.removeItem("token");
       }
-      setLoading(false);
-    };
+    }
+    setLoading(false);
+  }, [setUser, navigate]);
 
-    fetchUser();
-  }, []);
+  useEffect(() => {
+    if (!hasFetchedUser.current) {
+      fetchUser();
+      hasFetchedUser.current = true;
+    }
+  }, [fetchUser]);
 
   const handleLogout = () => {
     localStorage.removeItem("token");

src/components/Admin/filters/DiaSalonFilter.jsx

@@ -25,7 +25,7 @@ const DiaSalonFilter = ({ onBuscar }) => {
     if (dia) {
       onBuscar({ dia });
     }
-  }, [dia]);
+  }, [dia, onBuscar]);
 
   return (
     <Container>

src/components/Admin/filters/MesSalonFilter.jsx

@@ -35,15 +35,7 @@ const MesSalonFilter = ({ onBuscar }) => {
     if (mes) {
       onBuscar({ mes });
     }
-  }, [mes]);
-
-  const handleBuscar = () => {
-    if (!mes) {
-      alert("Por favor selecciona un mes");
-      return;
-    }
-    onBuscar({ mes });
-  };
+  }, [mes, onBuscar]);
 
   return (
     <Container>

src/components/Admin/filters/RangoFechasFilter.jsx

@@ -30,15 +30,7 @@ const RangoFechasFilter = ({ onBuscar }) => {
     if (fechaInicio && fechaFin) {
       onBuscar({ fechaInicio, fechaFin });
     }
-  }, [fechaInicio, fechaFin]);
-
-  const handleBuscar = () => {
-    if (!fechaInicio || !fechaFin) {
-      alert("Por favor, selecciona ambas fechas.");
-      return;
-    }
-    onBuscar({ fechaInicio, fechaFin });
-  };
+  }, [fechaInicio, fechaFin, onBuscar]);
 
   return (
     <Container>
@@ -58,7 +50,6 @@ const RangoFechasFilter = ({ onBuscar }) => {
           onChange={(e) => setFechaFin(e.target.value)} 
         />
       </Row>
-      <Button onClick={handleBuscar}>Buscar Reservas</Button>
     </Container>
   );
 };
@@ -85,12 +76,4 @@ const Input = styled.input`
   font-size: 16px;
   border: 1px solid #ccc;
   border-radius: 4px;
-`;
-const Button = styled.button`
-  background-color: #52b69a;
-  color: #fff;
-  padding: 8px 16px;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
 `;

src/components/Admin/filters/TotalSalonFilter.jsx

@@ -21,7 +21,7 @@ const TotalSalonFilter = ({ onBuscar }) => {
   useEffect(() => {
     // Realizar la búsqueda automáticamente cuando se selecciona un salón
     onBuscar({ ...(salon && { idSalon: salon }) });
-  }, [salon]);
+  }, [salon, onBuscar]);
 
   return (
     <Container>

src/components/Table/UserRow.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import styled from 'styled-components';
 import Button from "../Button/Button"; // Asegúrate de que este import apunte a tu componente Button
 

src/components/popup/AddReservaModal/GenerarReservaForm.jsx

@@ -30,18 +30,6 @@ const FormGenerarReserva = ({ usuario, onClose , onReservaExitosa }) => {
         { hora: "05:30 PM", valor: 17.5 }
     ];
 
-    const generarFechasDelMes = (mes, año) => {
-        const fechas = [];
-        const fechaBase = new Date(año, mes - 1, 1);
-    
-        while (fechaBase.getMonth() === mes - 1) {
-            fechas.push(fechaBase.toISOString().split("T")[0]);
-            fechaBase.setDate(fechaBase.getDate() + 1); 
-        }
-    
-        return fechas;
-    };
-
     useEffect(() => {
         const cargarSalones = async () => {
             const data = await getSalones();

src/components/popup/CRUDSalonModal/CRUDSalonForm.jsx

@@ -7,21 +7,6 @@ function CRUDSalonForm({ tempSalon, setTempSalon, isEditing }) {
     setTempSalon({ ...tempSalon, recursos: [...tempSalon.recursos, { nombre: "", cantidad: 1, especificaciones: [], activo: true }] });
   };
 
-  // Función para eliminar un recurso por índice
-  const eliminarRecurso = (index) => {
-    setTempSalon({ 
-      ...tempSalon, 
-      recursos: tempSalon.recursos.filter((_, i) => i !== index) 
-    });
-  };
-
-  // Función para actualizar un recurso específico
-  const actualizarRecurso = (index, value) => {
-    const nuevosRecursos = [...tempSalon.recursos];
-    nuevosRecursos[index] = value;
-    setTempSalon({ ...tempSalon, recursos: nuevosRecursos });
-  };
-
   return (
     <div className="modal-content">
       <div className="campo">

src/config/config.js

@@ -1 +1 @@
-export const BASE_URL = "https://limbo-cfgvasfjc6argbhh.canadacentral-01.azurewebsites.net/";
+export const BASE_URL = "http://localhost:8080/api";

src/pages/Administrator/consultaModal/ConsultaDiaSalon.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useCallback } from "react";
 import styled from "styled-components";
 import DiaSalonFilter from "../../../components/Admin/filters/DiaSalonFilter";
 import DiaSalonChart from "../../../components/Admin/charts/DiaSalonChart";
@@ -8,7 +8,7 @@ const ConsultaDiaSalon = () => {
     const [reservas, setReservas] = useState([]);
     const [errorMsg, setErrorMsg] = useState("");
 
-    const handleBuscar = async (filtros) => {
+    const handleBuscar = useCallback(async (filtros) => {
       try {
         setErrorMsg("");
         setReservas([]);
@@ -26,7 +26,7 @@ const ConsultaDiaSalon = () => {
       } catch (error) {
         setErrorMsg(error.message || "Error consultando reservas");
       }
-    };
+    }, []);
 
     return (
       <Body>