Proyectos de Subversion LeadersLinked - Backend

import React, { useState } from "react";
import parse from "html-react-parser";
import styled from "styled-components";
import LikeButton from "../like-button/LikeButton";
import { addNotification } from "../../../../redux/notification/notification.actions";
import { useDispatch } from "react-redux";

const StyledChatImgMessage = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  position: initial !important;
  transform: initial !important;
  .chat_image_container {
    video {
      width: 100%;
      outline: none;
    }
    img {
      width: 150px;
      max-height: 200px;
    }
    .pdf {
      width: 40px;
    }
  }
  .chat_image__download_button {
    margin-left: 0.5rem;
    .fa {
      font-size: 1.5rem;
      color: black;
    }
  }
`;

const ResponseMessageContainer = styled.div`
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 10px;
  align-items: ${props => props.isRight ? 'flex-end' : 'flex-start'};
`

const MessageTemplate = ({ message, setResponseMessage, responseMessage }) => {

  const [isShow, setIsShow] = useState(false);
  const [isLiked, setIsLiked] = useState(false);
  const dispatch = useDispatch()

  const senderName = (message) => {
    if (message.type === "group") {
      return message.u === 1 ? "" : message.user_name;
    }
  };

  const handleLike = () => {
    setIsLiked(!isLiked)
    setIsShow(!isShow)
  }

  const handleCopy = async () => {
    await navigator.clipboard.writeText(`${message.m}`)
    dispatch(addNotification({
      style: "success",
      msg: 'Mensaje copiado en el portapapeles',
    }))
    setIsShow(!isShow)
  }

  switch (message.mtype) {
    case "text":
      return (
        <li
          key={message.id}
          className={`clearfix ${message.u === 1 ? "odd" : ""} m-t-10 conversers${message.u}`}
        >
          <div className="conversation-text">
            <div className="conversation_container">
              {
                responseMessage
                &&
                <ResponseMessageContainer isRight={message.u === 1}>
                  <span>{`Respondiendo a ${responseMessage.user_name}`}</span>
                  <div className="ctext-wrap">
                    {senderName(responseMessage)}
                    <p className="">
                      {parse(emojione.shortnameToImage(responseMessage.m))}
                      <br />
                    </p>
                  </div>
                </ResponseMessageContainer>
              }
              <div className="conversation-text">
                <div className="ctext-wrap">
                  {senderName(message)}
                  <p className="">
                    {parse(emojione.shortnameToImage(message.m))}
                    <br />
                    <i className="text-right">{message.time}</i>
                  </p>
                  {
                    isLiked
                    &&
                    <i
                      className="fas fa-heart"
                      style={{
                        color: '#0961bf',
                        position: 'absolute',
                        top: '87%',
                        left: '85%'
                      }}
                    />
                  }
                </div>
                <i
                  className="la la-ellipsis-v icon"
                  style={{ position: 'relative' }}
                  onClick={() => setIsShow(!isShow)}
                >
                </i>
                {
                  isShow
                  &&
                  <div
                    className="display-reactions"
                  >
                    <LikeButton
                      onClick={handleLike}
                    />
                    <button
                      type="button"
                      onClick={() => setResponseMessage(message)}
                    >
                      <i className="fa fa-reply"></i>
                    </button>
                    <button
                      type="button"
                      onClick={() => handleCopy(message)}
                    >
                      <i className="fa fa-copy"></i>
                    </button>
                  </div>
                }
              </div>
            </div>
          </div>
        </li>
      );
    case "image":
      return (
        <li
          key={message.id}
          className={`clearfix ${message.u === 1 ? "odd" : ""
            } m-t-10 conversers${message.u}`}
        >
          <div
            className="conversation-text"
            data-toggle="tooltip"
            data-placement="left"
            data-html="true"
          >
            <div className="ctext-wrap">
              {senderName(message)}
              <StyledChatImgMessage>
                <div className="chat_image_container">
                  <img src={message.m} alt="chat_image" />
                </div>
                {message.u === 1 ? (
                  ""
                ) : (
                  <a
                    href={message.m}
                    target="_blank"
                    className="chat_image__download_button"
                  >
                    <i className="fa ti-arrow-circle-down"></i>
                  </a>
                )}
              </StyledChatImgMessage>
              <br />
              <i className="text-right">{message.time}</i>
            </div>
          </div>
        </li>
      );
    case "video":
      return (
        <li
          key={message.id}
          className={`clearfix ${message.u === 1 ? "odd" : ""
            } m-t-10 conversers${message.u}`}
        >
          <div
            className="conversation-text"
            data-toggle="tooltip"
            data-placement="left"
            data-html="true"
          >
            <div className="ctext-wrap">
              {senderName(message)}
              <StyledChatImgMessage>
                <div className="chat_image_container">
                  <video src={message.m} preload="none" controls></video>
                </div>
                {message.u === 1 ? (
                  ""
                ) : (
                  <a
                    href={message.m}
                    target="_blank"
                    className="chat_image__download_button"
                  >
                    <i className="fa ti-arrow-circle-down"></i>
                  </a>
                )}
              </StyledChatImgMessage>
              <br />
              <i className="text-right">{message.time}</i>
            </div>
          </div>
        </li>
      );
    case "document":
      return (
        <li
          key={message.id}
          className={`clearfix ${message.u === 1 ? "odd" : ""
            } m-t-10 conversers${message.u}`}
        >
          <div
            className="conversation-text"
            data-toggle="tooltip"
            data-placement="left"
            data-html="true"
          >
            <div className="ctext-wrap">
              {senderName(message)}
              <StyledChatImgMessage>
                <div className="chat_image_container">
                  <img
                    className="pdf"
                    src="/storage/type/default/filename/pdf.png"
                    alt="pdf"
                  />
                </div>
                {message.u === 1 ? (
                  ""
                ) : (
                  <a
                    href={message.m}
                    target="_blank"
                    className="chat_image__download_button"
                  >
                    <i className="fa ti-arrow-circle-down"></i>
                  </a>
                )}
              </StyledChatImgMessage>
              <br />
              <i className="text-right">{message.time}</i>
            </div>
          </div>
        </li>
      );
    default:
      return (
        <li
          key={message.id}
          className={`clearfix ${message.u === 1 ? "odd" : ""
            } m-t-10 conversers${message.u}`}
        >
          <div
            className="conversation-text"
            data-toggle="tooltip"
            data-placement="left"
            data-html="true"
          >
            <div className="ctext-wrap">
              {senderName(message)}
              <p className="">
                {message.mtype}
                <br />
                <i className="text-right">{message.time}</i>
              </p>
            </div>
          </div>
        </li>
      );
  }
};

export default MessageTemplate;