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 ${message.u === 1 && 'odd'}`}>
            <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