Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1332 | Rev 1381 | 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 {
30
      font-size: 1.5rem;
31
      color: black;
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
 
1298 stevensc 44
const MessageTemplate = ({ message, setResponseMessage, responseMessage }) => {
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
 
1334 stevensc 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
    }))
1331 stevensc 67
  }
68
 
1 www 69
  switch (message.mtype) {
70
    case "text":
71
      return (
72
        <li
73
          key={message.id}
1305 stevensc 74
          className={`clearfix ${message.u === 1 ? "odd" : ""} m-t-10 conversers${message.u}`}
1 www 75
        >
1305 stevensc 76
          <div className="conversation-text">
77
            <div className="conversation_container">
1198 stevensc 78
              {
1305 stevensc 79
                responseMessage
1198 stevensc 80
                &&
1306 stevensc 81
                <ResponseMessageContainer isRight={message.u === 1}>
1305 stevensc 82
                  <span>{`Respondiendo a ${responseMessage.user_name}`}</span>
83
                  <div className="ctext-wrap">
84
                    {senderName(responseMessage)}
85
                    <p className="">
86
                      {parse(emojione.shortnameToImage(responseMessage.m))}
87
                      <br />
88
                    </p>
89
                  </div>
90
                </ResponseMessageContainer>
91
              }
92
              <div className="conversation-text">
93
                <div className="ctext-wrap">
94
                  {senderName(message)}
95
                  <p className="">
96
                    {parse(emojione.shortnameToImage(message.m))}
97
                    <br />
98
                    <i className="text-right">{message.time}</i>
99
                  </p>
100
                  {
101
                    isLiked
102
                    &&
103
                    <i
104
                      className="fas fa-heart"
105
                      style={{
106
                        color: '#0961bf',
107
                        position: 'absolute',
108
                        top: '87%',
109
                        left: '85%'
110
                      }}
111
                    />
112
                  }
113
                </div>
1198 stevensc 114
                <i
1305 stevensc 115
                  className="la la-ellipsis-v icon"
116
                  style={{ position: 'relative' }}
117
                  onClick={() => setIsShow(!isShow)}
1298 stevensc 118
                >
1305 stevensc 119
                </i>
120
                {
121
                  isShow
122
                  &&
123
                  <div
124
                    className="display-reactions"
125
                  >
126
                    <LikeButton
127
                      onClick={handleLike}
128
                    />
129
                    <button
130
                      type="button"
131
                      onClick={() => setResponseMessage(message)}
132
                    >
133
                      <i className="fa fa-reply"></i>
134
                    </button>
1331 stevensc 135
                    <button
136
                      type="button"
137
                      onClick={() => handleCopy(message)}
138
                    >
139
                      <i className="fa fa-copy"></i>
140
                    </button>
1305 stevensc 141
                  </div>
142
                }
1197 stevensc 143
              </div>
1305 stevensc 144
            </div>
1 www 145
          </div>
146
        </li>
147
      );
148
    case "image":
149
      return (
150
        <li
151
          key={message.id}
1189 stevensc 152
          className={`clearfix ${message.u === 1 ? "odd" : ""
153
            } 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>
167
                {message.u === 1 ? (
168
                  ""
169
                ) : (
170
                  <a
171
                    href={message.m}
172
                    target="_blank"
173
                    className="chat_image__download_button"
174
                  >
175
                    <i className="fa ti-arrow-circle-down"></i>
176
                  </a>
177
                )}
178
              </StyledChatImgMessage>
179
              <br />
180
              <i className="text-right">{message.time}</i>
181
            </div>
182
          </div>
183
        </li>
184
      );
185
    case "video":
186
      return (
187
        <li
188
          key={message.id}
1189 stevensc 189
          className={`clearfix ${message.u === 1 ? "odd" : ""
190
            } m-t-10 conversers${message.u}`}
1 www 191
        >
192
          <div
193
            className="conversation-text"
194
            data-toggle="tooltip"
195
            data-placement="left"
196
            data-html="true"
197
          >
198
            <div className="ctext-wrap">
199
              {senderName(message)}
200
              <StyledChatImgMessage>
201
                <div className="chat_image_container">
202
                  <video src={message.m} preload="none" controls></video>
203
                </div>
204
                {message.u === 1 ? (
205
                  ""
206
                ) : (
207
                  <a
208
                    href={message.m}
209
                    target="_blank"
210
                    className="chat_image__download_button"
211
                  >
212
                    <i className="fa ti-arrow-circle-down"></i>
213
                  </a>
214
                )}
215
              </StyledChatImgMessage>
216
              <br />
217
              <i className="text-right">{message.time}</i>
218
            </div>
219
          </div>
220
        </li>
221
      );
222
    case "document":
223
      return (
224
        <li
225
          key={message.id}
1189 stevensc 226
          className={`clearfix ${message.u === 1 ? "odd" : ""
227
            } m-t-10 conversers${message.u}`}
1 www 228
        >
229
          <div
230
            className="conversation-text"
231
            data-toggle="tooltip"
232
            data-placement="left"
233
            data-html="true"
234
          >
235
            <div className="ctext-wrap">
236
              {senderName(message)}
237
              <StyledChatImgMessage>
238
                <div className="chat_image_container">
239
                  <img
240
                    className="pdf"
241
                    src="/storage/type/default/filename/pdf.png"
242
                    alt="pdf"
243
                  />
244
                </div>
245
                {message.u === 1 ? (
246
                  ""
247
                ) : (
248
                  <a
249
                    href={message.m}
250
                    target="_blank"
251
                    className="chat_image__download_button"
252
                  >
253
                    <i className="fa ti-arrow-circle-down"></i>
254
                  </a>
255
                )}
256
              </StyledChatImgMessage>
257
              <br />
258
              <i className="text-right">{message.time}</i>
259
            </div>
260
          </div>
261
        </li>
262
      );
263
    default:
264
      return (
265
        <li
266
          key={message.id}
1189 stevensc 267
          className={`clearfix ${message.u === 1 ? "odd" : ""
268
            } m-t-10 conversers${message.u}`}
1 www 269
        >
270
          <div
271
            className="conversation-text"
272
            data-toggle="tooltip"
273
            data-placement="left"
274
            data-html="true"
275
          >
276
            <div className="ctext-wrap">
277
              {senderName(message)}
278
              <p className="">
279
                {message.mtype}
280
                <br />
281
                <i className="text-right">{message.time}</i>
282
              </p>
283
            </div>
284
          </div>
285
        </li>
286
      );
287
  }
288
};
289
 
290
export default MessageTemplate;