Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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