Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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