Proyectos de Subversion LeadersLinked - Backend

/* eslint-disable react/prop-types */
import React, { useState } from "react";
import parse from "html-react-parser";
import LikeButton from "../personal-chat/like-button/LikeButton";
import { addNotification } from "../../../redux/notification/notification.actions";
import { useDispatch } from "react-redux";

const Message = ({ message, setResponseMessage }) => {
  const [isLiked, setIsLiked] = useState(false);
  const dispatch = useDispatch();

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

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

  const likeMessage = () => setIsLiked(!isLiked);

  const handleResponse = (msg) => setResponseMessage(msg);

  const messagesContent = {
    text: <p>{parse(emojione.shortnameToImage(message.m))}</p>,
    image: <img src={message.m} alt="chat_image" />,
    video: <video src={message.m} preload="none" controls></video>,
    document: (
      <img
        className="pdf"
        src="/storage/type/default/filename/pdf.png"
        alt="pdf"
      />
    ),
  };

  return (
    <div className={`conversation-text ${message.u === 1 && "odd"}`}>
      <div className="ctext-wrap">
        {senderName(message)}
        {messagesContent[message.mtype]}
        <label>
          {!message.not_received && (
            <i
              className="fa fa-check"
              style={message.seen ? { color: "blue" } : { color: "gray" }}
            />
          )}
          {message.time}
        </label>
        {isLiked && (
          <i
            className="fas fa-heart"
            style={{
              color: "#0961bf",
              position: "absolute",
              top: "87%",
              left: "85%",
            }}
          />
        )}
      </div>
      <Message.Reactions
        message={message}
        onLike={likeMessage}
        onResponse={handleResponse}
        onClipboard={handleCopy}
      />
    </div>
  );
};

const Reactions = ({
  message = {},
  onLike = () => false,
  onResponse = () => false,
  onClipboard = () => false,
}) => {
  const [isShow, setIsShow] = useState(false);

  return (
    <>
      <i className="la la-ellipsis-v icon" onClick={() => setIsShow(!isShow)} />
      {isShow && (
        <div className="display-reactions">
          <LikeButton onClick={onLike} />
          <button onClick={() => onResponse(message)}>
            <i className="fa fa-reply" />
          </button>
          <button onClick={() => onClipboard(message)}>
            <i className="fa fa-copy" />
          </button>
        </div>
      )}
    </>
  );
};

Message.Reactions = Reactions;

export default Message;