.env.development.local

@@ -6,7 +6,7 @@ REACT_APP_WEB_URL=https://laud-lv.web.app/
 # REACT_APP_WEB_URL=https://yager.api.fourier.audio/
 REACT_APP_CLOUD_FUNC=https://us-central1-yagermx.cloudfunctions.net
 # REACT_APP_CLOUD_FUNC=https://yager.api.fourier.audio/
-REACT_APP_VERSION=1.23.08.29+2
+REACT_APP_VERSION=1.26.4.7+4
 
 # Firebase
 REACT_APP_FB_API_KEY=AIzaSyDvEPt-9DlurFd25mxqIaYHwpPrSYNz12g

.env.production.local

@@ -5,7 +5,7 @@ REACT_APP_WEB_URL=https://laud-lv.web.app/
 # REACT_APP_WEB_URL=https://yager.api.fourier.audio/
 REACT_APP_CLOUD_FUNC=https://us-central1-yagermx.cloudfunctions.net
 # REACT_APP_CLOUD_FUNC=https://yager.api.fourier.audio/
-REACT_APP_VERSION=1.23.08.29+2
+REACT_APP_VERSION=1.26.4.7+4
 
 # Firebase
 REACT_APP_FB_API_KEY=AIzaSyDvEPt-9DlurFd25mxqIaYHwpPrSYNz12g

firebase.json

@@ -1,8 +1,8 @@
 {
   "hosting": {
     "public": "build",
-    "site": "laud-lv",
-    "siteYager": "laud-lv",
+    "site": "laud-lv-test",
+    "siteYager": "laud-lv-test",
     "siteLaud": "laud-lv",
     "ignore": [
       "firebase.json",

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/services/httpService.js

@@ -61,7 +61,7 @@ const HttpService = {
     };
   },
   get: async (url, auth = true) => {
-    debugger;
+    // debugger;
     let token = null;
     if (auth) token = await getCurrentToken();
     const response = await fetch(apiUrl + url, {

src/views/administracion/dependencias/DependenciaDetalle.js

@@ -1,19 +1,21 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { Form, Button, Row, Col, Input, Modal, Table, Typography, Select } from "antd";
 import { SaveOutlined, PlusOutlined, CloseCircleOutlined } from "@ant-design/icons";
-import { useQuery, useModels } from "../../../hooks";
+import { useQuery, useModels, useModel } from "../../../hooks";
 import { useHistory } from "react-router-dom";
-import { firestore } from "../../../services/firebase";
+// import { firestore } from "../../../services/firebase";
 import { ViewLoading } from "../../../components";
 import { DefaultLayout } from "../../../components/layouts";
-import { addDoc, collection, doc, getDoc, updateDoc } from "firebase/firestore";
+// import { addDoc, collection, doc, getDoc, updateDoc } from "firebase/firestore";
 import HttpService from "../../../services/httpService";
+import { emptyRequest } from "../../../constants/requests";
+import { respuestas } from "../../../utilities";
 
 const { Title } = Typography;
 
 const DependenciaDetalle = () => {
 
-  const firebaseCollection = "dependencias";
+  // const firebaseCollection = "dependencias";
   const query = useQuery();
   const history = useHistory();
   const { TextArea } = Input;
@@ -23,8 +25,8 @@ const DependenciaDetalle = () => {
   const url = "/administracion/dependencias";
   const [form] = Form.useForm();
 
-  const [dependencia, setDependencia] = useState([]);
-  const [cargandoDependencia, setCargandoDependencia] = useState(true);
+  // const [dependencia, setDependencia] = useState([]);
+  // const [cargandoDependencia, setCargandoDependencia] = useState(true);
   const [guadandoCargando, setGuardandoCargando] = useState(false);
   const [buscarValue, setBuscarValue] = useState('');
   const [requestUsuarios, setRequestUsuarios] = useState({});
@@ -32,7 +34,15 @@ const DependenciaDetalle = () => {
   const [miembros, setMiembros] = useState([]);
   const [miembrosLoading, setMiembrosLoading] = useState(false);
   const [usuario, setUsuario] = useState(null);
+  const [miembro, setMiembro] = useState(null);
   const [lideres, setLideres] = useState([]);
+  const [request, setRequest] = useState(emptyRequest);
+
+  const requestParams = useMemo(() => ({
+    name: 'v1/dependencia',
+    id: id,
+    expand: 'lideres,usuarios'
+  }), [id]);
 
   const usuarioExtraParams = React.useMemo(() => ({ q: buscarValue }), [buscarValue])
   const usuariosParams = React.useMemo(() => ({
@@ -43,6 +53,11 @@ const DependenciaDetalle = () => {
     extraParams: usuarioExtraParams
   }), [usuarioExtraParams])
 
+  const {
+    model,
+    modelLoading
+  } = useModel(request);
+
   const [
     models,
     modelsLoading, , ,
@@ -51,16 +66,24 @@ const DependenciaDetalle = () => {
   const columnasMiembros = [
     { title: 'Nombre', dataIndex: 'nombre', key: 'nombre', },
     { title: 'Correo', dataIndex: 'email', key: 'email', },
+    {
+      title: '', dataIndex: 'id', key: 'id', render: (text) =>
+        <Button
+          danger
+          icon={<CloseCircleOutlined />}
+          onClick={() => setMiembros(miembros.filter(l => l.id !== text))}
+        />
+    },
   ]
 
   const columnasLideres = [
     { title: 'Nombre', dataIndex: 'nombre', key: 'nombre', },
     {
-      title: '', dataIndex: 'uid', key: 'uid', render: (text) =>
+      title: '', dataIndex: 'id', key: 'id', render: (text) =>
         <Button
           danger
           icon={<CloseCircleOutlined />}
-          onClick={() => setLideres(lideres.filter(l => l.uid !== text))}
+          onClick={() => setLideres(lideres.filter(l => l.id !== text))}
         />
     },
   ]
@@ -74,55 +97,47 @@ const DependenciaDetalle = () => {
     setTimer(newTimer);
   };
 
-  React.useEffect(() => {
-    setRequestUsuarios(usuariosParams);
-    return () => setRequestUsuarios({});
-  }, [usuariosParams]);
-
-  React.useEffect(() => {
-    if (editando && id) {
-      const getMiembros = async () => {
-        setMiembrosLoading(true);
-        const response = await HttpService.get(`v1/usuario?ordenar=nombre-asc&idDependencia=${id}&limite=-1`);
-        if (!response.isError) {
-          setMiembros(response.resultado);
-          setMiembrosLoading(false);
-        }
-      }
-      getMiembros();
-    }
-  }, [editando, id]);
-
   const onFinish = async (values) => {
     try {
       setGuardandoCargando(true);
 
       let body = {
         ...values,
-        timestamp: editando ? dependencia?.timestamp : new Date(),
-        estatus: editando ? dependencia?.estatus : true,
+        // timestamp: editando ? dependencia?.timestamp : new Date(),
+        // estatus: editando ? dependencia?.estatus : true,
         sincronizado: null,
-        usuarios: lideres.map(l => ({
-          uid: l.uid,
+        lideres: lideres.map(l => ({
+          id: l.id,
           nombre: l.nombre,
         })),
+        usuarios: miembros.map(l => ({
+          id: l.id,
+          nombre: l.nombre,
+        }))
       };
-      // comentario prueba
 
-      // Agregamos o editamos el documento grupo
       if (editando) {
-        await updateDoc(doc(firestore, firebaseCollection, id), body);
-      } else {
-        await addDoc(collection(firestore, firebaseCollection), body);
+        body.id = model?.id;
       }
 
-      Modal.success({
-        title: "Éxito",
-        content: "Dependencia guardado correctamente",
-      });
+      const res = await HttpService.post('v1/dependencia', body);
+      respuestas(res);
+      if (res?.status === 200) {
+        Modal.success({
+          title: "Éxito",
+          content: "Dependencia guardada correctamente",
+        });
 
-      history.push(url);
+        history.push(url);
+      }
+      // comentario prueba
 
+      // Agregamos o editamos el documento grupo
+      /* if (editando) {
+        await updateDoc(doc(firestore, firebaseCollection, id), body);
+      } else {
+        await addDoc(collection(firestore, firebaseCollection), body);
+      } */
     } catch (error) {
       Modal.warning({
         title: "Atención",
@@ -143,6 +158,30 @@ const DependenciaDetalle = () => {
   };
 
   useEffect(() => {
+    setRequest(requestParams);
+    return () => setRequest({});
+  }, [requestParams]);
+
+  useEffect(() => {
+    setRequestUsuarios(usuariosParams);
+    return () => setRequestUsuarios({});
+  }, [usuariosParams]);
+
+  /* useEffect(() => {
+    if (editando && id) {
+      const getMiembros = async () => {
+        setMiembrosLoading(true);
+        const response = await HttpService.get(`v1/usuario?ordenar=nombre-asc&idDependencia=${id}&limite=-1`);
+        if (!response.isError) {
+          setMiembros(response.resultado);
+          setMiembrosLoading(false);
+        }
+      }
+      getMiembros();
+    }
+  }, [editando, id]); */
+
+  /* useEffect(() => {
     let mounted = true;
     if (mounted && editando) {
       try {
@@ -164,19 +203,25 @@ const DependenciaDetalle = () => {
       }
     }
     return () => (mounted = false);
-  }, [editando, id]);
+  }, [editando, id]); */
 
   useEffect(() => {
-    let mounted = true;
-    if (mounted && editando) {
+    if (model && editando) {
       form.setFieldsValue({
-        ...dependencia,
+        ...model,
       });
+
+      if (model?.lideres) {
+        setLideres(model?.lideres);
+      }
+
+      if (model?.usuarios) {
+        setMiembros(model?.usuarios);
+      }
     }
-    return () => (mounted = false);
-  }, [dependencia, editando, form]);
+  }, [editando, form, model]);
 
-  if (cargandoDependencia && editando) return <ViewLoading />;
+  if (modelLoading && editando) return <ViewLoading />;
 
   return (
     <DefaultLayout title={titulo} multipleButtonData={[]}>
@@ -223,6 +268,61 @@ const DependenciaDetalle = () => {
         <Row gutter={10}>
           <Col className="gutter-row" span={12}>
             <Title level={4}>Miembros</Title>
+            <Row>
+              <Col span={22}>
+                <Form.Item
+                  label="Usuarios"
+                  rules={[{
+                    required: true,
+                    message: 'Selecciona un usuario!',
+                  }]}
+                  hasFeedback
+                >
+                  <Select
+                    showSearch
+                    onSearch={onSearchUsuarios}
+                    allowClear
+                    placeholder="Elige a un usuario"
+                    optionFilterProp="children"
+                    filterOption={(input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase())}
+                    loading={modelsLoading}
+                    onChange={(_, item) => {
+                      setMiembro(item);
+                      console.log("item", item);
+                    }}
+                    options={models?.length > 0 && models?.map(i => ({
+                      ...i,
+                      value: i.id,
+                      label: i.nombre
+                    }))}
+                    value={miembro}
+                  />
+                </Form.Item>
+              </Col>
+              <Col span={2}>
+                <Form.Item label="&nbsp;">
+                  <Button
+                    type="default"
+                    icon={<PlusOutlined />}
+                    shape="circle"
+                    size="middle"
+                    style={{
+                      // marginTop: 70,
+                      marginLeft: 10
+                    }}
+                    onClick={() => {
+                      if (miembro) {
+                        //agregar sólo si no existe en el array, con esto evitamos duplicados
+                        if (!miembros.find(i => i.id === miembro.id)) {
+                          setMiembros([...miembros, miembro]);
+                          setMiembro(null);
+                        }
+                      }
+                    }}
+                  />
+                </Form.Item>
+              </Col>
+            </Row>
             <Table
               columns={columnasMiembros}
               dataSource={miembros}
@@ -267,7 +367,7 @@ const DependenciaDetalle = () => {
                     }}
                     options={models?.length > 0 && models?.map(i => ({
                       ...i,
-                      value: i.uid,
+                      value: i.id,
                       label: i.nombre
                     }))}
                     value={usuario}
@@ -287,7 +387,7 @@ const DependenciaDetalle = () => {
                   onClick={() => {
                     if (usuario) {
                       //agregar sólo si no existe en el array, con esto evitamos duplicados
-                      if (!lideres.find(i => i.uid === usuario.uid)) {
+                      if (!lideres.find(i => i.id === usuario.id)) {
                         setLideres([...lideres, usuario]);
                         setUsuario(null);
                       }
@@ -300,7 +400,7 @@ const DependenciaDetalle = () => {
               columns={columnasLideres}
               dataSource={lideres}
               size="small"
-              rowKey="uid"
+              rowKey="id"
               pagination={
                 lideres.length > 10
                   ? {

src/views/administracion/dependencias/DependenciasListado.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { Modal, Divider } from 'antd';
 import { useHistory } from 'react-router-dom';
 import { EditOutlined, DeleteOutlined, PlusCircleOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
@@ -7,6 +7,7 @@ import { ActionsButton } from '../../../components';
 import { SimpleTableLayout } from '../../../components/layouts';
 import Tabla from '../../../components/Tabla';
 import HttpService from '../../../services/httpService';
+import { respuestas } from '../../../utilities';
 
 const DependenciasListado = () => {
 
@@ -15,6 +16,8 @@ const DependenciasListado = () => {
   const history = useHistory();
   const { confirm } = Modal;
 
+  const tablaRef = useRef(null);
+
   const [searchInput, setSearchInput] = useState('');
 
   const defaultText = prop => prop || <span style={{ color: '#c7c3c3' }}>---</span>;
@@ -75,12 +78,16 @@ const DependenciasListado = () => {
       content: '¿Seguro que desea eliminar este registro?',
       onOk: async () => {
         try {
-          await HttpService.post('v1/dependencia/delete', { id: item.id });
+          const res = await HttpService.post('v1/dependencia/eliminar', { id: item.id });
+          respuestas(res);
+          if (res?.status === 200) {
+            tablaRef.current.refresh();
+          }
         } catch (error) {
           console.log('error al eliminar: ', error);
         }
       },
-      onCancel() {},
+      onCancel() { },
     });
   };
 
@@ -100,6 +107,7 @@ const DependenciasListado = () => {
         columns={columns}
         extraParams={{ q: searchInput }}
         scroll={{ x: "30vw" }}
+        innerRef={tablaRef}
       />
     </SimpleTableLayout>
   );

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({
@@ -423,6 +457,8 @@ const EventosListado = () => {
     });
   };
 
+  // Comentario para testear el git de daniel
+
 
   // TODO eliminar elemto del array y quitar window location
   const eliminarRegistro = async (item, docs) => {

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>

src/views/administracion/grupos/GruposDetalle.js

@@ -1,16 +1,19 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { Form, Button, Row, Col, Input, Modal, Table, message } from "antd";
 import { SaveOutlined, UserOutlined, WhatsAppOutlined, ArrowLeftOutlined, AlertOutlined } from "@ant-design/icons";
 import moment from "moment";
-import { useQuery } from "../../../hooks";
+import { useModel, useModels, useQuery } from "../../../hooks";
 import { useHistory } from "react-router-dom";
 import { firestore } from "../../../services/firebase";
 import { ViewLoading } from "../../../components";
 import { DefaultLayout } from "../../../components/layouts";
 import { addDoc, collection, doc, getDoc, getDocs, updateDoc, where, query as firebaseQuery } from "firebase/firestore";
+import { emptyRequest } from "../../../constants/requests";
+import HttpService from "../../../services/httpService";
+import { respuestas } from "../../../utilities";
 
 const GruposDetalle = () => {
-  
+
   const query = useQuery();
   const history = useHistory();
   const { TextArea } = Input;
@@ -21,17 +24,43 @@ const GruposDetalle = () => {
   const [form] = Form.useForm();
 
   const [grupo, setGrupo] = useState([]);
-  const [cargandoGrupo, setCargandoGrupo] = useState(true);
+  // const [cargandoGrupo, setCargandoGrupo] = useState(true);
   const [guadandoCargando, setGuardandoCargando] = useState(false);
-  const [cargandoUsuarios, setCargandoUsuarios] = useState(false);
-  const [usuarios, setUsuarios] = useState(null);
+  // const [cargandoUsuarios, setCargandoUsuarios] = useState(false);
+  // const [usuarios, setUsuarios] = useState(null);
   const [visible, setVisible] = useState(false);
   const [idsUsuariosGrupo, setIdsUsuariosGrupo] = useState([]);
   const [usuariosEnGrupo, setUsuariosEnGrupo] = useState([]);
   const [cargandoAviso, setCargandoAviso] = useState(false);
+  const [request, setRequest] = useState(emptyRequest);
+  const [requestUsuarios, setRequestUsuarios] = useState(emptyRequest);
 
   const defaultText = (prop) => prop || <span style={{ color: "#c7c3c3" }}>---</span>;
 
+  const requestParams = useMemo(() => ({
+    name: 'v1/grupo',
+    id: id,
+    expand: 'usuarios'
+  }), [id]);
+
+  const usuariosParams = useMemo(() => ({
+    name: 'v1/usuario',
+    limite: -1
+  }), []);
+
+  const {
+    model,
+    modelLoading
+  } = useModel(request);
+
+  const [
+    usuarios, usuariosLoading,
+    ,
+    ,
+    ,
+    ,
+  ] = useModels(requestUsuarios);
+
   const multipleButtonData = [
     {
       text: "Volver",
@@ -59,18 +88,18 @@ const GruposDetalle = () => {
       dataIndex: "verificado",
       key: "verificado",
       render: (_, item) =>
-        item.verificado === "" ? (
+        !item?.verificado || item?.verificado === "" ? (
           <span style={{ color: "#c7c3c3" }}>---</span>
         ) : (
-          moment(item?.verificado?.toDate()).format("DD-MM-YYYY")
+          moment(item?.verificado).format("DD-MM-YYYY")
         ),
     },
     {
       title: "Registro",
-      dataIndex: "timestamp",
-      key: "timestamp",
+      dataIndex: "creado",
+      key: "creado",
       render: (_, item) =>
-        moment(item?.timestamp?.toDate()).format("DD-MM-YYYY"),
+        item?.creado ? moment(item?.creado).format("DD-MM-YYYY") : null,
     },
     {
       title: "Verificado",
@@ -113,14 +142,30 @@ const GruposDetalle = () => {
         ciudad: ciudad || "",
         descripcion: descripcion || "",
         nombre: nombre || "",
-        timestamp: editando ? grupo?.timestamp : new Date(),
-        estatus: editando ? grupo?.estatus : true,
+        usuarios: usuariosEnGrupo
+        // timestamp: editando ? grupo?.timestamp : new Date(),
+        // estatus: editando ? grupo?.estatus : true,
       };
 
-      let docRef = null;
+      if (editando) {
+        body.id = model?.id;
+      }
+
+      const res = await HttpService.post('v1/grupo', body);
+      respuestas(res);
+      if (res?.status === 200) {
+        Modal.success({
+          title: "Éxito",
+          content: "Grupo guardado correctamente",
+        });
+
+        history.push(url);
+      }
+
+      // let docRef = null;
 
       // Agregamos o editamos el documento grupo
-      if (editando) {
+      /* if (editando) {
         await updateDoc(doc(firestore, "grupos", id), body);
       } else {
         docRef = await addDoc(collection(firestore, "grupos"), body);
@@ -165,14 +210,7 @@ const GruposDetalle = () => {
         }
 
         await actualizarUsuario(usuario);
-      }
-
-      Modal.success({
-        title: "Éxito",
-        content: "Grupo guardado correctamente",
-      });
-
-      history.push(url);
+      } */
     } catch (error) {
       Modal.warning({
         title: "Atención",
@@ -213,11 +251,11 @@ const GruposDetalle = () => {
 
         let tieneFb = false;
         let tieneIg = false;
-        let tieneTw = false; 
+        let tieneTw = false;
 
-        if(u?.facebookVerificado) tieneFb = true;
-        if(u?.instagramVerificado) tieneIg = true;
-        if(u?.twitterVerificado) tieneTw = true;
+        if (u?.facebookVerificado) tieneFb = true;
+        if (u?.instagramVerificado) tieneIg = true;
+        if (u?.twitterVerificado) tieneTw = true;
 
         const usuario = {
           uid: u?.uid,
@@ -245,12 +283,12 @@ const GruposDetalle = () => {
 
       let c = 0;
       querySnapshot.forEach((doc) => {
-        if(doc.data().plantilla === plantilla) {
+        if (doc.data().plantilla === plantilla) {
           c++
         }
       });
 
-      if(c > 0) {
+      if (c > 0) {
         message.info("Ya hay un recordatorio de este evento.")
         return
       }
@@ -268,7 +306,11 @@ const GruposDetalle = () => {
 
   // Obtener usuarios
   useEffect(() => {
-    try {
+    setRequestUsuarios(usuariosParams);
+    return () => {
+      setRequestUsuarios(emptyRequest);
+    }
+    /* try {
       setCargandoUsuarios(true);
       setTimeout(async () => {
         const querySnapshot = await getDocs(collection(firestore, "usuarios"));
@@ -284,17 +326,21 @@ const GruposDetalle = () => {
           }
         });
         setUsuariosEnGrupo(_arr);
-        setUsuarios(docs.sort( (a,b) => b?.nombre > a?.nombre ? -1 : 1));
+        setUsuarios(docs.sort((a, b) => b?.nombre > a?.nombre ? -1 : 1));
       }, 0);
     } catch (error) {
       console.log("error al cargar usuarios:", error);
     } finally {
       setCargandoUsuarios(false);
-    }
-  }, [id]);
+    } */
+  }, [usuariosParams]);
 
   useEffect(() => {
-    let mounted = true;
+    setRequest(requestParams);
+    return () => {
+      setRequest(emptyRequest);
+    }
+    /* let mounted = true;
     if (mounted && editando) {
       try {
         setTimeout(async () => {
@@ -308,11 +354,21 @@ const GruposDetalle = () => {
         setCargandoGrupo(false);
       }
     }
-    return () => (mounted = false);
-  }, [editando, id]);
+    return () => (mounted = false); */
+  }, [requestParams]);
 
   useEffect(() => {
-    let mounted = true;
+    if (editando && model) {
+      form.setFieldsValue({
+        ...model
+      });
+
+      if (model?.usuarios) {
+        setUsuariosEnGrupo(model?.usuarios);
+        setIdsUsuariosGrupo(model?.usuarios?.map((u) => u.id));
+      }
+    }
+    /* let mounted = true;
     if (mounted && editando) {
       if (usuariosEnGrupo.length > 0) {
         setIdsUsuariosGrupo(usuariosEnGrupo?.map((item) => item.id));
@@ -322,10 +378,12 @@ const GruposDetalle = () => {
         ...grupo,
       });
     }
-    return () => (mounted = false);
-  }, [editando, form, grupo, usuariosEnGrupo]);
+    return () => (mounted = false); */
+  }, [editando, form, model]);
+
+  if (modelLoading && editando) return <ViewLoading />;
 
-  if (cargandoGrupo && editando) return <ViewLoading />;
+  console.log('usuariosEnGrupo: ', usuariosEnGrupo)
 
   return (
     <DefaultLayout title={titulo} multipleButtonData={multipleButtonData}>
@@ -346,11 +404,11 @@ const GruposDetalle = () => {
             ...rowSelection,
           }}
           rowKey={"id"}
-          loading={cargandoUsuarios}
+          loading={usuariosLoading}
           size="small"
           columns={columns}
           pagination={false}
-          dataSource={ usuarios }
+          dataSource={usuarios}
         />
       </Modal>
 

src/views/administracion/grupos/GruposListado.js

@@ -1,20 +1,23 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Table, Modal } from 'antd';
 import { useHistory } from 'react-router-dom';
-import { 
+import {
   EditOutlined,
-  DeleteOutlined, 
+  DeleteOutlined,
   FileExcelOutlined,
   PlusCircleOutlined,
-  ExclamationCircleOutlined, 
-} 
-from "@ant-design/icons";
+  ExclamationCircleOutlined,
+}
+  from "@ant-design/icons";
 import moment from 'moment';
 import { firestore } from "../../../services/firebase";
 import exportarExcelJS from '../../../services/exportarExcel';
 import { ActionsButton } from '../../../components';
 import { SimpleTableLayout } from '../../../components/layouts'
 import { collection, onSnapshot, doc, updateDoc, getDocs, query, where } from "firebase/firestore";
+import Tabla from '../../../components/Tabla';
+import HttpService from '../../../services/httpService';
+import { respuestas } from '../../../utilities';
 
 const GruposListado = () => {
 
@@ -23,11 +26,13 @@ const GruposListado = () => {
   const history = useHistory();
   const { confirm } = Modal;
 
-  const [ reporteCargando, setReporteCargando ] = useState(false)
-  const [ cargandoGrupos, setCargandoGrupos ] = useState(true);
-  const [ grupos, setGrupos ] = useState([]);
-  const [ filteredResults, setFilteredResults ] = useState([]);
-  const [ searchInput, setSearchInput ] = useState('');
+  const tablaRef = useRef(null);
+
+  const [reporteCargando, setReporteCargando] = useState(false)
+  const [cargandoGrupos, setCargandoGrupos] = useState(true);
+  const [grupos, setGrupos] = useState([]);
+  const [filteredResults, setFilteredResults] = useState([]);
+  const [searchInput, setSearchInput] = useState('');
 
   const defaultText = prop => prop || <span style={{ color: '#c7c3c3' }}>---</span>;
 
@@ -38,12 +43,12 @@ const GruposListado = () => {
       key: "id",
       align: "center",
       width: 100,
-      render: (_, item ) => (
+      render: (_, item) => (
         <ActionsButton
           key={item}
           options={[
             {
-              disabled: reporteCargando, 
+              disabled: reporteCargando,
               name: "Descargar reporte",
               icon: <FileExcelOutlined />,
               onClick: () => obtenerReporte(item)
@@ -51,7 +56,7 @@ const GruposListado = () => {
             {
               name: "Editar",
               icon: <EditOutlined />,
-              onClick: () => history.push(url+'/detalle?id='+item.id)
+              onClick: () => history.push(url + '/detalle?id=' + item.id)
             },
             {
               name: "Eliminar",
@@ -79,17 +84,17 @@ const GruposListado = () => {
     },
     {
       title: "Creado",
-      dataIndex: "timestamp",
-      key: "timestamp",
+      dataIndex: "creado",
+      key: "creado",
       render: (_, item) => (
-        moment(item?.timestamp?.toDate()).format('DD-MM-YYYY')
+        moment(item?.creado).format('DD-MM-YYYY')
       ),
     },
   ];
-  
+
   const multipleButtonData = [{
     text: "Agregar",
-    to: () => history.push(url+'/nuevo'),
+    to: () => history.push(url + '/nuevo'),
     icon: <PlusCircleOutlined />,
     props: { disabled: false, type: 'primary', }
   }];
@@ -100,10 +105,10 @@ const GruposListado = () => {
       setReporteCargando(true);
       const idGrupo = item?.id;
 
-      const q = query( collection(firestore, "usuarios"), where('grupos', 'array-contains-any', [idGrupo]));
+      const q = query(collection(firestore, "usuarios"), where('grupos', 'array-contains-any', [idGrupo]));
       const querySnapshot = await getDocs(q);
       const docs = []
-      
+
       querySnapshot.forEach((doc) => {
         const data = doc.data();
         docs.push({
@@ -127,7 +132,7 @@ const GruposListado = () => {
         { title: 'Verificado', key: 'verificado' },
       ];
 
-      await exportarExcelJS(columnas, docs, 'reporte grupos', "Reporte Yager", 'Grupos', '/LAUD-Logotipo.png',"")
+      await exportarExcelJS(columnas, docs, 'reporte grupos', "Reporte Yager", 'Grupos', '/LAUD-Logotipo.png', "")
 
 
     } catch (error) {
@@ -139,7 +144,7 @@ const GruposListado = () => {
     } finally {
       setReporteCargando(false)
     }
-    
+
   };
 
   const eliminarRegistro = async (item) => {
@@ -149,61 +154,73 @@ const GruposListado = () => {
       content: '¿Seguro que desea eliminar este registro?',
       onOk: async () => {
         try {
-          await updateDoc(doc(firestore, "grupos", item.id), {estatus: false}); 
+          // await updateDoc(doc(firestore, "grupos", item.id), { estatus: false });
+          const res = await HttpService.post('v1/grupo/eliminar', { id: item?.id });
+          respuestas(res);
+          if (res?.status === 200) {
+            tablaRef.current.refresh();
+          }
         } catch (error) {
           console.log('error al eliminar: ', error);
         }
       },
-      onCancel() {},
+      onCancel() { },
     });
   };
 
-  const onSearch = (searchValue) =>  {
+  const onSearch = (searchValue) => {
     setSearchInput(searchValue);
-    if( searchValue !== '' ){
+    if (searchValue !== '') {
       const filteredData = grupos.filter((item) => {
         return Object.values(item).join('').toLowerCase().includes(searchValue.toLowerCase());
       })
       setFilteredResults(filteredData);
-    }else{
+    } else {
       setFilteredResults(grupos)
     }
   };
 
   // Grupos
-  useEffect (() => {  
+  useEffect(() => {
     try {
-      onSnapshot( collection(firestore, "grupos"), (querySnapshot) => {
-         const docs = [];
-         querySnapshot.forEach((doc) => {
-          if( doc.data().estatus ) {
-            docs.push({ ...doc.data(), id:doc.id });
+      onSnapshot(collection(firestore, "grupos"), (querySnapshot) => {
+        const docs = [];
+        querySnapshot.forEach((doc) => {
+          if (doc.data().estatus) {
+            docs.push({ ...doc.data(), id: doc.id });
           }
-         });
-         setGrupos(docs);
-       })
-     } catch (error) {
-       console.log('error al cargar eventos de firebase: ', error);
-     } finally {
-       setCargandoGrupos(false);
-     }
-  }, [] );
+        });
+        setGrupos(docs);
+      })
+    } catch (error) {
+      console.log('error al cargar eventos de firebase: ', error);
+    } finally {
+      setCargandoGrupos(false);
+    }
+  }, []);
 
 
   return (
-    <SimpleTableLayout 
+    <SimpleTableLayout
       title={titulo}
       multipleButtonData={multipleButtonData}
       onSearchClicked={onSearch}
     >
-      <Table
+      <Tabla
+        nameURL={"v1/grupo"}
+        columns={columns}
+        extraParams={{ q: searchInput }}
+        scroll={{ x: "30vw" }}
+        innerRef={tablaRef}
+      />
+      {/* <Table
         dataSource={searchInput.length > 1 ? filteredResults : grupos}
         rowKey="id"
         loading={cargandoGrupos}
         columns={columns}
         size='small'
         scroll={{ x: 700 }}
-      />
+      /> */}
     </SimpleTableLayout>
   )
 }