Refactor contexto credenciales

README.md

@@ -36,27 +36,6 @@ VITE_URL_CONDICIONES=<string>        # URL al documento que contiene los términ
 VITE_AES_KEY=<string>                # Clave AES utilizada para encriptar las credenciales
 ```
 
-## Ejecución del frontend  sin backend
-
-Es posible ejecutar la aplicación sin necesidad de tener activo el servidor backend, para esto se debe proveer las credenciales de Firebase y los permisos de drive en un archivo `.env`. Se provee el archivo `.env.example` como plantilla.  
-
-Para iniciar el servidor de esta forma, establezca la siguiente variables de entorno: `VITE_ENTORNO=0`. Esto puede ser realizado a través del comando `export VITE_ENTORNO=0` en Linux y `setx VITE_ENTORNO 0` en Windows.
-
-### Descripción de las variables de entorno
-
-```
-VITE_API_KEY=<string>            # API key del proyecto de Firebase
-VITE_AUTH_DOMAIN=<string>        # Dominio de autenticación de Firebase
-VITE_PROJECT_ID=<string>         # ID del proyecto en Firebase
-VITE_STORE_BUCKET=<string>       # ID del bucket de Firestore
-VITE_MESSAGING_SENDER_ID=<int>   # ID para envío de mensajes
-VITE_APP_ID=<string>             # ID de la aplicación de Firebase
-VITE_MEASUREMENT_ID=<string>     # ID de Google Analytics (métricas)
-VITE_DRIVE_SCOPES=<string>       # URLs de permisos de Drive requeridos
-VITE_ENTORNO=<int>               # Número de entorno de ejecución
-VITE_RECAPTCHA_SITE_KEY=<string> # Clave de reCAPTCHA para el sitio
-```
-
 ## Dockerfile
 
 La imagen generada `Dockerfile` corresponde a una imagen de despliegue, para construirla use el comando:

constants.js

@@ -1,5 +1,4 @@
 export const API_URL = import.meta.env.VITE_API_URL || "http://localhost:5000";
-export const ENTORNO = import.meta.env.VITE_ENTORNO || "0"; // 0: local, 1: production
 export const DRIVE_API_URL = import.meta.env.VITE_DRIVE_API_URL || "https://www.googleapis.com/drive/v3";
 export const DRIVE_UPLOAD_API_URL = import.meta.env.VITE_DRIVE_UPLOAD_API_URL || "https://www.googleapis.com/upload/drive/v3";
 export const DRIVE_FILENAME = import.meta.env.VITE_DRIVE_FILENAME || "HADT - Pacientes.xlsx";

src/App.jsx

@@ -21,7 +21,7 @@ export default function App() {
     const auth = useAuth();
     const { t } = useTranslation();
     const navegacion = useNavegacion();
-    const credenciales = useCredenciales();
+    const { firebaseAuth, scopesDrive } = useCredenciales();
     const [modal, setModal] = useState({
         mostrar: false, mensaje: ""
     });
@@ -30,22 +30,24 @@ export default function App() {
     });
 
     /**
-     * Actualiza las instancia de Firebase y permisos de Drive
-     * cuando se cargan las credenciales.
-    */
+     * Configura el formato en que se mostrarán las fechas de la aplicación según
+     * el idioma seleccionado por el usuario.
+     */
     useEffect(() => {
         import("dayjs/locale/es").then(() => {
             const idioma = localStorage.getItem("i18nextLng");
-            if (idioma != null) {
-                dayjs.locale(idioma);
-            } else {
-                dayjs.locale("es");
-            }
+            dayjs.locale(idioma != null ? idioma : "es");
         });
-        auth.setAuth(credenciales.obtenerInstanciaAuth());
-        auth.setDb(credenciales.obtenerInstanciaDB());
-        auth.setScopes(credenciales.scopesDrive);
-    }, [credenciales]);
+    });
+
+    /**
+     * Actualiza las instancia de Firebase y permisos de Drive
+     * cuando se cargan las credenciales.
+    */
+    useEffect(() => {
+        auth.setAuth(firebaseAuth);
+        auth.setScopes(scopesDrive);
+    }, [firebaseAuth, scopesDrive]);
 
     useEffect(() => {
         if (auth.autenticado != null && !auth.autenticado) {

src/components/forms/FormDiagnostico.jsx

@@ -54,7 +54,7 @@ const valoresPredet = {
 export default function FormDiagnostico({ listadoPestanas, tituloHeader, pacientes = [], esDiagPacientes = false, manejadorRecarga = null }) {
     const auth = useAuth();
     const navegacion = useNavegacion();
-    const credenciales = useCredenciales();
+    const { reCAPTCHA, firestore } = useCredenciales();
     const { t } = useTranslation();
     const navigate = useNavigate();
     const [desactivarBtn, setDesactivarBtn] = useState(true);
@@ -69,9 +69,6 @@ export default function FormDiagnostico({ listadoPestanas, tituloHeader, pacient
             return 3;
         }
     }, [navegacion.dispositivoMovil, navegacion.ancho, navegacion.orientacion]);
-    const reCAPTCHAApi = useMemo(() => {
-        return credenciales.obtenerRecaptcha();
-    }, [credenciales.obtenerRecaptcha]);
     const [cargandoBtn, setCargandoBtn] = useState(false);
     const [antTema, setAntTema] = useState(navegacion.tema);
     const CAPTCHA = useRef(null);
@@ -225,7 +222,7 @@ export default function FormDiagnostico({ listadoPestanas, tituloHeader, pacient
             fecha: Timestamp.now(), validado: 2, paciente: paciente, lime: resultado.lime
         };
 
-        const res = await cambiarDiagnostico(id, uid, instancia, credenciales.obtenerInstanciaDB());
+        const res = await cambiarDiagnostico(id, uid, instancia, firestore);
 
         if (res.success) {
             const url = esDiagPacientes ? "/diagnostico-paciente" : "/diagnostico-anonimo";
@@ -610,7 +607,7 @@ export default function FormDiagnostico({ listadoPestanas, tituloHeader, pacient
                             <ReCAPTCHA
                                 theme={temaCaptcha}
                                 onChange={manejadorReCAPTCHA}
-                                sitekey={reCAPTCHAApi}
+                                sitekey={reCAPTCHA}
                                 ref={CAPTCHA}
                                 hl={navegacion.idioma} />
                         </Grid>

src/components/layout/NavBar.jsx

@@ -9,7 +9,7 @@ import MenuOpenIcon from "@mui/icons-material/MenuOpen";
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import BtnTema from "../layout/BtnTema";
 import LogoutIcon from '@mui/icons-material/Logout';
-import { CODIGO_ADMIN, URL_MANUAL_ADMIN, URL_MANUAL_USUARIO } from "../../../constants";
+import { URL_MANUAL_ADMIN, URL_MANUAL_USUARIO } from "../../../constants";
 import ArticleIcon from '@mui/icons-material/Article';
 import SwitchLabel from "../tabs/SwitchLabel";
 import { useTranslation } from "react-i18next";

src/components/layout/Sidebar.jsx

@@ -7,7 +7,6 @@ import { detAbrirMenu } from "../../utils/Responsividad";
 import { useAuth } from "../../contexts/AuthContext";
 import PeopleIcon from '@mui/icons-material/People';
 import { useMemo } from "react";
-import { CODIGO_ADMIN } from "../../../constants";
 import { useTranslation } from "react-i18next";
 
 /**

src/components/menu/MenuAdministrador.jsx

@@ -24,7 +24,7 @@ import { useTranslation } from "react-i18next";
  */
 export default function MenuAdministrador() {
     const auth = useAuth();
-    const credenciales = useCredenciales();
+    const { firestore } = useCredenciales();
     const navegacion = useNavegacion();
     const { t } = useTranslation();
     const [cargando, setCargando] = useState(true);
@@ -46,7 +46,6 @@ export default function MenuAdministrador() {
             return 4;
         }
     }, [navegacion]);
-    const DB = useMemo(() => credenciales.obtenerInstanciaDB(), [credenciales]);
     const diagnosticosMesActual = useMemo(() => obtenerDatosMesActual(datosDiagnosticos, fechaActual, navegacion.idioma)
     , [datosDiagnosticos, fechaActual, navegacion.idioma]);
     const usuariosMesActual = useMemo(() => obtenerDatosMesActual(datosUsuarios, fechaActual, navegacion.idioma)
@@ -95,12 +94,12 @@ export default function MenuAdministrador() {
     useEffect(() => {
         const { user } = auth.authInfo;
 
-        if (user != null && DB != null) {
+        if (user != null && firestore != null) {
             cargarUsuarios(user.accessToken).then((x) => {
-                cargarDiagnosticos(DB, x.map((x) => x.uid));
+                cargarDiagnosticos(firestore, x.map((x) => x.uid));
             });
         }
-    }, [auth.authInfo, DB]);
+    }, [auth.authInfo, firestore]);
 
     /**
      * Actualiza el gráfico de barras con los datos de diagnósticos y usuarios.

src/components/menu/MenuUsuario.jsx

@@ -26,7 +26,7 @@ import { AES_KEY } from "../../../constants";
  */
 export default function MenuUsuario() {
     const auth = useAuth();
-    const credenciales = useCredenciales();
+    const { firestore } = useCredenciales();
     const navegacion = useNavegacion();
     const { t } = useTranslation();
     const drive = useDrive();
@@ -42,7 +42,6 @@ export default function MenuUsuario() {
         const { orientacion, dispositivoMovil, ancho } = navegacion;
         return (dispositivoMovil && orientacion == "vertical") || (!dispositivoMovil && (ancho <= 700)) ? 1 : 2;
     }, [navegacion]);
-    const DB = useMemo(() => credenciales.obtenerInstanciaDB(), [credenciales.obtenerInstanciaDB]);
     const diagnosticosMesActual = useMemo(() => obtenerDatosMesActual(datosDiagnosticos, fechaActual, navegacion.idioma)
     , [datosDiagnosticos, fechaActual, navegacion.idioma]);
     const pacientesMesActual = useMemo(() => obtenerDatosMesActual(datosPacientes, fechaActual, navegacion.idioma)
@@ -89,12 +88,12 @@ export default function MenuUsuario() {
         const descargar = sessionStorage.getItem("descargando-drive");
         const { uid } = auth.authInfo;
 
-        if (uid != null && drive.token != null && (descargar == null || descargar == "false") && DB != null) {
+        if (uid != null && drive.token != null && (descargar == null || descargar == "false") && firestore != null) {
             sessionStorage.setItem("descargando-drive", "true");
             cargarPacientes();
-            cargarDiagnosticos(uid, DB);
+            cargarDiagnosticos(uid, firestore);
         }
-    }, [auth.authInfo, drive.token, DB]);
+    }, [auth.authInfo, drive.token, firestore]);
 
      /**
      * Actualiza el gráfico de barras con los datos de diagnósticos y usuarios.

src/contexts/AuthContext.jsx

@@ -33,7 +33,6 @@ export function AuthProvider({ children }) {
     // Instancia de autenticación de Firebase
     const [auth, setAuth] = useState(null);
     // Instancia de la base de datos de Firebase
-    const [db, setDb] = useState(null);
     const [tokenDrive, setTokenDrive] = useState(null);
     // Información del usuario autenticado
     const [authInfo, setAuthInfo] = useState({
@@ -77,10 +76,10 @@ export function AuthProvider({ children }) {
      */
     useEffect(() => {
         const ruta = window.location.pathname == "/";
-        if (auth != null && scopes != null && db != null && ruta) {
+        if (auth != null && scopes != null && ruta) {
             setCargando(false);
         }
-    }, [auth, db, scopes]);
+    }, [auth, scopes]);
 
     /**
      * Recupera la sesión si el usuario no la ha cerrado. También refresca los tokens
@@ -429,7 +428,7 @@ export function AuthProvider({ children }) {
 
     return (
         <authContext.Provider value={{
-            useAuth, auth, cargando, authInfo, authError, tokenDrive, setAuth, setDb, setTokenDrive,
+            useAuth, auth, cargando, authInfo, authError, tokenDrive, setAuth, setTokenDrive,
             setScopes, cerrarSesion, iniciarSesionGoogle, reautenticarUsuario, permisos, autenticado,
             requiereRefresco, quitarPantallaCarga, cambiarModoUsuario, mostrarPantallaCarga
         }}>