Proyectos de Subversion LeadersLinked - Antes de SPA

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: 1rem;
      color: gray;
    }
  }
`;

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

function propsAreEqual(prevProp, nextProp) {
  return prevProp.time === nextProp.time
}

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

  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 handleResponse = (msg) => {
    setIsShow(false)
    setResponseMessage(msg)
  }

  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 w-100">
              {
                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 />
                    <div className="d-inline-flex align-items-center">
                      {
                        !message.not_received
                        &&
                        <i className={"fa fa-check text-right ellipsis "} style={message.seen ? { color: 'blue' } : { color: 'gray' }} />
                      }
                      <label>{time}</label>
                    </div>
                  </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)}
                />
                {
                  isShow
                  &&
                  <div className="display-reactions" >
                    <LikeButton onClick={handleLike} />
                    <button type="button" onClick={() => handleResponse(message)}>
                      <i className="fa fa-reply" />
                    </button>
                    <button type="button" onClick={() => handleCopy(message)}>
                      <i className="fa fa-copy" />
                    </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}
                    download
                    className="chat_image__download_button"
                  >
                    <i className="fa fa-arrow-circle-o-down" />
                  </a>
                }
              </StyledChatImgMessage>
              <br />
              <i className="text-right">{time}</i>
              {
                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)}
            />
            {
              isShow
              &&
              <div className="display-reactions">
                <LikeButton onClick={handleLike} />
                <button type="button" onClick={() => handleResponse(message)}>
                  <i className="fa fa-reply" />
                </button>
              </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>
                <a
                  href={message.m}
                  target="_blank"
                  className="chat_image__download_button" rel="noreferrer"
                >
                  <div className="chat_image_container">
                    <video src={message.m} preload="none" controls></video>
                  </div>
                </a>
                {message.u !== 1
                  &&
                  <a
                    href={message.m}
                    download
                    className="chat_image__download_button"
                  >
                    <i className="fa fa-arrow-circle-o-down" />
                  </a>
                }
              </StyledChatImgMessage>
              <br />
              <i className="text-right">{time}</i>
              {
                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)}
            />
            {
              isShow
              &&
              <div className="display-reactions">
                <LikeButton onClick={handleLike} />
                <button type="button" onClick={() => handleResponse(message)}>
                  <i className="fa fa-reply" />
                </button>
              </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" rel="noreferrer"
                  >
                    <i className="fa ti-arrow-circle-down"></i>
                  </a>
                }
              </StyledChatImgMessage>
              <br />
              <i className="text-right">{time}</i>
              {
                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)}
            />
            {
              isShow
              &&
              <div className="display-reactions">
                <LikeButton onClick={handleLike} />
                <button type="button" onClick={() => handleResponse(message)}>
                  <i className="fa fa-reply" />
                </button>
              </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>
                {message.mtype}
                <br />
                <i className="text-right">{time}</i>
              </p>
            </div>
            <i
              className="la la-ellipsis-v icon"
              style={{ position: 'relative' }}
              onClick={() => setIsShow(!isShow)}
            />
            {
              isShow
              &&
              <div className="display-reactions">
                <LikeButton onClick={handleLike} />
                <button type="button" onClick={() => setResponseMessage(message)}>
                  <i className="fa fa-reply" />
                </button>
              </div>
            }
          </div>
        </li>
      );
  }
};

export default React.memo(MessageTemplate, propsAreEqual);