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:

            <div className="chat_image_container">

                <img src={message.m} alt="chat_image" />

            </div>,

    video:

            <div className="chat_image_container">

                <video src={message.m} preload="none" controls></video>

            </div>,

    document:

            <div className="chat_image_container">

                <img

                    className="pdf"

                    src="/storage/type/default/filename/pdf.png"

                    alt="pdf"

                />

            </div>

  }

  return (

        <div className="conversation-text">

            <div className="ctext-wrap">

                {senderName(message)}

                {messagesContent[message.mtype]}

                <div className="d-inline-flex align-items-center">

                    {!message.not_received && <i className={'fa fa-check text-right ellipsis '} style={message.seen ? { color: 'blue' } : { color: 'gray' }} />}

                    <label>{message.time}</label>

                </div>

                {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"

                style={{ position: 'relative' }}

                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