Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from 'react'

import parse from 'html-react-parser'

const Message = ({ message }) => {

  const senderName = (message) => {

    if (message.type === 'group' && !message.u === 1) return message.user_name

  }

  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_container ${message.u === 1 ? 'sent' : 'received'}`}

    >

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

      <div className={`message ${message.u === 1 ? 'sent' : 'received'}`}>

        {messagesContent[message.mtype]}

        <label className="message_time">

          {!message.not_received && (

            <i

              className="fa fa-check"

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

            />

          )}

          {message.time}

        </label>

      </div>

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