Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5925 | Rev 6010 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
5334 stevensc 1 
/* eslint-disable react/prop-types */
2 
import React, { useState } from 'react'
3 
import parse from 'html-react-parser'
4 
import LikeButton from '../../chat/chat/personal-chat/like-button/LikeButton'
5 
import { addNotification } from '../../redux/notification/notification.actions'
6 
import { useDispatch } from 'react-redux'
7 
 
8 
const Message = ({ message, setResponseMessage }) => {
9 
  const [isLiked, setIsLiked] = useState(false)
10 
  const dispatch = useDispatch()
11 
 
12 
  const senderName = (message) => {
13 
    if (message.type === 'group' && !message.u === 1) return message.user_name
14 
  }
15 
 
16 
  const handleCopy = async () => {
17 
    await navigator.clipboard.writeText(`${message.m}`)
5923 stevensc 18 
    dispatch(
19 
      addNotification({
20 
        style: 'success',
21 
        msg: 'Mensaje copiado en el portapapeles',
22 
      })
23 
    )
5334 stevensc 24 
  }
25 
 
26 
  const likeMessage = () => setIsLiked(!isLiked)
27 
 
28 
  const handleResponse = (msg) => setResponseMessage(msg)
29 
 
30 
  const messagesContent = {
31 
    text: <p>{parse(emojione.shortnameToImage(message.m))}</p>,
5336 stevensc 32 
    image: <img src={message.m} alt="chat_image" />,
5923 stevensc 33 
    video: <video src={message.m} preload="none" controls />,
34 
    document: (
35 
      <img
36 
        className="pdf"
37 
        src="/storage/type/default/filename/pdf.png"
38 
        alt="pdf"
39 
      />
40 
    ),
5334 stevensc 41 
  }
42 
 
43 
  return (
5926 stevensc 44 
    <div
45 
      className={`message_container ${message.u === 1 ? 'sent' : 'received'}`}
46 
    >
5925 stevensc 47 
      <span className="user_name">{senderName(message)}</span>
5926 stevensc 48 
      <div className={`message ${message.u === 1 ? 'sent' : 'received'}`}>
5923 stevensc 49 
        {messagesContent[message.mtype]}
5926 stevensc 50 
        <label className="message_time">
5923 stevensc 51 
          {!message.not_received && (
52 
            <i
53 
              className="fa fa-check"
54 
              style={message.seen ? { color: 'blue' } : { color: 'gray' }}
5334 stevensc 55 
            />
5923 stevensc 56 
          )}
57 
          {message.time}
58 
        </label>
59 
        {isLiked && (
60 
          <i
61 
            className="fas fa-heart"
62 
            style={{
5926 stevensc 63 
              color: 'red',
5923 stevensc 64 
              position: 'absolute',
5926 stevensc 65 
              bottom: '0',
5923 stevensc 66 
              left: '85%',
67 
            }}
68 
          />
69 
        )}
70 
      </div>
71 
      <Message.Reactions
72 
        message={message}
73 
        onLike={likeMessage}
74 
        onResponse={handleResponse}
75 
        onClipboard={handleCopy}
76 
      />
77 
    </div>
5334 stevensc 78 
  )
79 
}
80 
 
81 
const Reactions = ({
82 
  message = {},
83 
  onLike = () => false,
84 
  onResponse = () => false,
5923 stevensc 85 
  onClipboard = () => false,
5334 stevensc 86 
}) => {
87 
  const [isShow, setIsShow] = useState(false)
88 
 
89 
  return (
5923 stevensc 90 
    <>
91 
      <i className="la la-ellipsis-v icon" onClick={() => setIsShow(!isShow)} />
92 
      {isShow && (
93 
        <div className="display-reactions">
94 
          <LikeButton onClick={onLike} />
95 
          <button onClick={() => onResponse(message)}>
96 
            <i className="fa fa-reply" />
97 
          </button>
98 
          <button onClick={() => onClipboard(message)}>
99 
            <i className="fa fa-copy" />
100 
          </button>
101 
        </div>
102 
      )}
103 
    </>
5334 stevensc 104 
  )
105 
}
106 
 
107 
Message.Reactions = Reactions
108 
 
109 
export default Message