Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
1191 stevensc 1 
import React, { useState } from "react";
1 www 2 
import parse from "html-react-parser";
3 
import styled from "styled-components";
1191 stevensc 4 
import LikeButton from "../like-button/LikeButton";
1332 stevensc 5 
import { addNotification } from "../../../../redux/notification/notification.actions";
6 
import { useDispatch } from "react-redux";
1 www 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 {
1305 stevensc 16 
      width: 100%;
1 www 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 {
2762 stevensc 30 
      font-size: 1rem;
31 
      color: gray;
1 www 32 
    }
33 
  }
34 
`;
35 
 
1305 stevensc 36 
const ResponseMessageContainer = styled.div`
37 
  display: flex;
38 
  flex-direction: column;
39 
  text-align: center;
40 
  gap: 10px;
1306 stevensc 41 
  align-items: ${props => props.isRight ? 'flex-end' : 'flex-start'};
1305 stevensc 42 
`
43 
 
3088 stevensc 44 
const MessageTemplate = ({ message, setResponseMessage, responseMessage, time }) => {
1191 stevensc 45 
 
46 
  const [isShow, setIsShow] = useState(false);
1198 stevensc 47 
  const [isLiked, setIsLiked] = useState(false);
1332 stevensc 48 
  const dispatch = useDispatch()
1198 stevensc 49 
 
1 www 50 
  const senderName = (message) => {
51 
    if (message.type === "group") {
52 
      return message.u === 1 ? "" : message.user_name;
53 
    }
54 
  };
1191 stevensc 55 
 
1198 stevensc 56 
  const handleLike = () => {
57 
    setIsLiked(!isLiked)
1199 stevensc 58 
    setIsShow(!isShow)
1198 stevensc 59 
  }
60 
 
2765 stevensc 61 
  const handleResponse = (msg) => {
62 
    setIsShow(false)
63 
    setResponseMessage(msg)
64 
  }
65 
 
1334 stevensc 66 
  const handleCopy = async () => {
67 
    await navigator.clipboard.writeText(`${message.m}`)
68 
    dispatch(addNotification({
69 
      style: "success",
70 
      msg: 'Mensaje copiado en el portapapeles',
71 
    }))
1381 stevensc 72 
    setIsShow(!isShow)
1331 stevensc 73 
  }
74 
 
1 www 75 
  switch (message.mtype) {
76 
    case "text":
77 
      return (
78 
        <li
79 
          key={message.id}
1305 stevensc 80 
          className={`clearfix ${message.u === 1 ? "odd" : ""} m-t-10 conversers${message.u}`}
1 www 81 
        >
1305 stevensc 82 
          <div className="conversation-text">
2138 steven 83 
            <div className="conversation_container w-100">
1198 stevensc 84 
              {
1305 stevensc 85 
                responseMessage
1198 stevensc 86 
                &&
1306 stevensc 87 
                <ResponseMessageContainer isRight={message.u === 1}>
1305 stevensc 88 
                  <span>{`Respondiendo a ${responseMessage.user_name}`}</span>
89 
                  <div className="ctext-wrap">
90 
                    {senderName(responseMessage)}
91 
                    <p className="">
92 
                      {parse(emojione.shortnameToImage(responseMessage.m))}
93 
                      <br />
94 
                    </p>
95 
                  </div>
96 
                </ResponseMessageContainer>
97 
              }
98 
              <div className="conversation-text">
99 
                <div className="ctext-wrap">
100 
                  {senderName(message)}
101 
                  <p className="">
102 
                    {parse(emojione.shortnameToImage(message.m))}
103 
                    <br />
2185 stevensc 104 
                    <div className="d-inline-flex align-items-center">
2186 stevensc 105 
                      {
106 
                        !message.not_received
107 
                        &&
108 
                        <i className={"fa fa-check text-right ellipsis "} style={message.seen ? { color: 'blue' } : { color: 'gray' }} />
109 
                      }
3088 stevensc 110 
                      <label>{time}</label>
2184 stevensc 111 
                    </div>
1305 stevensc 112 
                  </p>
113 
                  {
114 
                    isLiked
115 
                    &&
116 
                    <i
117 
                      className="fas fa-heart"
118 
                      style={{
119 
                        color: '#0961bf',
120 
                        position: 'absolute',
121 
                        top: '87%',
122 
                        left: '85%'
123 
                      }}
124 
                    />
125 
                  }
126 
                </div>
2273 steven 127 
                <i
1305 stevensc 128 
                  className="la la-ellipsis-v icon"
129 
                  style={{ position: 'relative' }}
130 
                  onClick={() => setIsShow(!isShow)}
2765 stevensc 131 
                />
1305 stevensc 132 
                {
133 
                  isShow
134 
                  &&
2765 stevensc 135 
                  <div className="display-reactions" >
136 
                    <LikeButton onClick={handleLike} />
137 
                    <button type="button" onClick={() => handleResponse(message)}>
138 
                      <i className="fa fa-reply" />
1305 stevensc 139 
                    </button>
2765 stevensc 140 
                    <button type="button" onClick={() => handleCopy(message)}>
141 
                      <i className="fa fa-copy" />
1331 stevensc 142 
                    </button>
1305 stevensc 143 
                  </div>
144 
                }
1197 stevensc 145 
              </div>
1305 stevensc 146 
            </div>
1 www 147 
          </div>
148 
        </li>
149 
      );
150 
    case "image":
151 
      return (
152 
        <li
153 
          key={message.id}
2765 stevensc 154 
          className={`clearfix ${message.u === 1 ? "odd" : ""} m-t-10 conversers${message.u}`}
1 www 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>
2762 stevensc 168 
                {
2763 stevensc 169 
                  message.u !== 1
2762 stevensc 170 
                  &&
1 www 171 
                  <a
172 
                    href={message.m}
2762 stevensc 173 
                    download
1 www 174 
                    className="chat_image__download_button"
175 
                  >
2762 stevensc 176 
                    <i className="fa fa-arrow-circle-o-down" />
1 www 177 
                  </a>
2762 stevensc 178 
                }
1 www 179 
              </StyledChatImgMessage>
180 
              <br />
3088 stevensc 181 
              <i className="text-right">{time}</i>
2765 stevensc 182 
              {
183 
                isLiked
184 
                &&
185 
                <i
186 
                  className="fas fa-heart"
187 
                  style={{
188 
                    color: '#0961bf',
189 
                    position: 'absolute',
190 
                    top: '87%',
191 
                    left: '85%'
192 
                  }}
193 
                />
194 
              }
1 www 195 
            </div>
2765 stevensc 196 
            <i
197 
              className="la la-ellipsis-v icon"
198 
              style={{ position: 'relative' }}
199 
              onClick={() => setIsShow(!isShow)}
200 
            />
2762 stevensc 201 
            {
202 
              isShow
203 
              &&
204 
              <div className="display-reactions">
2765 stevensc 205 
                <LikeButton onClick={handleLike} />
3053 stevensc 206 
                <button type="button" onClick={() => handleResponse(message)}>
207 
                  <i className="fa fa-reply" />
208 
                </button>
2762 stevensc 209 
              </div>
210 
            }
1 www 211 
          </div>
212 
        </li>
213 
      );
214 
    case "video":
215 
      return (
216 
        <li
217 
          key={message.id}
2765 stevensc 218 
          className={`clearfix ${message.u === 1 ? "odd" : ""} m-t-10 conversers${message.u}`}
1 www 219 
        >
220 
          <div
221 
            className="conversation-text"
222 
            data-toggle="tooltip"
223 
            data-placement="left"
224 
            data-html="true"
225 
          >
226 
            <div className="ctext-wrap">
227 
              {senderName(message)}
228 
              <StyledChatImgMessage>
2764 stevensc 229 
                <a
230 
                  href={message.m}
231 
                  target="_blank"
3057 stevensc 232 
                  className="chat_image__download_button" rel="noreferrer"
2764 stevensc 233 
                >
234 
                  <div className="chat_image_container">
235 
                    <video src={message.m} preload="none" controls></video>
236 
                  </div>
237 
                </a>
238 
                {message.u !== 1
239 
                  &&
1 www 240 
                  <a
241 
                    href={message.m}
2764 stevensc 242 
                    download
1 www 243 
                    className="chat_image__download_button"
244 
                  >
2764 stevensc 245 
                    <i className="fa fa-arrow-circle-o-down" />
1 www 246 
                  </a>
2764 stevensc 247 
                }
1 www 248 
              </StyledChatImgMessage>
249 
              <br />
3088 stevensc 250 
              <i className="text-right">{time}</i>
2765 stevensc 251 
              {
252 
                isLiked
253 
                &&
254 
                <i
255 
                  className="fas fa-heart"
256 
                  style={{
257 
                    color: '#0961bf',
258 
                    position: 'absolute',
259 
                    top: '87%',
260 
                    left: '85%'
261 
                  }}
262 
                />
263 
              }
1 www 264 
            </div>
2765 stevensc 265 
            <i
266 
              className="la la-ellipsis-v icon"
267 
              style={{ position: 'relative' }}
268 
              onClick={() => setIsShow(!isShow)}
269 
            />
270 
            {
271 
              isShow
272 
              &&
273 
              <div className="display-reactions">
274 
                <LikeButton onClick={handleLike} />
3053 stevensc 275 
                <button type="button" onClick={() => handleResponse(message)}>
276 
                  <i className="fa fa-reply" />
277 
                </button>
2765 stevensc 278 
              </div>
279 
            }
1 www 280 
          </div>
281 
        </li>
282 
      );
283 
    case "document":
284 
      return (
285 
        <li
286 
          key={message.id}
2765 stevensc 287 
          className={`clearfix ${message.u === 1 ? "odd" : ""} m-t-10 conversers${message.u}`}
1 www 288 
        >
289 
          <div
290 
            className="conversation-text"
291 
            data-toggle="tooltip"
292 
            data-placement="left"
293 
            data-html="true"
294 
          >
295 
            <div className="ctext-wrap">
296 
              {senderName(message)}
297 
              <StyledChatImgMessage>
298 
                <div className="chat_image_container">
299 
                  <img
300 
                    className="pdf"
301 
                    src="/storage/type/default/filename/pdf.png"
302 
                    alt="pdf"
303 
                  />
304 
                </div>
2764 stevensc 305 
                {message.u !== 1
306 
                  &&
1 www 307 
                  <a
308 
                    href={message.m}
309 
                    target="_blank"
3057 stevensc 310 
                    className="chat_image__download_button" rel="noreferrer"
1 www 311 
                  >
312 
                    <i className="fa ti-arrow-circle-down"></i>
313 
                  </a>
2764 stevensc 314 
                }
1 www 315 
              </StyledChatImgMessage>
316 
              <br />
3088 stevensc 317 
              <i className="text-right">{time}</i>
2765 stevensc 318 
              {
319 
                isLiked
320 
                &&
321 
                <i
322 
                  className="fas fa-heart"
323 
                  style={{
324 
                    color: '#0961bf',
325 
                    position: 'absolute',
326 
                    top: '87%',
327 
                    left: '85%'
328 
                  }}
329 
                />
330 
              }
1 www 331 
            </div>
2765 stevensc 332 
            <i
333 
              className="la la-ellipsis-v icon"
334 
              style={{ position: 'relative' }}
335 
              onClick={() => setIsShow(!isShow)}
336 
            />
337 
            {
338 
              isShow
339 
              &&
340 
              <div className="display-reactions">
341 
                <LikeButton onClick={handleLike} />
3053 stevensc 342 
                <button type="button" onClick={() => handleResponse(message)}>
343 
                  <i className="fa fa-reply" />
344 
                </button>
2765 stevensc 345 
              </div>
346 
            }
1 www 347 
          </div>
348 
        </li>
349 
      );
350 
    default:
351 
      return (
352 
        <li
353 
          key={message.id}
2765 stevensc 354 
          className={`clearfix ${message.u === 1 ? "odd" : ""} m-t-10 conversers${message.u}`}
1 www 355 
        >
356 
          <div
357 
            className="conversation-text"
358 
            data-toggle="tooltip"
359 
            data-placement="left"
360 
            data-html="true"
361 
          >
362 
            <div className="ctext-wrap">
363 
              {senderName(message)}
2765 stevensc 364 
              <p>
1 www 365 
                {message.mtype}
366 
                <br />
3088 stevensc 367 
                <i className="text-right">{time}</i>
1 www 368 
              </p>
369 
            </div>
2765 stevensc 370 
            <i
371 
              className="la la-ellipsis-v icon"
372 
              style={{ position: 'relative' }}
373 
              onClick={() => setIsShow(!isShow)}
374 
            />
375 
            {
376 
              isShow
377 
              &&
378 
              <div className="display-reactions">
379 
                <LikeButton onClick={handleLike} />
380 
                <button type="button" onClick={() => setResponseMessage(message)}>
381 
                  <i className="fa fa-reply" />
382 
                </button>
383 
              </div>
384 
            }
1 www 385 
          </div>
386 
        </li>
387 
      );
388 
  }
389 
};
390 
 
3088 stevensc 391 
export default React.memo(MessageTemplate);