Procesar eventos

src/hooks/useAuth.js

@@ -22,7 +22,7 @@ export function AuthProvider(props) {
   const [agendaRequest, setAgendaRequest] = React.useState(empty);
   const [sessionJWT, sessionJWTLoading] = useHttp(sessionRequest);
   const [agendaResponse, agendaResponseLoading, agendaError] = useHttp(agendaRequest);
-  console.log(sessionFb);
+  // console.log(sessionFb);
   const signIn = React.useCallback(async (email, password) => {
     try {
       if(tipoProyecto === TIPO_PROJECTO_FIREBASE){

src/views/administracion/eventos/EventoDetalleGrupo.js

@@ -40,6 +40,8 @@ import locale from "antd/es/date-picker/locale/es_ES";
 import moment from "moment";
 import "moment/locale/es-mx";
 import { emptyRequest } from "../../../constants/requests";
+import HttpService from "../../../services/httpService";
+import { respuestas } from "../../../utilities";
 
 const { RangePicker } = DatePicker;
 const { REACT_APP_WEB_URL } = process.env;
@@ -82,7 +84,7 @@ const EventoDetalleGrupo = () => {
 
   const requestParams = useMemo(() => ({
     name: 'v1/evento',
-    expand: 'grupos,media',
+    expand: 'grupos.usuarios,media,eventoAcciones',
     extraParams: requestExtraParams
   }), [requestExtraParams])
 
@@ -170,7 +172,15 @@ const EventoDetalleGrupo = () => {
   const procesarUsuarios = async () => {
     try {
       setProcesando(true);
-      let usuarios = await obtenerUsuariosGrupo();
+      // let usuarios = evento?.grupos.map((g) => g?.usuarios?.map((u) => u));
+      let usuarios = [];
+      evento?.grupos.forEach((g) => {
+        let _usrs = g?.usuarios;
+
+        if (_usrs?.length > 0) {
+          usuarios = [...usuarios, ..._usrs];
+        }
+      })
 
       const json = JSON.parse(textAreaData);
       const accion = b64_to_utf8(json.accion).split(".");
@@ -183,29 +193,38 @@ const EventoDetalleGrupo = () => {
         return;
       }
 
-      let resultado = { ...evento.resultado };
+      // let resultado = { /* ...evento.resultado */ };
+      let resultado = [];
       for (let u = 0; u < usuarios?.length; u++) {
         let usuarioTipo = usuarios[u][json.tipo]?.toLowerCase();
+        let obj = { idUsuario: usuarios[u]?.id };
+        /* if (resultado[usuarios[u]?.id] === undefined) {
+          resultado[usuarios[u]?.id] = [];
+        } */
 
-        if (resultado[usuarios[u]?.uid] === undefined) {
-          resultado[usuarios[u]?.uid] = [];
-        }
-
+        const _acciones = []
         if (usuarioTipo?.toLowerCase()) {
           for (let i = 0; i < lista.length; i++) {
             const nick = lista[i]?.replace("@", "").toLowerCase();
 
             if (nick?.includes(usuarios[u][json.tipo])) {
-              if (!resultado[usuarios[u]?.uid].includes(accion[0])) {
-                resultado[usuarios[u]?.uid].push(accion[0]);
+              if (!_acciones.includes(accion[0])) {
+                _acciones.push(accion[0]);
               }
+              // if (!resultado[usuarios[u]?.id].includes(accion[0])) {
+              //   resultado[usuarios[u]?.id].push(accion[0]);
+              // }
             }
           }
         }
+
+        obj.acciones = _acciones;
+
+        resultado.push(obj);
       }
 
       // Hay indices que salen en undefined y salió error al guardar en firebase
-      try {
+      /* try {
         resultado = JSON.parse(JSON.stringify(resultado));
       } catch (e) { }
 
@@ -213,21 +232,27 @@ const EventoDetalleGrupo = () => {
       try {
         usuarios = JSON.parse(JSON.stringify(usuarios));
       } catch (e) { }
-
+ */
       let body = {
-        usuarios,
+        // usuarios,
+        id: evento.id,
         resultado,
       };
 
-      await updateDoc(doc(firestore, "eventos", evento?.id), body);
-      history.push(
-        urlweb +
-        "/resultado-grupo-evento?id=" +
-        evento?.id +
-        "&tag=" +
-        evento?.tag,
-      );
-      setVisible(false);
+      const res = await HttpService.post('v1/evento/procesar', body);
+      respuestas(res);
+      if (res?.status === 200) {
+        history.push(
+          urlweb +
+          "/resultado-grupo-evento?id=" +
+          evento?.id +
+          "&tag=" +
+          evento?.tag,
+        );
+        setVisible(false);
+      }
+
+      // await updateDoc(doc(firestore, "eventos", evento?.id), body);
     } catch (error) {
       console.log("Error al procesar: ", error);
       message.warning({
@@ -892,12 +917,13 @@ const EventoDetalleGrupo = () => {
         ...eventos[0],
         fechaFinal: moment(eventos[0]?.fechaFinal),
         fechaInicio: moment(eventos[0]?.fechaInicio),
+        accion: eventos[0]?.eventoAcciones ? eventos[0]?.eventoAcciones.map((i) => i.accion) : null
       });
     }
     return () => (mounted = false);
   }, [editando, eventos, form, grupoEvento?.pathFirebase]);
 
-  if (cargandoEvento) return <ViewLoading />;
+  if (modelsLoading || cargandoEvento) return <ViewLoading />;
 
   return (
     <>

src/views/administracion/eventos/EventosDetalle.js

@@ -66,7 +66,7 @@ const EventosDetalle = () => {
   const [form] = Form.useForm();
 
   const [evento, setEvento] = useState([]);
-  const [cargandoEvento, setCargandoEvento] = useState(true);
+  // const [cargandoEvento, setCargandoEvento] = useState(true);
   const [guadandoCargando, setGuardandoCargando] = useState(false);
   const [sinFechaFin, setSinFechaFin] = useState(false);
   const [visible, setVisible] = useState(false);
@@ -624,10 +624,10 @@ const EventosDetalle = () => {
       setPreviaImg(referencias[0]?.ruta)
     }
   }, [referencias])
+  
+    console.log('model: ', model)
 
-  if (cargandoEvento && editando) return <ViewLoading />;
-
-  console.log('model: ', model)
+  if (modelLoading && editando) return <ViewLoading />;
 
   return (
     <DefaultLayout multipleButtonData={multipleButtonData}>

src/views/administracion/eventos/EventosListado.js

@@ -313,8 +313,16 @@ const EventosListado = () => {
 
   const procesarUsuarios = async () => {
     try {
-      setProcesando(true)
-      const usuarios = await obtenerUsuariosGrupo();
+      setProcesando(true);
+      // let usuarios = evento?.grupos.map((g) => g?.usuarios?.map((u) => u));
+      let usuarios = [];
+      evento?.grupos.forEach((g) => {
+        let _usrs = g?.usuarios;
+
+        if (_usrs?.length > 0) {
+          usuarios = [...usuarios, ..._usrs];
+        }
+      })
 
       const json = JSON.parse(textAreaData);
       const accion = b64_to_utf8(json.accion).split(".");
@@ -322,45 +330,71 @@ const EventosListado = () => {
 
       if (json?.tipo !== evento?.redSocial?.toLowerCase()) {
         message.warning({
-          content: 'La red social es incorrecta',
+          content: "La red social es incorrecta",
         });
-        return
+        return;
       }
 
-      let resultado = { ...evento.resultado };
+      // let resultado = { /* ...evento.resultado */ };
+      let resultado = [];
       for (let u = 0; u < usuarios?.length; u++) {
         let usuarioTipo = usuarios[u][json.tipo]?.toLowerCase();
+        let obj = { idUsuario: usuarios[u]?.id };
+        /* if (resultado[usuarios[u]?.id] === undefined) {
+          resultado[usuarios[u]?.id] = [];
+        } */
 
-        if (resultado[usuarios[u]?.uid] === undefined) {
-          resultado[usuarios[u]?.uid] = [];
-        }
-
+        const _acciones = []
         if (usuarioTipo?.toLowerCase()) {
           for (let i = 0; i < lista.length; i++) {
             const nick = lista[i]?.replace("@", "").toLowerCase();
 
             if (nick?.includes(usuarios[u][json.tipo])) {
-              if (!resultado[usuarios[u]?.uid].includes(accion[0])) {
-                resultado[usuarios[u]?.uid].push(accion[0])
+              if (!_acciones.includes(accion[0])) {
+                _acciones.push(accion[0]);
               }
+              // if (!resultado[usuarios[u]?.id].includes(accion[0])) {
+              //   resultado[usuarios[u]?.id].push(accion[0]);
+              // }
             }
           }
         }
+
+        obj.acciones = _acciones;
+
+        resultado.push(obj);
       }
 
+      // Hay indices que salen en undefined y salió error al guardar en firebase
+      /* try {
+        resultado = JSON.parse(JSON.stringify(resultado));
+      } catch (e) { }
+
+      // Sale un error en firebase de que no puede guardar información en undefined (no se encontró dónde)
+      try {
+        usuarios = JSON.parse(JSON.stringify(usuarios));
+      } catch (e) { }
+ */
       let body = {
-        usuarios,
+        // usuarios,
+        id: evento.id,
         resultado,
+      };
+
+      const res = await HttpService.post('v1/evento/procesar', body);
+      respuestas(res);
+      if (res?.status === 200) {
+        history.push(
+          url +
+          "/resultado-grupo-evento?id=" +
+          evento?.id +
+          "&tag=" +
+          evento?.tag,
+        );
+        setVisible(false);
       }
 
-      await updateDoc(doc(firestore, "eventos", evento?.id), body);
-      if (evento?.tag) {
-        history.push(url + '/resultado-grupo-evento?id=' + evento?.id + "&tag=" + evento?.tag);
-      } else {
-        history.push(url + '/resultado?id=' + evento?.id);
-      }
-      setVisible(false);
-
+      // await updateDoc(doc(firestore, "eventos", evento?.id), body);
     } catch (error) {
       console.log('Error al procesar: ', error);
       message.warning({

src/views/administracion/eventos/ResultadoGrupoEvento.js

@@ -1,14 +1,15 @@
-import React, { useState, useEffect } from 'react'
-import {Row, Col, Table, Divider, Tooltip } from "antd"
+import React, { useState, useEffect, useMemo } from 'react'
+import { Row, Col, Table, Divider, Tooltip } from "antd"
 import { RedoOutlined, ArrowLeftOutlined, CheckCircleOutlined, FileExcelOutlined, MinusOutlined } from '@ant-design/icons'
 import { doc, getDoc, query as firebaseQuery, where, collection, getDocs } from 'firebase/firestore'
-import { 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 { SimpleTableLayout } from '../../../components/layouts'
 import exportarExcelJS from '../../../services/exportarExcel'
 import 'moment/locale/es-mx'
+import { emptyRequest } from '../../../constants/requests'
 
 const ResultadoGrupoEvento = () => {
 
@@ -16,21 +17,46 @@ const ResultadoGrupoEvento = () => {
   const id = query.get('id');
   const tag = query.get('tag');
   const history = useHistory();
-  const [evento, setEvento] = useState(null);
+  // const [evento, setEvento] = useState(null);
   const [grupoEvento, setGrupoEvento] = useState([])
   const [filteredResults, setFilteredResults] = useState([]);
   const [searchInput, setSearchInput] = useState('');
   const [usuarios, setUsuarios] = useState([]);
 
+  const [request, setRequest] = useState(emptyRequest);
+  const [requestEventos, setRequestEventos] = useState(emptyRequest);
+
+  const requestParams = useMemo(() => ({
+    name: 'v1/evento',
+    id: id,
+    expand: 'eventoAcciones,resultados,grupos.usuarios'
+  }), [id]);
+
+  const requestEventosExtraParams = useMemo(() => ({
+    tag: tag
+  }), [tag]);
+
+  const requestEventosParams = useMemo(() => ({
+    name: 'v1/evento',
+    expand: 'eventoAcciones,resultados,grupos.usuarios',
+    extraParams: requestEventosExtraParams
+  }), [requestEventosExtraParams]);
+
+  const { model/* , modelLoading */ } = useModel(request);
+
+  const [
+    eventos, , , ,
+  ] = useModels(requestEventos);
+
   const defaultText = prop => prop || <span style={{ color: '#c7c3c3' }}>---</span>;
-  
+
   const RenderAccion = (item, redSocial) => {
 
-    const idUsuario = item?.uid;
+    const idUsuario = item?.id;
 
     const red = redSocial.toLowerCase();
 
-    if( item[red].replace(/\s/g, '') === "" ) {
+    if (item[red]?.replace(/\s/g, '') === "") {
       return (
         <Tooltip title="Sin red social">
           <MinusOutlined />
@@ -39,27 +65,37 @@ const ResultadoGrupoEvento = () => {
     }
 
 
-    for( let i = 0; i < grupoEvento?.length; i ++ ) {
-      if( grupoEvento[i]?.red === redSocial ) {
+    for (let i = 0; i < grupoEvento?.length; i++) {
+      if (grupoEvento[i]?.red === redSocial) {
 
         const urlEvento = `https://laud-red.web.app/evento-laud?id=${grupoEvento[i]?.idEvento}&uid=${item?.uid}`;
-        const tel = '+52'+item?.telefono;
+        const tel = '+52' + item?.telefono;
         const waParams1 = `Hola, aún falta tu participación en el siguiente evento en ${redSocial}: ${urlEvento}`;
-        const waParams2 = `Hola, gracias por haber participado en el evento de ${redSocial }:  *"${evento?.nombre}"*`;
+        const waParams2 = `Hola, gracias por haber participado en el evento de ${redSocial}:  *"${model?.nombre}"*`;
         const url1 = `https://wa.me/${tel}?text=${encodeURIComponent(waParams1)}`;
         const url2 = `https://wa.me/${tel}?text=${encodeURIComponent(waParams2)}`;
-        
 
-        if( grupoEvento[i]?.resultado[idUsuario]?.length > 0) {
+        const resultado = grupoEvento[i]?.resultado?.find((r) => r?.idUsuario === idUsuario);
+        if (resultado) {
+          return (
+            <Tooltip
+              title={`Se verificó participación con alguna de las siguientes acciones: ${model?.eventoAcciones?.map((a) => a.accion).join()}`}
+              onClick={() => window.open(url2, '_blank')}
+            >
+              <CheckCircleOutlined style={{ color: '#33ca3a', fontSize: 24 }} />
+            </Tooltip>
+          )
+        }
+        /* if (grupoEvento[i]?.resultado[idUsuario]?.length > 0) {
           return (
             <Tooltip
-              title={`Se verificó participación con alguna de las siguientes acciones: ${evento?.accion.join()}`}
+              title={`Se verificó participación con alguna de las siguientes acciones: ${model?.accion.join()}`}
               onClick={() => window.open(url2, '_blank')}
             >
               <CheckCircleOutlined style={{ color: '#33ca3a', fontSize: 24 }} />
             </Tooltip>
           )
-        } else {
+        } */ else {
           return (
             <Tooltip
               title="Reenviar elace del evento."
@@ -85,21 +121,21 @@ const ResultadoGrupoEvento = () => {
       dataIndex: "facebook",
       key: "facebook",
       align: 'center',
-      render: (_, item )=> RenderAccion(item, "Facebook")
+      render: (_, item) => RenderAccion(item, "Facebook")
     },
     {
       title: "Instagram",
       dataIndex: "instagram",
       key: "instagram",
       align: 'center',
-      render: (_, item )=> RenderAccion(item, "Instagram")
+      render: (_, item) => RenderAccion(item, "Instagram")
     },
     {
       title: "Twitter",
       dataIndex: "twitter",
       key: "twitter",
       align: 'center',
-      render: (_, item )=> RenderAccion(item, "Twitter")
+      render: (_, item) => RenderAccion(item, "Twitter")
     },
   ];
 
@@ -121,12 +157,12 @@ const ResultadoGrupoEvento = () => {
   const generarReporte = async () => {
     try {
       const datos = [];
-      const usuarios = evento?.usuarios;
+      const _usuarios = usuarios;
 
       // const arrRedes = evento?.redes?.map( i => (
       //   i?.redSocial?.toLowerCase()
       // ))
- 
+
       // if( !arrRedes.includes('facebook') ) {
       //   for(let i = 0; i < columns.length; i++) {
       //     if( columns[i].key === 'facebook' ) {
@@ -152,17 +188,17 @@ const ResultadoGrupoEvento = () => {
       //   }
       // } 
 
-      for( let u = 0; u < usuarios?.length; u++) {
-        let item ={
-          nombre: usuarios[u].nombre,
+      for (let u = 0; u < _usuarios?.length; u++) {
+        let item = {
+          nombre: _usuarios[u].nombre,
         }
 
-        const idUsuario = usuarios[u]?.uid;
-        for(let i = 0; i < grupoEvento?.length; i++ ) {
-          if( grupoEvento[i]?.red === 'Instagram' ) {
+        const idUsuario = _usuarios[u]?.uid;
+        for (let i = 0; i < grupoEvento?.length; i++) {
+          if (grupoEvento[i]?.red === 'Instagram') {
 
             let val = null;
-            if( usuarios[u]?.instagram !== "" ) {
+            if (_usuarios[u]?.instagram !== "") {
               val = grupoEvento[i]?.resultado[idUsuario]?.length > 0 ? 1 : 0
             } else {
               val = "na"
@@ -173,10 +209,10 @@ const ResultadoGrupoEvento = () => {
               instagram: val,
             }
           }
-          else if ( grupoEvento[i]?.red === 'Facebook' ) {
+          else if (grupoEvento[i]?.red === 'Facebook') {
 
             let val = null;
-            if( usuarios[u]?.facebook !== "" ) {
+            if (_usuarios[u]?.facebook !== "") {
               val = grupoEvento[i]?.resultado[idUsuario]?.length > 0 ? 1 : 0
             } else {
               val = "na"
@@ -187,10 +223,10 @@ const ResultadoGrupoEvento = () => {
               facebook: val,
             }
           }
-          else if( grupoEvento[i]?.red === 'Twitter' ) {
+          else if (grupoEvento[i]?.red === 'Twitter') {
 
             let val = null;
-            if( usuarios[u]?.twitter !== "" ) {
+            if (_usuarios[u]?.twitter !== "") {
               val = grupoEvento[i]?.resultado[idUsuario]?.length > 0 ? 1 : 0
             } else {
               val = "na"
@@ -200,18 +236,18 @@ const ResultadoGrupoEvento = () => {
               ...item,
               twitter: val,
             }
-          } 
+          }
         }
-        datos.push( item )
+        datos.push(item)
       }
 
-    
+
       await exportarExcelJS(
-        columns, 
-        datos, 
-        'reporte grupo de evento', 
-        evento?.nombre, 
-        `Descripción: ${evento?.descripcion} - Grupo: ${evento?.tag}`, 
+        columns,
+        datos,
+        'reporte grupo de evento',
+        model?.nombre,
+        `Descripción: ${model?.descripcion} - Grupo: ${model?.tag}`,
         '/LAUD-Logotipo.png',
         ""
       )
@@ -222,7 +258,7 @@ const ResultadoGrupoEvento = () => {
 
   const onSearch = (searchValue) => {
     setSearchInput(searchValue);
-    if( searchValue !== '' ) {
+    if (searchValue !== '') {
       const filteredData = usuarios?.filter((item) => {
         return Object.values(item).join('').toLowerCase().includes(searchValue.toLowerCase());
       })
@@ -232,99 +268,126 @@ const ResultadoGrupoEvento = () => {
     }
   };
 
-  // Obtener detalles del evento.
   useEffect(() => {
+    setRequest(requestParams);
+
+    return () => {
+      setRequest(emptyRequest);
+    }
+  }, [requestParams]);
+
+  useEffect(() => {
+    setRequestEventos(requestEventosParams);
+
+    return () => {
+      setRequestEventos(emptyRequest);
+    }
+  }, [requestEventosParams]);
+
+  // Obtener detalles del evento.
+  /* useEffect(() => {
     let mounted = true;
-    if(mounted) {
+    if (mounted) {
       try {
         setTimeout(async () => {
           const docRef = doc(firestore, "eventos", id);
           const docSnap = await getDoc(docRef);
           setEvento(docSnap.data());
-          
-          const _usuarios = docSnap.data()?.usuarios?.map( (u, i) => ({
+
+          const _usuarios = docSnap.data()?.usuarios?.map((u, i) => ({
             ...u,
             index: i + 1
           }))
 
           setUsuarios(_usuarios)
 
-        },0);
+        }, 0);
       } catch (error) {
         console.log('error al obtener eventos: ', error);
       }
     }
     return () => mounted = false;
-  }, [id]);
+  }, [id]); */
+
+  useEffect(() => {
+    if (model) {
+      if (model?.grupos) {
+        const usrs = [];
+        model.grupos.forEach((g) => {
+          if (g?.usuarios && g.usuarios?.length > 0) {
+            g.usuarios.forEach((u) => {
+              if (!usrs.includes(u)) {
+                usrs.push(u);
+              }
+            })
+          }
+        })
+
+        setUsuarios(usrs);
+      }
+    }
+  }, [model])
 
   // Obtener grupo de eventos(por tag).
   useEffect(() => {
-    let mounted = true;
-    if(mounted) {
+    if (eventos) {
       try {
-        setTimeout(async () => {
-          const docsRef = collection(firestore, "eventos");
-          const q = firebaseQuery(docsRef, where("tag", "==", tag));
-          const querySnapshot = await getDocs(q);
-          const docs = [];
-          querySnapshot.forEach((doc) => {
-            const _doc = doc.data();
-            if( _doc.redSocial === 'Twitter' ) {
-              docs.push({
-                'red': _doc.redSocial,
-                resultado: _doc?.resultado,
-                urlEvento: _doc?.url,
-                idEvento: doc.id ,
-              });
-            }
-            else if( _doc.redSocial === 'Facebook' ) {
-              docs.push({
-                'red': _doc.redSocial,
-                resultado: _doc?.resultado,
-                urlEvento: _doc?.url,
-                idEvento: doc.id ,
-              });
-            }
-            else if( _doc.redSocial === 'Instagram' ) {
-              docs.push({
-                'red': _doc.redSocial,
-                resultado: _doc?.resultado,
-                urlEvento: _doc?.url,
-                idEvento: doc.id ,
-              });
-            }
-          });
-
+        // const docsRef = collection(firestore, "eventos");
+        // const q = firebaseQuery(docsRef, where("tag", "==", tag));
+        // const querySnapshot = await getDocs(q);
+        const docs = [];
+        eventos.forEach((doc) => {
+          if (doc.redSocial === 'Twitter') {
+            docs.push({
+              'red': doc.redSocial,
+              resultado: doc?.resultados,
+              urlEvento: doc?.url,
+              idEvento: doc.id,
+            });
+          }
+          else if (doc.redSocial === 'Facebook') {
+            docs.push({
+              'red': doc.redSocial,
+              resultado: doc?.resultados,
+              urlEvento: doc?.url,
+              idEvento: doc.id,
+            });
+          }
+          else if (doc.redSocial === 'Instagram') {
+            docs.push({
+              'red': doc.redSocial,
+              resultado: doc?.resultados,
+              urlEvento: doc?.url,
+              idEvento: doc.id,
+            });
+          }
+        });
 
-    
-          setGrupoEvento( docs );
-        }, 0);
+        setGrupoEvento(docs);
       } catch (error) {
         console.log('error al obtener grupo de eventos: ', error)
       }
     }
+  }, [eventos]);
 
-    return () => mounted = false;
-  }, [tag]);
-
-  if(!evento) return <ViewLoading />;
+  if (!model) return <ViewLoading />;
 
   return (
     <SimpleTableLayout
       multipleButtonData={multipleButtonData}
       onSearchClicked={onSearch}
     >
-      <>        
+      <>
         <Divider />
         <Row gutter={[10, 10]}>
           <Col span={20}>
-            <h2>{evento?.nombre}</h2>
+            <h2>{model?.nombre}</h2>
           </Col>
           <Col span={4} style={{ textAlign: 'right' }}>
-            <img src={ evento ? '/assets/'+evento?.redSocial+'.png' : '' } width='50' alt="Red social" />
+            <img src={model ? '/assets/' + model?.redSocial + '.png' : ''} width='50' alt="Red social" />
           </Col>
         </Row>
-        
+
         <Divider />
 
         <Row gutter={[10, 10]}>
@@ -334,7 +397,7 @@ const ResultadoGrupoEvento = () => {
               size="small"
               pagination={false}
               columns={columns}
-              dataSource={ searchInput?.length > 1 ? filteredResults : usuarios?.sort((a, b) => a?.nombre > b?.nombre ? 1 : -1) }
+              dataSource={searchInput?.length > 1 ? filteredResults : usuarios?.sort((a, b) => a?.nombre > b?.nombre ? 1 : -1)}
             />
           </Col>
         </Row>