Usuarios y login postgress

src/components/layouts/DashboardLayout.js

@@ -25,9 +25,9 @@ const DashboardLayout = ({ children: PanelContent }) => {
   const [breadcrumbItems, setBreadcrumbItems] = useState([]);
   const [titulo, setTitulo] = useState("");
   const location = useLocation();
-  const { userLoading, signOut, session, userDoc } = useAuth();
+  const { userLoading, signOut, session, user } = useAuth();
 
-  const esAdmin = userDoc?.rol === "admin";
+  const esAdmin = user?.rol === "admin";
   let finalDashboardRoutes = dashboardRoutes;
   if( !esAdmin ) {
     finalDashboardRoutes = finalDashboardRoutes.filter(f => !f?.path.includes("administracion"));
@@ -206,7 +206,7 @@ const DashboardLayout = ({ children: PanelContent }) => {
             </div>
 
             <div className="user">
-              {userDoc?.email}
+              {user?.email}
             </div>
           </div>
         </Header>

src/hooks/useAuth.js

@@ -25,6 +25,7 @@ export function AuthProvider(props) {
   // console.log(sessionFb);
   const signIn = React.useCallback(async (email, password) => {
     try {
+      console.log('tipoProyecto: ', tipoProyecto)
       if(tipoProyecto === TIPO_PROJECTO_FIREBASE){
         await signInWithEmailAndPassword(auth, email, password);
       } else {

src/hooks/useHttp.js

@@ -62,7 +62,11 @@ export function useHttp({
           }
         });
       } else {
-        localStorage.getItem(localStorageKey);
+        try {
+          localStorage.getItem(localStorageKey);
+        } catch (e) {
+          console.log(e)
+        }
       }
     });
   };
@@ -81,7 +85,8 @@ export function useHttp({
         } else {
           setLoading(() => true);
         }
-        const jwt =  await getToken();
+        // const jwt =  await getToken();
+        const jwt =  localStorage.getItem(localStorageKey);
         let fetchReq = {
           method: req,
           headers: makeHeaders(jwt),

src/routers/PrivateRouter.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 
 import { AppLoading } from "../components";
@@ -22,17 +22,29 @@ const routeMapper = (route, index) =>
 
 const PrivateRouter = () => {
   const { userDoc, user, userLoading } = useAuth();
-  const esAdmin = userDoc?.rol === "admin";
+  console.log('user: ', user)
+  // const esAdmin = user?.rol === "admin";
   let finalDashboardRoutes = dashboardRoutes;
 
-  if( !esAdmin ) {
-    finalDashboardRoutes = finalDashboardRoutes.filter( f => !f?.path.includes("administracion") );
+  const [esAdmin, setEsAdmin] = useState();
+
+  if (!esAdmin) {
+    finalDashboardRoutes = finalDashboardRoutes.filter(f => !f?.path.includes("administracion"));
   }
-  
+
+  useEffect(() => {
+    if (user) {
+      setEsAdmin(user?.rol === 'admin');
+    }
+  }, [user])
+
+
   if (!user && userLoading) {
     return <AppLoading />;
   }
 
+  console.log('esAdmin: ', esAdmin)
+
   return (
     <Router>
       <DashboardLayout>

src/views/administracion/usuarios/UsuariosDetalle.js

@@ -11,6 +11,7 @@ import {
   Statistic,
   InputNumber,
   Checkbox,
+  message,
 } from "antd";
 import {
   SaveOutlined,
@@ -22,16 +23,16 @@ import {
 } from "@ant-design/icons";
 import moment from "moment";
 import HttpService from "../../../services/httpService";
-import { useModel, useQuery } from "../../../hooks";
+import { useModel, useModels, useQuery } from "../../../hooks";
 import { firestore } from "../../../services/firebase";
 import { useHistory } from "react-router-dom";
 import { ViewLoading } from "../../../components";
 import { DefaultLayout } from "../../../components/layouts";
 import {
   collection,
-  doc,
-  getDoc,
-  updateDoc,
+  // doc,
+  // getDoc,
+  // updateDoc,
   query as queryFirestore,
   startAfter,
   where,
@@ -51,12 +52,12 @@ const UsuariosDetalle = () => {
   const url = "/administracion/usuarios";
   const [form] = Form.useForm();
 
-  const [usuario, setUsuario] = useState([]);
-  const [cargandoUsuario, setCargandoUsuario] = useState(true);
+  // const [usuario, setUsuario] = useState([]);
+  // const [cargandoUsuario, setCargandoUsuario] = useState(true);
   const [guadandoCargando, setGuardandoCargando] = useState(false);
 
-  const [cargandoDependencias, setCargandoDependencias] = useState(false);
-  const [dependencias, setDependencias] = useState([]);
+  // const [cargandoDependencias, setCargandoDependencias] = useState(false);
+  // const [dependencias, setDependencias] = useState([]);
 
   const [atendidos, setAtendidos] = useState(0);
   const [pendientes, setPendientes] = useState(0);
@@ -65,7 +66,9 @@ const UsuariosDetalle = () => {
 
   const [esLiderGlobal, setEsLiderGlobal] = useState(false);
 
-  const [request, setRequest] = useState(emptyRequest);
+  const [request, setRequest] = useState(emptyRequest); const [timer, setTimer] = useState(null);
+  const [dependenciasRequest, setDependenciasRequest] = useState({});
+  const [buscarValue, setBuscarValue] = useState('');
 
   const requestParams = useMemo(() => ({
     name: 'v1/usuario',
@@ -73,7 +76,28 @@ const UsuariosDetalle = () => {
     expand: 'eventos'
   }), [id]);
 
-  const { model } = useModel(request)
+  const dependenciasExtraParams = React.useMemo(() => ({ q: buscarValue }), [buscarValue])
+  const dependenciasParams = React.useMemo(() => ({
+    name: 'v1/dependencia',
+    limite: 20,
+    extraParams: dependenciasExtraParams
+  }), [dependenciasExtraParams])
+
+  const { model, modelLoading } = useModel(request)
+
+  const [
+    models,
+    modelsLoading, , ,
+  ] = useModels(dependenciasRequest);
+
+  const onSearchDependencias = (value) => {
+    clearTimeout(timer);
+    const newTimer = setTimeout(() => {
+      setBuscarValue(value);
+    }, 300);
+
+    setTimer(newTimer);
+  };
 
   const multipleButtonData = [
     {
@@ -88,6 +112,8 @@ const UsuariosDetalle = () => {
     try {
       setGuardandoCargando(true);
       const {
+        clave,
+        pwdConfirm,
         ciudad,
         email,
         facebook,
@@ -97,13 +123,18 @@ const UsuariosDetalle = () => {
         rol,
         telefono,
         twitter,
-        dependencias,
+        idDependencia,
       } = values;
 
+      if (clave !== pwdConfirm) {
+        message.error("Las contraseñas no coinciden.");
+        return;
+      }
+
       let body = {
         ciudad: ciudad,
         email: email,
-        dependencias: dependencias,
+        idDependencia: idDependencia,
         facebook: facebook?.trim() || "",
         genero: "",
         instagram: instagram?.trim() || "",
@@ -114,29 +145,34 @@ const UsuariosDetalle = () => {
         twitter: twitter?.trim() || "",
         liderGlobal: esLiderGlobal,
         sincronizado: null,
+        pwd: clave,
       };
+      delete body.clave;
+      delete body.pwdConfirm;
 
       if (editando) {
-        body["uid"] = id;
-      } else {
+        // body["uid"] = id;
+        body.id = id;
+      } /* else {
         body["verificado"] = "";
         body["clave"] = "Laud2026";
         body["timestamp"] = new Date();
-      }
+      } */
 
       let res = null;
-      if (editando) {
+      res = await HttpService.post('v1/usuario/guardar', body);
+      /* if (editando) {
         res = await HttpService.post("v1/usuario-firebase/put", body);
       } else {
         res = await HttpService.post("v1/usuario-firebase/post", body);
-      }
+      } */
 
       if (res?.status >= 200 && res?.status <= 299) {
-        body["uid"] = editando ? id : res?.response?.uid;
+        /* body["uid"] = editando ? id : res?.response?.uid;
         body["grupos"] = editando ? usuario?.grupos : [];
 
         const uid = editando ? id : res?.response?.uid;
-        await updateDoc(doc(firestore, "usuarios", uid), body);
+        await updateDoc(doc(firestore, "usuarios", uid), body); */
 
         Modal.success({
           title: "Éxito",
@@ -163,11 +199,11 @@ const UsuariosDetalle = () => {
     });
   };
 
-  const obtenerEventosUsuario = useCallback(async () => {
+  /* const obtenerEventosUsuario = useCallback(async () => {
     try {
       // Obtener eventos del usuario
-      const gruposUsuario = usuario?.grupos;
-      const idUsuario = usuario?.uid;
+      const gruposUsuario = model?.grupos;
+      const idUsuario = model?.id;
 
       // Obtener los eventos de todos los grupos
       if (gruposUsuario?.length > 0) {
@@ -240,9 +276,9 @@ const UsuariosDetalle = () => {
     } catch (error) {
       console.log("eror al obtener eventos del usuario: ", error);
     }
-  }, [usuario?.grupos, usuario?.uid]);
+  }, [usuario?.grupos, usuario?.uid]); */
 
-  const obtenerDependencias = useCallback(async () => {
+  /* const obtenerDependencias = useCallback(async () => {
     try {
       setCargandoDependencias(true);
       const querySnapshot = await getDocs(
@@ -258,7 +294,7 @@ const UsuariosDetalle = () => {
     } finally {
       setCargandoDependencias(false);
     }
-  }, []);
+  }, []); */
 
   useEffect(() => {
     setRequest(requestParams);
@@ -269,6 +305,11 @@ const UsuariosDetalle = () => {
   }, [requestParams])
 
   useEffect(() => {
+    setDependenciasRequest(dependenciasParams);
+    return () => setDependenciasRequest({});
+  }, [dependenciasParams])
+
+  useEffect(() => {
     if (editando && model) {
       form.setFieldsValue({
         ...model
@@ -277,12 +318,12 @@ const UsuariosDetalle = () => {
   }, [editando, form, model])
 
   // Obtener eventos del usuario.
-  useEffect(() => {
+  /* useEffect(() => {
     obtenerEventosUsuario();
-  }, [obtenerEventosUsuario]);
+  }, [obtenerEventosUsuario]); */
 
   // Obtener usuario
-  useEffect(() => {
+  /* useEffect(() => {
     let mounted = true;
     if (mounted && editando) {
       try {
@@ -301,27 +342,25 @@ const UsuariosDetalle = () => {
       }
     }
     return () => (mounted = false);
-  }, [editando, id]);
+  }, [editando, id]); */
 
   // Dependencias
-  useEffect(() => {
+  /* useEffect(() => {
     obtenerDependencias();
-  }, [obtenerDependencias]);
+  }, [obtenerDependencias]); */
 
   // Set form
   useEffect(() => {
-    let mounted = true;
-    if (mounted && usuario && editando) {
+    if (editando && model) {
       form.setFieldsValue({
-        ...usuario,
+        ...model,
       });
     } else {
       form.setFieldValue("rol", "cliente");
     }
-    return () => (mounted = false);
-  }, [editando, form, usuario]);
+  }, [editando, form, model]);
 
-  if (cargandoUsuario && editando) return <ViewLoading />;
+  if (modelLoading && editando) return <ViewLoading />;
 
   return (
     <DefaultLayout title={titulo} multipleButtonData={multipleButtonData}>
@@ -374,11 +413,30 @@ const UsuariosDetalle = () => {
           </Col>
           <Col className="gutter-row" span={24} md={12} lg={8}>
             <Form.Item
-              rules={[{ required: true, message: "Requerido" }]}
+              // rules={[{ required: true, message: "Requerido" }]}
               label="Dependencia"
-              name="dependencias"
+              name="idDependencia"
             >
               <Select
+                showSearch
+                onSearch={onSearchDependencias}
+                allowClear
+                placeholder="Elige a una dependencia"
+                optionFilterProp="children"
+                filterOption={(input, option) =>
+                  (option?.label ?? "")
+                    .toLowerCase()
+                    .includes(input.toLowerCase())
+                }
+                loading={modelsLoading}
+                options={models?.length > 0 && models?.map(i => ({
+                  ...i,
+                  value: i.id,
+                  label: i.nombre
+                }))}
+              // onChange={(_, item) => { setNombreDependencia(item?.nombre) }}
+              />
+              {/* <Select
                 placeholder="Seleccionar un una dependencia"
                 style={{ width: "100%" }}
                 allowClear
@@ -393,7 +451,7 @@ const UsuariosDetalle = () => {
                     label: i?.nombre,
                   }))
                 }
-              />
+              /> */}
             </Form.Item>
           </Col>
           <Col className="gutter-row" span={24} md={12} lg={8}>
@@ -489,7 +547,7 @@ const UsuariosDetalle = () => {
       <Divider />
 
       {/* Atendidos | Pendientes | Incompletos | Totales  */}
-      {editando && (
+      {/* editando && (
         <Row gutter={10}>
           <Col
             className="gutter-row"
@@ -547,7 +605,7 @@ const UsuariosDetalle = () => {
             />
           </Col>
         </Row>
-      )}
+      ) */}
     </DefaultLayout>
   );
 };

src/views/auth/Ingresar.js

@@ -9,8 +9,12 @@ const Ingresar = () => {
   const { signIn, sessionLoading } = useAuth();
 
   const onFinish = (values) => {
-    const { usuario, clave } = values;
-    signIn(usuario, clave);
+    try {
+      const { usuario, clave } = values;
+      signIn(usuario, clave);
+    } catch (e) {
+      console.log(e);
+    }
   };
 
   const onFinishFailed = (errorInfo) => {

src/views/inicio/Inicio.js

@@ -7,7 +7,7 @@ import { DefaultLayout } from "../../components/layouts";
 
 const Inicio = () => {
   const history = useHistory();
-  const { userDoc } = useAuth();
+  const { user } = useAuth();
 
   const cardsAdmin = [
     {
@@ -99,12 +99,12 @@ const Inicio = () => {
     );
   };
 
-  if (!userDoc) return <ViewLoading />;
+  if (!user) return <ViewLoading />;
 
   return (
     <DefaultLayout className="site-card-wrapper">
       <Row gutter={10}>
-        {userDoc?.rol === "admin" ? <ViewAdmin /> : <ViewCliente />}
+        {user?.rol === "admin" ? <ViewAdmin /> : <ViewCliente />}
       </Row>
     </DefaultLayout>
   );

src/views/perfil/Perfil.js

@@ -11,7 +11,7 @@ const Perfil = () => {
 
   const titulo = 'Editar perfil';
   const [ form ] = Form.useForm();
-  const { session } = useAuth();
+  const { user } = useAuth();
   const { Option } = Select;
   const [ usuario, setUsuario ] = useState(null);
   const [ guadandoCargando, setGuardandoCargando ] = useState(false);
@@ -23,7 +23,7 @@ const Perfil = () => {
       const { ciudad, email, facebook, genero, instagram, nombre, telefono, twitter } = values;
 
       let body = {
-        uid: session?.uid,
+        id: user?.id,
         ciudad: ciudad,
         email: email?.trim(),
         facebook: facebook?.trim() || '',
@@ -37,7 +37,7 @@ const Perfil = () => {
       const res = await HttpService.putCF('/registro', body);
   
       if( res?.status >= 200 && res?.status <= 299 ) {
-        await updateDoc(doc(firestore, "usuarios", session?.uid), body);  
+        // await updateDoc(doc(firestore, "usuarios", session?.uid), body);  
 
         Modal.success({
           title: 'Éxito',
@@ -66,7 +66,7 @@ const Perfil = () => {
   };
 
   // Obtener usuario
-  useEffect(() => {
+  /* useEffect(() => {
     let mounted = true;
     if( mounted && session ) {
       try {
@@ -79,18 +79,16 @@ const Perfil = () => {
         console.log('errror al obtener usuario: ', error);
       }
     }
-  }, [session]);
+  }, [session]); */
 
   // Set form
   useEffect(() => {
-    let mounted = true;
-    if( mounted && session ) {
+    if( user ) {
       form.setFieldsValue({
-        ...usuario,
+        ...user,
       })
     }
-    return () => mounted = false;
-  }, [form, session, usuario]);
+  }, [form, user]);
 
   return (
     <DefaultLayout