Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from 'react'
import parse from 'html-react-parser'
import LikeButton from '../../chat/chat/personal-chat/like-button/LikeButton'

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

  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>
      </div>
    </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