Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useState } from 'react'
import parse from 'html-react-parser'
import LikeButton from '../../chat/chat/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 />,
    document: (
      <img
        className="pdf"
        src="/storage/type/default/filename/pdf.png"
        alt="pdf"
      />
    ),
  }

  return (
    <div
      className={`message_container ${message.u === 1 ? 'sent' : 'received'}`}
    >
      <span className="user_name">{senderName(message)}</span>
      <div className={`message ${message.u === 1 ? 'sent' : 'received'}`}>
        {messagesContent[message.mtype]}
        <label className="message_time">
          {!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: 'red',
              position: 'absolute',
              bottom: '0',
              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