Avance guardado urls evento

.env.development.local

@@ -1,7 +1,7 @@
 # Projecto   firebase | jwt
 REACT_APP_PROJECT=jwt
-REACT_APP_API_URL=http://localhost:8080/
-# REACT_APP_API_URL=https://laudlv.api.fourier.audio/
+# REACT_APP_API_URL=http://localhost:8080/
+REACT_APP_API_URL=https://laudlv.api.fourier.audio/
 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

.env.production.local

@@ -1,11 +1,12 @@
 # Projecto   firebase | jwt
-REACT_APP_PROJECT=firebase
+REACT_APP_PROJECT=jwt
 REACT_APP_API_URL=https://laudlv.api.fourier.audio/
-REACT_APP_WEB_URL=https://laud-lv.web.app/
+REACT_APP_WEB_URL=https://laud-lv-test.web.app/
+# 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.26.4.7+4
+REACT_APP_VERSION=1.26.4.15+5
 
 # Firebase
 REACT_APP_FB_API_KEY=AIzaSyDvEPt-9DlurFd25mxqIaYHwpPrSYNz12g

src/views/administracion/eventos/EventoDetalleGrupo.js

@@ -18,14 +18,16 @@ import {
   DeliveredProcedureOutlined,
   BarChartOutlined,
   BellFilled,
+  // PlusCircleOutlined,
+  SaveOutlined,
 } from "@ant-design/icons";
 import { useHistory } from "react-router-dom";
 import {
   addDoc,
   collection,
-  doc,
-  getDoc,
-  updateDoc,
+  // doc,
+  // getDoc,
+  // updateDoc,
   query as firebaseQuery,
   getDocs,
   where,
@@ -75,6 +77,7 @@ const EventoDetalleGrupo = () => {
     felicitacion: false,
     condensado: false,
   });
+  const [editandoRed, setEditandoRed] = useState(null);
 
   const [request, setRequest] = useState(emptyRequest);
 
@@ -89,7 +92,7 @@ const EventoDetalleGrupo = () => {
   }), [requestExtraParams])
 
   const [
-    models, modelsLoading, , , ,
+    models, modelsLoading, , , refreshModels,
   ] = useModels(request);
 
   const acciones = [
@@ -98,6 +101,16 @@ const EventoDetalleGrupo = () => {
     { id: 2, value: "Compartir", label: "Compartir", icon: "🔄" },
   ];
 
+  const redesSociales = [
+    "Facebook",
+    "Twitter",
+    "Instagram",
+    "Whatsapp",
+    "YouTube",
+    "TikTok",
+    "Otro",
+  ];
+
   const buttons = [
     {
       text: "Notificar nuevo evento",
@@ -145,7 +158,7 @@ const EventoDetalleGrupo = () => {
     return decodeURIComponent(escape(window.atob(str)));
   }
 
-  const guardarRegistro = async () => {
+  /* const guardarRegistro = async () => {
     try {
       const json = JSON.parse(textAreaData);
       const accion = b64_to_utf8(json.accion).split(".");
@@ -167,14 +180,15 @@ const EventoDetalleGrupo = () => {
     } catch (error) {
       console.log("error al guardar registro: ", error);
     }
-  };
+  }; */
 
   const procesarUsuarios = async () => {
     try {
       setProcesando(true);
       // let usuarios = evento?.grupos.map((g) => g?.usuarios?.map((u) => u));
       let usuarios = [];
-      evento?.grupos.forEach((g) => {
+      // evento?.grupos.forEach((g) => {
+      models[0]?.grupos.forEach((g) => {
         let _usrs = g?.usuarios;
 
         if (_usrs?.length > 0) {
@@ -235,7 +249,7 @@ const EventoDetalleGrupo = () => {
  */
       let body = {
         // usuarios,
-        id: evento.id,
+        id: models[0].id,
         resultado,
       };
 
@@ -311,7 +325,7 @@ const EventoDetalleGrupo = () => {
   };
 
   const obtenerEnlaceYager = (e) => {
-    const url = REACT_APP_WEB_URL + "evento-laud?id=" + e?.id;
+    const url = `${REACT_APP_WEB_URL}evento-laud?id=${models[0]?.id}&k=${e.key}`;
     navigator.clipboard.writeText(url);
     message.info({
       content: "Se ha copiado el enlace al portapapeles.",
@@ -851,6 +865,63 @@ const EventoDetalleGrupo = () => {
     }
   };
 
+  const leerLink = (evento) => {
+    let link = evento?.target?.value;
+    const facebook =
+      /https?:\/\/(www\.)?facebook\.com\/[a-zA-Z0-9.-]+\/?/ ||
+      /https?:\/\/(www\.)?fb\.com\/[a-zA-Z0-9.-]+\/?/;
+    const x = /https?:\/\/(www\.)?x\.com\/[a-zA-Z0-9.-]+\/?/;
+    const instagram = /https?:\/\/(www\.)?instagram\.com\/[a-zA-Z0-9.-]+\/?/;
+    const whatsapp = /https?:\/\/(www\.)?wa\.me\/[a-zA-Z0-9.-]+\/?/;
+    const youtube = /https?:\/\/(www\.)?youtube\.com\/[a-zA-Z0-9.-]+\/?/g;
+    const ytShort = /https?:\/\/(www\.)?youtu\.be\/[a-zA-Z0-9.-]+\/?/g;
+    const tiktok = /https?:\/\/(?:www\.)?tiktok\.com\/.*?/g;
+
+    if (facebook.test(link)) {
+      form.setFieldsValue({ redSocial: "Facebook" });
+    } else if (x.test(link)) {
+      form.setFieldsValue({ redSocial: "Twitter" });
+    } else if (instagram.test(link)) {
+      form.setFieldsValue({ redSocial: "Instagram" });
+    } else if (whatsapp.test(link)) {
+      form.setFieldsValue({ redSocial: "Whatsapp" });
+    } else if (youtube.test(link) || ytShort.test(link)) {
+      form.setFieldsValue({ redSocial: "YouTube" });
+    } else if (tiktok.test(link)) {
+      form.setFieldsValue({ redSocial: "TikTok" });
+    } else {
+      form.setFieldsValue({ redSocial: "Otro" });
+    }
+  };
+
+  const guardarRedSocial = async () => {
+    try {
+      debugger
+      const { url, redSocial, etiqueta } = form.getFieldsValue(true);
+      let _redes = models[0]?.urls;
+      const editado = _redes.find((r) => r.key === editandoRed.key);
+      const index = _redes.indexOf(editado);
+
+      const edit = {
+        key: editandoRed.key,
+        url,
+        redSocial,
+        etiqueta
+      }
+
+      _redes.splice(index, 1, edit);
+
+      const res = await HttpService.post('v1/evento/editar-redes', { id: models[0]?.id, urls: _redes });
+      respuestas(res);
+      if (res?.status === 200) {
+        setEditandoRed(null);
+        refreshModels();
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  }
+
   useEffect(() => {
     setRequest(requestParams);
     return () => setRequest(emptyRequest);
@@ -942,7 +1013,7 @@ const EventoDetalleGrupo = () => {
             return;
           }
           procesarUsuarios();
-          guardarRegistro();
+          // guardarRegistro();
         }}
         onCancel={() => {
           setVisible(false);
@@ -1152,9 +1223,72 @@ const EventoDetalleGrupo = () => {
             </Col>
           </Row>
 
+          {editandoRed !== null && (
+            <Row gutter={10}>
+              <Col
+                className="gutter-row"
+                xs={{ span: 24 }}
+                sm={{ span: 24 }}
+                md={{ span: 12 }}
+                lg={{ span: 12 }}
+              >
+                <Form.Item label="URL" name="url">
+                  <Input onChange={(v) => leerLink(v)} />
+                </Form.Item>
+              </Col>
+
+              <Col
+                className="gutter-row"
+                xs={{ span: 24 }}
+                sm={{ span: 24 }}
+                md={{ span: 5 }}
+                lg={{ span: 5 }}
+              >
+                <Form.Item label="Red social" name="redSocial">
+                  <Select style={{ width: "100%" }} placeholder="Selecciona">
+                    {redesSociales?.map((item) => (
+                      <Option key={item} value={item}>
+                        {item === "Twitter" ? "X" : item}
+                      </Option>
+                    ))}
+                  </Select>
+                </Form.Item>
+              </Col>
+
+              <Col
+                className="gutter-row"
+                xs={{ span: 24 }}
+                sm={{ span: 24 }}
+                md={{ span: 5 }}
+                lg={{ span: 5 }}
+              >
+                <Form.Item label="Etiqueta" name="etiqueta">
+                  <Input />
+                </Form.Item>
+              </Col>
+
+              <Col
+                className="gutter-row"
+                xs={{ span: 24 }}
+                sm={{ span: 24 }}
+                md={{ span: 2 }}
+                lg={{ span: 2 }}
+              >
+                <Form.Item label="&nbsp;">
+                  <Button
+                    type="primary"
+                    icon={<SaveOutlined />}
+                    block
+                    onClick={guardarRedSocial}
+                  />
+                </Form.Item>
+              </Col>
+            </Row>
+          )}
+
           {/* Redes sociales */}
           <Row gutter={10}>
-            {eventos.map((e, index) => (
+            {models[0]?.urls.map((e, index) => (
               <Col
                 key={`evento-${index}`}
                 xs={{ span: 24 }}
@@ -1179,11 +1313,13 @@ const EventoDetalleGrupo = () => {
                     </Button>,
                     <Button
                       type="text"
-                      onClick={() =>
-                        history.push(
-                          urlweb + "/detalle?id=" + e?.id + "&tag=" + e?.tag,
-                        )
-                      }
+                      onClick={() => {
+                        setEditandoRed(e);
+                        form.setFieldsValue({ ...e });
+                        // history.push(
+                        //   urlweb + "/detalle?id=" + e?.id + "&tag=" + e?.tag,
+                        // )
+                      }}
                       icon={<EditOutlined />}
                     >
                       Editar

src/views/administracion/eventos/EventosDetalle.js

@@ -349,6 +349,7 @@ const EventosDetalle = () => {
         media: referencias,
         // usuarios: usuarios,
         redes: redes,
+        urls: redes,
         // resultado: resultado,
         sincronizado: null,
       };
@@ -401,7 +402,7 @@ const EventosDetalle = () => {
           history.push(`${urlweb}`);
         }
       } else {
-        const res = await HttpService.post('v1/evento/guardar-grupo', body);
+        const res = await HttpService.post('v1/evento/guardar', body);
         respuestas(res);
 
         if (res?.status === 200) {
@@ -464,6 +465,7 @@ const EventosDetalle = () => {
 
     const url = form.getFieldValue("url");
     const red = form.getFieldValue("redSocial");
+    const etiqueta = form.getFieldValue("etiqueta");
 
     if (!url) {
       message.warning({
@@ -496,12 +498,14 @@ const EventosDetalle = () => {
       key: key,
       url: url,
       redSocial: red,
+      etiqueta: etiqueta,
     });
 
     setRedes(datos);
     form.setFieldsValue({
       url: null,
       redSocial: null,
+      etiqueta: null,
     });
   };
 
@@ -914,8 +918,8 @@ const EventosDetalle = () => {
             className="gutter-row"
             xs={{ span: 24 }}
             sm={{ span: 24 }}
-            md={{ span: editando ? 12 : 9 }}
-            lg={{ span: editando ? 12 : 9 }}
+            md={{ span: editando ? 6 : 5 }}
+            lg={{ span: editando ? 6 : 5 }}
           >
             <Form.Item label="Red social" name="redSocial">
               <Select style={{ width: "100%" }} placeholder="Selecciona">
@@ -928,13 +932,25 @@ const EventosDetalle = () => {
             </Form.Item>
           </Col>
 
+          <Col
+            className="gutter-row"
+            xs={{ span: 24 }}
+            sm={{ span: 24 }}
+            md={{ span: editando ? 6 : 5 }}
+            lg={{ span: editando ? 6 : 5 }}
+          >
+            <Form.Item label="Etiqueta" name="etiqueta">
+              <Input />
+            </Form.Item>
+          </Col>
+
           {!editando && (
             <Col
               className="gutter-row"
               xs={{ span: 24 }}
               sm={{ span: 24 }}
-              md={{ span: 3 }}
-              lg={{ span: 3 }}
+              md={{ span: 2 }}
+              lg={{ span: 2 }}
             >
               <Form.Item label="&nbsp;">
                 <Button
@@ -966,8 +982,8 @@ const EventosDetalle = () => {
               className="gutter-row"
               xs={{ span: 24 }}
               sm={{ span: 24 }}
-              md={{ span: 9 }}
-              lg={{ span: 9 }}
+              md={{ span: 5 }}
+              lg={{ span: 5 }}
             >
               <Form.Item label="&nbsp;">
                 <Input readOnly value={item?.redSocial} />
@@ -978,8 +994,20 @@ const EventosDetalle = () => {
               className="gutter-row"
               xs={{ span: 24 }}
               sm={{ span: 24 }}
-              md={{ span: 3 }}
-              lg={{ span: 3 }}
+              md={{ span: 5 }}
+              lg={{ span: 5 }}
+            >
+              <Form.Item label="&nbsp;">
+                <Input readOnly value={item?.etiqueta} />
+              </Form.Item>
+            </Col>
+
+            <Col
+              className="gutter-row"
+              xs={{ span: 24 }}
+              sm={{ span: 24 }}
+              md={{ span: 2 }}
+              lg={{ span: 2 }}
             >
               <Form.Item label="&nbsp;">
                 <Tooltip title="Remover">

src/views/evento-yager/EventoYager.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from "react";
+import React, { useEffect, useState, useCallback, useMemo } from "react";
 import {
   Layout,
   Col,
@@ -13,7 +13,7 @@ import {
 import moment from "moment";
 import { firestore } from "../../services/firebase";
 import { ViewLoading } from "../../components";
-import { useQuery, useAuth } from "../../hooks";
+import { useQuery, useAuth, useModel } from "../../hooks";
 import {
   collection,
   doc,
@@ -23,6 +23,7 @@ import {
   where,
   query as firebaseQuery,
 } from "firebase/firestore";
+import { emptyRequest } from "../../constants/requests";
 
 const EventoYager = () => {
   const { Header, Content } = Layout;
@@ -30,11 +31,23 @@ const EventoYager = () => {
   const query = useQuery();
   const { session } = useAuth();
   const idEvento = query.get("id");
+  const key = query.get("k");
   const [cargando, setCargando] = useState(false);
-  const [evento, setEvento] = useState(null);
+  // const [evento, setEvento] = useState(null);
   const [expirado, setExpirado] = useState(false);
   const [usuarios, setUsuarios] = useState(null);
 
+  const [request, setRequest] = useState(emptyRequest);
+  const [red, setRed] = useState(null);
+
+  const requestParams = useMemo(() => ({
+    name: 'v1/evento',
+    id: idEvento,
+    expand: 'eventoAcciones'
+  }), [idEvento]);
+
+  const { model: evento } = useModel(request);
+
   const styles = {
     gutterRow: {
       paddingBottom: 10,
@@ -49,11 +62,11 @@ const EventoYager = () => {
   };
 
   const abrirEnlace = async () => {
-    registarEvento("click");
+    // registarEvento("click");
     window.open(evento?.url, "_blank", "noopener,noreferrer");
   };
 
-  const registarEvento = useCallback(
+  /* const registarEvento = useCallback(
     async (accion) => {
       if (evento && usuarios && accion !== "") {
         try {
@@ -91,9 +104,26 @@ const EventoYager = () => {
       }
     },
     [evento, idEvento, session?.uid, usuarios]
-  );
+  ); */
+
+  useEffect(() => {
+    setRequest(requestParams);
+    return () => {
+      setRequest(emptyRequest);
+    }
+  }, [requestParams]);
 
   useEffect(() => {
+    if (evento) {
+      const urls = evento?.urls;
+      const _red = urls?.find((u) => u.key === key);
+
+      if (_red) {
+        setRed(_red);
+      }
+    }
+  }, [evento, key]);
+  /* useEffect(() => {
     let mounted = true;
     if (mounted && idEvento) {
       try {
@@ -111,7 +141,7 @@ const EventoYager = () => {
         console.log("error");
       }
     }
-  }, [idEvento]);
+  }, [idEvento]); */
 
   // Validar que las fechas esten dentro del rango.
   useEffect(() => {
@@ -128,12 +158,12 @@ const EventoYager = () => {
   }, [evento]);
 
   // Capturar que vio el evento
-  useEffect(() => {
+  /* useEffect(() => {
     registarEvento("recibio");
-  }, [registarEvento]);
+  }, [registarEvento]); */
 
   // Obtener usuarios del evento
-  useEffect(() => {
+  /* useEffect(() => {
     if (evento) {
       try {
         setTimeout(async () => {
@@ -168,7 +198,7 @@ const EventoYager = () => {
         console.log("error al cargar usuarios: ", error);
       }
     }
-  }, [evento]);
+  }, [evento]); */
 
   if (cargando && !evento) return <ViewLoading />;
 
@@ -198,10 +228,10 @@ const EventoYager = () => {
                       </Col>
                       <Col spam={24} style={styles.gutterRow}>
                         <strong>Acciones: </strong>{" "}
-                        {evento?.accion?.map((item) => (
-                          <Tag color="#f50" key={item}>
+                        {evento?.eventoAcciones?.map((item, index) => (
+                          <Tag color="#f50" key={index}>
                             {" "}
-                            {item}{" "}
+                            {item?.accion}{" "}
                           </Tag>
                         ))}
                       </Col>
@@ -230,7 +260,7 @@ const EventoYager = () => {
                   <Col span={4}>
                     <img
                       src={
-                        evento ? "/assets/" + evento?.redSocial + ".png" : ""
+                        red ? "/assets/" + red?.redSocial + ".png" : ""
                       }
                       width="100%"
                       alt="Red social"