Proyectos de Subversion LeadersLinked - Backend

Rev

Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
11350 nelberth 1 
import React, { useState } from "react";
2 
import parse from "html-react-parser";
3 
import styled from "styled-components";
4 
import LikeButton from "../like-button/LikeButton";
5 
import { addNotification } from "../../../../redux/notification/notification.actions";
6 
import { useDispatch } from "react-redux";
7 
 
8 
const StyledChatImgMessage = styled.div`
9 
  display: flex;
10 
  justify-content: center;
11 
  align-items: center;
12 
  position: initial !important;
13 
  transform: initial !important;
14 
  .chat_image_container {
15 
    video {
16 
      width: 100%;
17 
      outline: none;
18 
    }
19 
    img {
20 
      width: 150px;
21 
      max-height: 200px;
22 
    }
23 
    .pdf {
24 
      width: 40px;
25 
    }
26 
  }
27 
  .chat_image__download_button {
28 
    margin-left: 0.5rem;
29 
    .fa {
30 
      font-size: 1.5rem;
31 
      color: black;
32 
    }
33 
  }
34 
`;
35 
 
36 
const ResponseMessageContainer = styled.div`
37 
  display: flex;
38 
  flex-direction: column;
39 
  text-align: center;
40 
  gap: 10px;
41 
  align-items: ${props => props.isRight ? 'flex-end' : 'flex-start'};
42 
`
43 
 
44 
const MessageTemplate = ({ message, setResponseMessage, responseMessage }) => {
45 
 
46 
  const [isShow, setIsShow] = useState(false);
47 
  const [isLiked, setIsLiked] = useState(false);
48 
  const dispatch = useDispatch()
49 
 
50 
  const senderName = (message) => {
51 
    if (message.type === "group") {
52 
      return message.u === 1 ? "" : message.user_name;
53 
    }
54 
  };
55 
 
56 
  const handleLike = () => {
57 
    setIsLiked(!isLiked)
58 
    setIsShow(!isShow)
59 
  }
60 
 
61 
  const handleCopy = async () => {
62 
    await navigator.clipboard.writeText(`${message.m}`)
63 
    dispatch(addNotification({
64 
      style: "success",
65 
      msg: 'Mensaje copiado en el portapapeles',
66 
    }))
67 
    setIsShow(!isShow)
68 
  }
69 
 
70 
  switch (message.mtype) {
71 
    case "text":
72 
      return (
73 
        <li
74 
          key={message.id}
75 
          className={`clearfix ${message.u === 1 ? "odd" : ""} m-t-10 conversers${message.u}`}
76 
        >
77 
          <div className="conversation-text">
78 
            <div className="conversation_container">
79 
              {
80 
                responseMessage
81 
                &&
82 
                <ResponseMessageContainer isRight={message.u === 1}>
83 
                  <span>{`Respondiendo a ${responseMessage.user_name}`}</span>
84 
                  <div className="ctext-wrap">
85 
                    {senderName(responseMessage)}
86 
                    <p className="">
87 
                      {parse(emojione.shortnameToImage(responseMessage.m))}
88 
                      <br />
89 
                    </p>
90 
                  </div>
91 
                </ResponseMessageContainer>
92 
              }
93 
              <div className="conversation-text">
94 
                <div className="ctext-wrap">
95 
                  {senderName(message)}
96 
                  <p className="">
97 
                    {parse(emojione.shortnameToImage(message.m))}
98 
                    <br />
99 
                    <i className="text-right">{message.time}</i>
100 
                  </p>
101 
                  {
102 
                    isLiked
103 
                    &&
104 
                    <i
105 
                      className="fas fa-heart"
106 
                      style={{
107 
                        color: '#0961bf',
108 
                        position: 'absolute',
109 
                        top: '87%',
110 
                        left: '85%'
111 
                      }}
112 
                    />
113 
                  }
114 
                </div>
115 
                <i
116 
                  className="la la-ellipsis-v icon"
117 
                  style={{ position: 'relative' }}
118 
                  onClick={() => setIsShow(!isShow)}
119 
                >
120 
                </i>
121 
                {
122 
                  isShow
123 
                  &&
124 
                  <div
125 
                    className="display-reactions"
126 
                  >
127 
                    <LikeButton
128 
                      onClick={handleLike}
129 
                    />
130 
                    <button
131 
                      type="button"
132 
                      onClick={() => setResponseMessage(message)}
133 
                    >
134 
                      <i className="fa fa-reply"></i>
135 
                    </button>
136 
                    <button
137 
                      type="button"
138 
                      onClick={() => handleCopy(message)}
139 
                    >
140 
                      <i className="fa fa-copy"></i>
141 
                    </button>
142 
                  </div>
143 
                }
144 
              </div>
145 
            </div>
146 
          </div>
147 
        </li>
148 
      );
149 
    case "image":
150 
      return (
151 
        <li
152 
          key={message.id}
153 
          className={`clearfix ${message.u === 1 ? "odd" : ""
154 
            } m-t-10 conversers${message.u}`}
155 
        >
156 
          <div
157 
            className="conversation-text"
158 
            data-toggle="tooltip"
159 
            data-placement="left"
160 
            data-html="true"
161 
          >
162 
            <div className="ctext-wrap">
163 
              {senderName(message)}
164 
              <StyledChatImgMessage>
165 
                <div className="chat_image_container">
166 
                  <img src={message.m} alt="chat_image" />
167 
                </div>
168 
                {message.u === 1 ? (
169 
                  ""
170 
                ) : (
171 
                  <a
172 
                    href={message.m}
173 
                    target="_blank"
174 
                    className="chat_image__download_button"
175 
                  >
176 
                    <i className="fa ti-arrow-circle-down"></i>
177 
                  </a>
178 
                )}
179 
              </StyledChatImgMessage>
180 
              <br />
181 
              <i className="text-right">{message.time}</i>
182 
            </div>
183 
          </div>
184 
        </li>
185 
      );
186 
    case "video":
187 
      return (
188 
        <li
189 
          key={message.id}
190 
          className={`clearfix ${message.u === 1 ? "odd" : ""
191 
            } m-t-10 conversers${message.u}`}
192 
        >
193 
          <div
194 
            className="conversation-text"
195 
            data-toggle="tooltip"
196 
            data-placement="left"
197 
            data-html="true"
198 
          >
199 
            <div className="ctext-wrap">
200 
              {senderName(message)}
201 
              <StyledChatImgMessage>
202 
                <div className="chat_image_container">
203 
                  <video src={message.m} preload="none" controls></video>
204 
                </div>
205 
                {message.u === 1 ? (
206 
                  ""
207 
                ) : (
208 
                  <a
209 
                    href={message.m}
210 
                    target="_blank"
211 
                    className="chat_image__download_button"
212 
                  >
213 
                    <i className="fa ti-arrow-circle-down"></i>
214 
                  </a>
215 
                )}
216 
              </StyledChatImgMessage>
217 
              <br />
218 
              <i className="text-right">{message.time}</i>
219 
            </div>
220 
          </div>
221 
        </li>
222 
      );
223 
    case "document":
224 
      return (
225 
        <li
226 
          key={message.id}
227 
          className={`clearfix ${message.u === 1 ? "odd" : ""
228 
            } m-t-10 conversers${message.u}`}
229 
        >
230 
          <div
231 
            className="conversation-text"
232 
            data-toggle="tooltip"
233 
            data-placement="left"
234 
            data-html="true"
235 
          >
236 
            <div className="ctext-wrap">
237 
              {senderName(message)}
238 
              <StyledChatImgMessage>
239 
                <div className="chat_image_container">
240 
                  <img
241 
                    className="pdf"
242 
                    src="/storage/type/default/filename/pdf.png"
243 
                    alt="pdf"
244 
                  />
245 
                </div>
246 
                {message.u === 1 ? (
247 
                  ""
248 
                ) : (
249 
                  <a
250 
                    href={message.m}
251 
                    target="_blank"
252 
                    className="chat_image__download_button"
253 
                  >
254 
                    <i className="fa ti-arrow-circle-down"></i>
255 
                  </a>
256 
                )}
257 
              </StyledChatImgMessage>
258 
              <br />
259 
              <i className="text-right">{message.time}</i>
260 
            </div>
261 
          </div>
262 
        </li>
263 
      );
264 
    default:
265 
      return (
266 
        <li
267 
          key={message.id}
268 
          className={`clearfix ${message.u === 1 ? "odd" : ""
269 
            } m-t-10 conversers${message.u}`}
270 
        >
271 
          <div
272 
            className="conversation-text"
273 
            data-toggle="tooltip"
274 
            data-placement="left"
275 
            data-html="true"
276 
          >
277 
            <div className="ctext-wrap">
278 
              {senderName(message)}
279 
              <p className="">
280 
                {message.mtype}
281 
                <br />
282 
                <i className="text-right">{message.time}</i>
283 
              </p>
284 
            </div>
285 
          </div>
286 
        </li>
287 
      );
288 
  }
289 
};
290 
 
291 
export default MessageTemplate;