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

        message.u === 1 ? 'message_sent' : 'message_received'

      }`}

    >

      <div className="messageContainer">

        <span className="userName">{senderName(message)}</span>

        {messagesContent[message.mtype]}

        <label>

          {!message.not_received && (

            <i

              className="fa fa-check"

              style={message.seen ? { color: 'blue' } : { color: 'gray' }}

            />

          )}

          {message.time}

        </label>

        <span className={'message__time'}>{message.time}</span>

        {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