Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 3089 | | Comparar con el anterior | Ultima modificación | Ver Log |

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