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