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