contentoh-components-library 21.2.57 → 21.2.59

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

@@ -0,0 +1,545 @@
+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 = ({
+  chat_authorization,
+  chat_id_article,
+  chat_version_article,
+}) => {
+  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 = chat_authorization;
+  const prop_id_article = chat_id_article;
+  const prop_version_article = 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>
+      )}
+    </>
+  );
+};