Proyectos de Subversion LeadersLinked - Backend

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
15762 stevensc 1 
/* eslint-disable react/prop-types */
2 
import React, { useState } from "react";
3 
import parse from "html-react-parser";
4 
import LikeButton from "../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}`);
18 
    dispatch(
19 
      addNotification({
20 
        style: "success",
21 
        msg: "Mensaje copiado en el portapapeles",
22 
      })
23 
    );
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>,
32 
    image: <img src={message.m} alt="chat_image" />,
33 
    video: <video src={message.m} preload="none" controls></video>,
34 
    document: (
35 
      <img
36 
        className="pdf"
37 
        src="/storage/type/default/filename/pdf.png"
38 
        alt="pdf"
39 
      />
40 
    ),
41 
  };
42 
 
43 
  return (
44 
    <div className={`conversation-text ${message.u === 1 && "odd"}`}>
45 
      <div className="ctext-wrap">
46 
        {senderName(message)}
47 
        {messagesContent[message.mtype]}
48 
        <label>
49 
          {!message.not_received && (
50 
            <i
51 
              className="fa fa-check"
52 
              style={message.seen ? { color: "blue" } : { color: "gray" }}
53 
            />
54 
          )}
55 
          {message.time}
56 
        </label>
57 
        {isLiked && (
58 
          <i
59 
            className="fas fa-heart"
60 
            style={{
61 
              color: "#0961bf",
62 
              position: "absolute",
63 
              top: "87%",
64 
              left: "85%",
65 
            }}
66 
          />
67 
        )}
68 
      </div>
69 
      <Message.Reactions
70 
        message={message}
71 
        onLike={likeMessage}
72 
        onResponse={handleResponse}
73 
        onClipboard={handleCopy}
74 
      />
75 
    </div>
76 
  );
77 
};
78 
 
79 
const Reactions = ({
80 
  message = {},
81 
  onLike = () => false,
82 
  onResponse = () => false,
83 
  onClipboard = () => false,
84 
}) => {
85 
  const [isShow, setIsShow] = useState(false);
86 
 
87 
  return (
88 
    <>
89 
      <i className="la la-ellipsis-v icon" onClick={() => setIsShow(!isShow)} />
90 
      {isShow && (
91 
        <div className="display-reactions">
92 
          <LikeButton onClick={onLike} />
93 
          <button onClick={() => onResponse(message)}>
94 
            <i className="fa fa-reply" />
95 
          </button>
96 
          <button onClick={() => onClipboard(message)}>
97 
            <i className="fa fa-copy" />
98 
          </button>
99 
        </div>
100 
      )}
101 
    </>
102 
  );
103 
};
104 
 
105 
Message.Reactions = Reactions;
106 
 
107 
export default Message;