contentoh-components-library 21.2.73 → 21.2.74

package/src/components/atoms/ChatPopUp/index.js

@@ -1,541 +0,0 @@
-import { Container, Slider } from "./styles";
-import { useEffect, useState } from "react";
-import chatIcon from "../../../assets/images/chatPopup/iconChat.svg";
-import closeChat from "../../../assets/images/chatPopup/close.svg";
-import send from "../../../assets/images/chatPopup/send.svg";
-import iconPlus from "../../../assets/images/chatPopup/iconPlus.svg";
-import upload from "../../../assets/images/chatPopup/upload_file.svg";
-import defaultProfile from "../../../assets/images/chatPopup/defaultProfile.png";
-import defaultImage from "../../../assets/images/chatPopup/defaultImage.png";
-import defaultSpinner from "../../../assets/images/chatPopup/Spinner.gif";
-import doc from "../../../assets/images/chatPopup/doc.svg";
-import xls from "../../../assets/images/chatPopup/xls.svg";
-import documentType from "../../../assets/images/chatPopup/document.svg";
-import svg from "../../../assets/images/chatPopup/svgIcon.svg";
-import moment from "moment";
-import AWS from "aws-sdk";
-import ReactImageFallback from "react-image-fallback";
-import { v4 as uuidv4 } from "uuid";
-import { getBD, createItemBD } from "./utils/handlersChat";
-import { getProfilePicture } from "../../../global-files/data";
-import { CustomTooltip } from "../Tooltip";
-
-const S3_BUCKET = process.env.REACT_APP_IMAGES_BUCKET;
-const REGION = "us-east-1";
-const Buffer = require("buffer/").Buffer;
-
-AWS.config.update({
-  accessKeyId: process.env.REACT_APP_KEY_UPLOAD_TO_S3,
-  secretAccessKey: process.env.REACT_APP_ACCESS_KEY_UPLOAD_TO_S3,
-});
-
-const myBucket = new AWS.S3({
-  params: { Bucket: S3_BUCKET },
-  region: REGION,
-});
-
-export const ChatPopUp = ({ props }) => {
-  const [showMenu, setShowMenu] = useState(false);
-  const [items, setItems] = useState(); // items que vienen de la BD
-  const [customItems, setCustomItems] = useState([]); // JSX acorde al tipo de los items
-  const [current_id_company, setCurrent_id_company] = useState(0);
-  const [valueInput, setValueInput] = useState("");
-  const [processUpdateID, setProcessUpdateID] = useState();
-  const [countUpdate, setCountUpdate] = useState(0);
-  let arrayIMG = { data: { ext: [], nameFile: [] } };
-  const Authorization = props.chat_authorization;
-  const prop_id_article = props.chat_id_article;
-  const prop_version_article = props.chat_version_article;
-
-  useEffect(() => {
-    //setItems([])
-    getInitial();
-  }, []);
-
-  useEffect(() => {
-    if (!items) return;
-    renderItems();
-    //console.log("update en 10s");
-    //const processUpdate = setTimeout( () => {
-    //	setCountUpdate( (prev) => prev+1 )
-    //} , 25000 )
-    //setProcessUpdateID(processUpdate);
-  }, [items]);
-
-  // implementar update cada 30s
-  useEffect(() => {
-    if (countUpdate == 0) return;
-    getUpdate();
-  }, [countUpdate]);
-
-  const renderItems = async () => {
-    let jsxItems = [];
-    let date = undefined;
-    let countDate = 1;
-    for (const item of items) {
-      if (!date) {
-        date = getFullDate(new Date(item.creation_date));
-      } else {
-        let newDate = getFullDate(new Date(item.creation_date));
-        if (newDate != date) {
-          jsxItems.push(
-            <div className="group-date" key={"itemDate-" + countDate++}>
-              <hr />
-              <p>{date}</p>
-              <hr />
-            </div>
-          );
-          date = newDate;
-        }
-      }
-
-      // manejo de los tipos items
-      if (item.user.id_company == current_id_company) {
-        jsxItems.push(
-          <li className="own-message" key={"item-" + item.id}>
-            <CustomTooltip
-              className={"tooltip-userName"}
-              componentTooltip={<label>{item.user.name}</label>}
-            >
-              <div className="profile">
-                <ReactImageFallback
-                  src={getProfilePicture(item.user.id, 24, 24)}
-                  fallbackImage={defaultProfile}
-                  initialImage={defaultSpinner}
-                  alt="profile"
-                />
-              </div>
-            </CustomTooltip>
-
-            {item.value_type == "txt"
-              ? renderTXT(item)
-              : item.value_type == "img"
-              ? renderIMG(item)
-              : renderFILE(item)}
-            <div className="date">
-              <p>{getTime(item.creation_date)}</p>
-            </div>
-          </li>
-        );
-      } else {
-        jsxItems.push(
-          <li className="" key={"item-" + item.id}>
-            <CustomTooltip
-              className={"tooltip-userName"}
-              componentTooltip={<label>{item.user.name}</label>}
-            >
-              <div className="profile">
-                <ReactImageFallback
-                  src={getProfilePicture(item.user.id, 24, 24)}
-                  fallbackImage={defaultProfile}
-                  initialImage={defaultSpinner}
-                  alt="profile"
-                />
-              </div>
-            </CustomTooltip>
-
-            {item.value_type == "txt"
-              ? renderTXT(item)
-              : item.value_type == "img"
-              ? renderIMG(item)
-              : renderFILE(item)}
-            <div className="date">
-              <p>{getTime(item.creation_date)}</p>
-            </div>
-          </li>
-        );
-      }
-    }
-    if (date) {
-      jsxItems.push(
-        <div className="group-date" key={"itemDate-" + countDate++}>
-          <hr />
-          <p>{date}</p>
-          <hr />
-        </div>
-      );
-    }
-    setCustomItems(jsxItems);
-  };
-
-  const getBase64 = async (file) => {
-    return new Promise((resolve) => {
-      const reader = new FileReader();
-      reader.addEventListener("loadend", () => {
-        let base64 = reader.result.replace(/^data:\w+\/\w+.*;base64,/, "");
-        resolve(base64);
-      });
-      reader.readAsDataURL(file);
-    });
-  };
-
-  const createPreview = async (file) => {
-    if (
-      file.type.split("/")[0] === "image" ||
-      file.type.split("/")[0] === "application" ||
-      file.type.split("/")[0] === "text"
-    ) {
-      let base64IMG = await getBase64(file);
-      let ext = file.name.split(".")[file.name.split(".").length - 1];
-      arrayIMG.data.ext.push(ext);
-      arrayIMG.data.nameFile.push(file.name.split(".")[0]);
-      const fileB = Buffer.from(base64IMG, "base64");
-      const params = {
-        ACL: "public-read",
-        Body: fileB,
-        Bucket: S3_BUCKET,
-        Key: `${prop_id_article}/${prop_version_article}/chat/${
-          arrayIMG.data.nameFile[0]
-        }-${uuidv4()}.${arrayIMG.data.ext[0]}`,
-      };
-      await myBucket.putObject(params).promise();
-      if (file.type.split("/")[0] === "image") {
-        if (arrayIMG.data.ext[0] === "svg") {
-          onClickInsertar("file", params.Key);
-        } else onClickInsertar("img", params.Key);
-      } else if (
-        file.type.split("/")[0] === "application" ||
-        file.type.split("/")[0] === "text"
-      ) {
-        onClickInsertar("file", params.Key);
-      }
-    }
-    arrayIMG.data.ext.shift();
-    arrayIMG.data.nameFile.shift();
-  };
-
-  const getTime = (time) => {
-    const fecha = moment(time).format("LT");
-    const fechaHoy = new Date();
-    if (moment(time).format("L") === moment(fechaHoy).format("L")) {
-      return moment(time).format("LT");
-    } else return fecha;
-  };
-
-  const renderTXT = (item) => {
-    return (
-      <div className="body-message">
-        <p>{item.value}</p>
-      </div>
-    );
-  };
-
-  const renderIMG = (item) => {
-    return (
-      <div className="img-file">
-        <a
-          href={`https://content-management-images.s3.amazonaws.com/${item.value}`}
-        >
-          <ReactImageFallback
-            src={`https://content-management-images.s3.amazonaws.com/${item.value}`}
-            fallbackImage={defaultImage}
-            initialImage={defaultSpinner}
-            alt={item.value}
-          />
-        </a>
-      </div>
-    );
-  };
-
-  const renderFILE = (item) => {
-    let ext = item.value.split(".")[item.value.split(".").length - 1];
-    let imgFile;
-    if (ext === "docx" || ext === "doc" || ext === "docs") {
-      imgFile = doc;
-    } else if (
-      ext === "xls" ||
-      ext === "xlsx" ||
-      ext === "csv" ||
-      ext === "tsv"
-    ) {
-      imgFile = xls;
-    } else if (ext === "svg") {
-      imgFile = svg;
-    } else if (ext === "pdf") {
-      imgFile = "https://eu-phoenix.eu/wp-content/uploads/2022/03/pdf-icon.svg";
-    } else imgFile = documentType;
-
-    return (
-      <div className="body-message">
-        <a
-          href={`https://content-management-images.s3.amazonaws.com/${item.value}`}
-        >
-          <div>
-            <img src={imgFile} alt={item.value}></img>
-            <p>{item.value.split("/")[3]}</p>
-          </div>
-        </a>
-      </div>
-    );
-  };
-
-  const getInitial = async () => {
-    let response = await getBD(
-      prop_id_article,
-      prop_version_article,
-      "initial",
-      "",
-      Authorization
-    );
-    if (!response.body) {
-      // console.log("=====================");
-      // console.log("ERROR INITIAL");
-      // console.log("=====================");
-      // console.log(response);
-      console.log(
-        "Unable to retrieve company and user from database, please report this to TI"
-      );
-      setItems([]);
-    } else {
-      // console.log("=====================");
-      // console.log("ITEMS INICIALES");
-      // console.log("=====================");
-      // console.log(response.body.items);
-      setCurrent_id_company(response.body.current_id_company);
-      setItems(response.body.items);
-    }
-  };
-
-  const getUpdate = async () => {
-    let currentItems = items.slice();
-    let dateItem = currentItems[0]?.creation_date ?? "";
-    let response = {};
-    if (dateItem == "") {
-      await getInitial();
-      return;
-    } else {
-      response = await getBD(
-        prop_id_article,
-        prop_version_article,
-        "update_latest",
-        dateItem,
-        Authorization
-      );
-    }
-    if (!response.body) {
-      // console.log("=====================");
-      // console.log("ERROR UPDATE LATEST");
-      // console.log("=====================");
-      console.log(
-        "Unable to retrieve company and user from database, please report this to TI"
-      );
-      setItems(currentItems);
-    } else {
-      // console.log("=====================");
-      // console.log("ITEMS DEL UPDATE LATEST");
-      // console.log("=====================");
-      // console.log(response.body.items);
-      let newItems = response.body.items;
-      newItems = newItems.concat(currentItems);
-      setItems(newItems);
-    }
-    // setCountUpdate((prev) => prev + 1);
-  };
-
-  const getFullDate = (date = new Date()) => {
-    let dateString = "";
-    switch (date.getDay()) {
-      case 0:
-        dateString += "Dom ";
-        break;
-      case 1:
-        dateString += "Lun ";
-        break;
-      case 2:
-        dateString += "Mar ";
-        break;
-      case 3:
-        dateString += "Mie ";
-        break;
-      case 4:
-        dateString += "Jue ";
-        break;
-      case 5:
-        dateString += "Vie ";
-        break;
-      case 6:
-        dateString += "Sab ";
-        break;
-      default:
-        dateString += "-- ";
-        break;
-    }
-    dateString += date.getDate() + " ";
-    switch (date.getMonth() + 1) {
-      case 1:
-        dateString += "Ene ";
-        break;
-      case 2:
-        dateString += "Feb ";
-        break;
-      case 3:
-        dateString += "Mar ";
-        break;
-      case 4:
-        dateString += "Abr ";
-        break;
-      case 5:
-        dateString += "May ";
-        break;
-      case 6:
-        dateString += "Jun ";
-        break;
-      case 7:
-        dateString += "Jul ";
-        break;
-      case 8:
-        dateString += "Ago ";
-        break;
-      case 9:
-        dateString += "Sep ";
-        break;
-      case 10:
-        dateString += "Oct ";
-        break;
-      case 11:
-        dateString += "Nov ";
-        break;
-      case 12:
-        dateString += "Dic ";
-        break;
-    }
-    dateString += date.getFullYear();
-    return dateString;
-  };
-
-  const onClickLoadMore = async () => {
-    clearTimeout(processUpdateID);
-    let currentItems = items.slice();
-    let dateItem = currentItems[currentItems.length - 1]?.creation_date ?? "";
-    let response = {};
-    if (dateItem == "") {
-      await getInitial();
-      return;
-    } else {
-      response = await getBD(
-        prop_id_article,
-        prop_version_article,
-        "load_more",
-        dateItem,
-        Authorization
-      );
-    }
-    if (!response.body) {
-      // console.log("=====================");
-      // console.log("ERROR LOAD MORE");
-      // console.log("=====================");
-      console.log(
-        "Unable to retrieve company and user from database, please report this to TI"
-      );
-      setItems(currentItems);
-    } else {
-      // console.log("=====================");
-      // console.log("ITEMS DEL LOAD MORE");
-      // console.log("=====================");
-      // console.log(response.body.items);
-      let newItems = currentItems.concat(response.body.items);
-      setItems(newItems);
-    }
-  };
-  const onClickInsertar = async (valueType, valueInput) => {
-    clearTimeout(processUpdateID);
-    let currentItems = items.slice();
-    let response = await createItemBD(
-      prop_id_article,
-      prop_version_article,
-      valueType,
-      valueInput,
-      Authorization
-    );
-    if (!response.body) {
-      // console.log("=====================");
-      // console.log("ERROR INSERTAR");
-      // console.log("=====================");
-      console.log(
-        "Unable to retrieve company and user from database, please report this to TI"
-      );
-      setItems(currentItems);
-    } else {
-      setValueInput("");
-      if (currentItems?.length == 0) {
-        // console.log("NUEVO ITEM <> NUEVO INITIAL");
-        await getInitial();
-      } else {
-        // console.log("NUEVO ITEM <> NUEVO UPDATE");
-        await getUpdate();
-      }
-    }
-  };
-  return (
-    <>
-      <Container>
-        <img
-          src={chatIcon}
-          alt="chat icon"
-          className="icon-chat"
-          onClick={() => {
-            setShowMenu(!showMenu);
-          }}
-        />
-      </Container>
-      {showMenu && (
-        <Slider id="div-slider" showMenu={showMenu}>
-          <button
-            onClick={() => {
-              setShowMenu(false);
-            }}
-            className="close"
-          >
-            <img src={closeChat} alt="close-chat"></img>
-          </button>
-          <div className="content-chat">
-            <button
-              onClick={async (event) => onClickLoadMore()}
-              className="cargar-mas"
-            >
-              <img src={iconPlus} alt="Cargar más" />
-              cargar más
-            </button>
-            <ul id="myListChat">{customItems}</ul>
-          </div>
-          <div className="input-chat">
-            <input
-              className="send-message"
-              placeholder="Escribe Aquí..."
-              id="id-input-message"
-              onKeyDown={(e) => {
-                switch (e.key) {
-                  case "Enter":
-                    onClickInsertar("txt", valueInput);
-                    break;
-                  default:
-                    break;
-                }
-              }}
-              value={valueInput}
-              onChange={(event) => setValueInput(event.target.value)}
-            />
-            <input
-              type="file"
-              id="file"
-              accept="image/*,text/*,application/*"
-              className="add-picture-input"
-              onChange={(e) => {
-                createPreview(document.getElementById("file").files[0]);
-              }}
-            />
-            <label htmlFor="file" className={"upload"}>
-              <img src={upload} alt="send chat"></img>
-            </label>
-            <button
-              onClick={async () => onClickInsertar("txt", valueInput)}
-              className="send"
-            >
-              <img src={send} alt="send chat"></img>
-            </button>
-          </div>
-        </Slider>
-      )}
-    </>
-  );
-};