Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 11350 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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