Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1298 | Rev 1306 | 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";
1 www 5 
 
6 
const StyledChatImgMessage = styled.div`
7 
  display: flex;
8 
  justify-content: center;
9 
  align-items: center;
10 
  position: initial !important;
11 
  transform: initial !important;
12 
  .chat_image_container {
13 
    video {
1305 stevensc 14 
      width: 100%;
1 www 15 
      outline: none;
16 
    }
17 
    img {
18 
      width: 150px;
19 
      max-height: 200px;
20 
    }
21 
    .pdf {
22 
      width: 40px;
23 
    }
24 
  }
25 
  .chat_image__download_button {
26 
    margin-left: 0.5rem;
27 
    .fa {
28 
      font-size: 1.5rem;
29 
      color: black;
30 
    }
31 
  }
32 
`;
33 
 
1305 stevensc 34 
const ResponseMessageContainer = styled.div`
35 
  display: flex;
36 
  flex-direction: column;
37 
  text-align: center;
38 
  gap: 10px;
39 
`
40 
 
1298 stevensc 41 
const MessageTemplate = ({ message, setResponseMessage, responseMessage }) => {
1191 stevensc 42 
 
43 
  const [isShow, setIsShow] = useState(false);
1198 stevensc 44 
  const [isLiked, setIsLiked] = useState(false);
45 
 
1 www 46 
  const senderName = (message) => {
47 
    if (message.type === "group") {
48 
      return message.u === 1 ? "" : message.user_name;
49 
    }
50 
  };
1191 stevensc 51 
 
1198 stevensc 52 
  const handleLike = () => {
53 
    setIsLiked(!isLiked)
1199 stevensc 54 
    setIsShow(!isShow)
1198 stevensc 55 
  }
56 
 
1 www 57 
  switch (message.mtype) {
58 
    case "text":
59 
      return (
60 
        <li
61 
          key={message.id}
1305 stevensc 62 
          className={`clearfix ${message.u === 1 ? "odd" : ""} m-t-10 conversers${message.u}`}
1 www 63 
        >
1305 stevensc 64 
          <div className="conversation-text">
65 
            <div className="conversation_container">
1198 stevensc 66 
              {
1305 stevensc 67 
                responseMessage
1198 stevensc 68 
                &&
1305 stevensc 69 
                <ResponseMessageContainer>
70 
                  <span>{`Respondiendo a ${responseMessage.user_name}`}</span>
71 
                  <div className="ctext-wrap">
72 
                    {senderName(responseMessage)}
73 
                    <p className="">
74 
                      {parse(emojione.shortnameToImage(responseMessage.m))}
75 
                      <br />
76 
                    </p>
77 
                  </div>
78 
                </ResponseMessageContainer>
79 
              }
80 
              <div className="conversation-text">
81 
                <div className="ctext-wrap">
82 
                  {senderName(message)}
83 
                  <p className="">
84 
                    {parse(emojione.shortnameToImage(message.m))}
85 
                    <br />
86 
                    <i className="text-right">{message.time}</i>
87 
                  </p>
88 
                  {
89 
                    isLiked
90 
                    &&
91 
                    <i
92 
                      className="fas fa-heart"
93 
                      style={{
94 
                        color: '#0961bf',
95 
                        position: 'absolute',
96 
                        top: '87%',
97 
                        left: '85%'
98 
                      }}
99 
                    />
100 
                  }
101 
                </div>
1198 stevensc 102 
                <i
1305 stevensc 103 
                  className="la la-ellipsis-v icon"
104 
                  style={{ position: 'relative' }}
105 
                  onClick={() => setIsShow(!isShow)}
1298 stevensc 106 
                >
1305 stevensc 107 
                </i>
108 
                {
109 
                  isShow
110 
                  &&
111 
                  <div
112 
                    className="display-reactions"
113 
                  >
114 
                    <LikeButton
115 
                      onClick={handleLike}
116 
                    />
117 
                    <button
118 
                      type="button"
119 
                      onClick={() => setResponseMessage(message)}
120 
                    >
121 
                      <i className="fa fa-reply"></i>
122 
                    </button>
123 
                  </div>
124 
                }
1197 stevensc 125 
              </div>
1305 stevensc 126 
            </div>
1 www 127 
          </div>
128 
        </li>
129 
      );
130 
    case "image":
131 
      return (
132 
        <li
133 
          key={message.id}
1189 stevensc 134 
          className={`clearfix ${message.u === 1 ? "odd" : ""
135 
            } m-t-10 conversers${message.u}`}
1 www 136 
        >
137 
          <div
138 
            className="conversation-text"
139 
            data-toggle="tooltip"
140 
            data-placement="left"
141 
            data-html="true"
142 
          >
143 
            <div className="ctext-wrap">
144 
              {senderName(message)}
145 
              <StyledChatImgMessage>
146 
                <div className="chat_image_container">
147 
                  <img src={message.m} alt="chat_image" />
148 
                </div>
149 
                {message.u === 1 ? (
150 
                  ""
151 
                ) : (
152 
                  <a
153 
                    href={message.m}
154 
                    target="_blank"
155 
                    className="chat_image__download_button"
156 
                  >
157 
                    <i className="fa ti-arrow-circle-down"></i>
158 
                  </a>
159 
                )}
160 
              </StyledChatImgMessage>
161 
              <br />
162 
              <i className="text-right">{message.time}</i>
163 
            </div>
164 
          </div>
165 
        </li>
166 
      );
167 
    case "video":
168 
      return (
169 
        <li
170 
          key={message.id}
1189 stevensc 171 
          className={`clearfix ${message.u === 1 ? "odd" : ""
172 
            } m-t-10 conversers${message.u}`}
1 www 173 
        >
174 
          <div
175 
            className="conversation-text"
176 
            data-toggle="tooltip"
177 
            data-placement="left"
178 
            data-html="true"
179 
          >
180 
            <div className="ctext-wrap">
181 
              {senderName(message)}
182 
              <StyledChatImgMessage>
183 
                <div className="chat_image_container">
184 
                  <video src={message.m} preload="none" controls></video>
185 
                </div>
186 
                {message.u === 1 ? (
187 
                  ""
188 
                ) : (
189 
                  <a
190 
                    href={message.m}
191 
                    target="_blank"
192 
                    className="chat_image__download_button"
193 
                  >
194 
                    <i className="fa ti-arrow-circle-down"></i>
195 
                  </a>
196 
                )}
197 
              </StyledChatImgMessage>
198 
              <br />
199 
              <i className="text-right">{message.time}</i>
200 
            </div>
201 
          </div>
202 
        </li>
203 
      );
204 
    case "document":
205 
      return (
206 
        <li
207 
          key={message.id}
1189 stevensc 208 
          className={`clearfix ${message.u === 1 ? "odd" : ""
209 
            } m-t-10 conversers${message.u}`}
1 www 210 
        >
211 
          <div
212 
            className="conversation-text"
213 
            data-toggle="tooltip"
214 
            data-placement="left"
215 
            data-html="true"
216 
          >
217 
            <div className="ctext-wrap">
218 
              {senderName(message)}
219 
              <StyledChatImgMessage>
220 
                <div className="chat_image_container">
221 
                  <img
222 
                    className="pdf"
223 
                    src="/storage/type/default/filename/pdf.png"
224 
                    alt="pdf"
225 
                  />
226 
                </div>
227 
                {message.u === 1 ? (
228 
                  ""
229 
                ) : (
230 
                  <a
231 
                    href={message.m}
232 
                    target="_blank"
233 
                    className="chat_image__download_button"
234 
                  >
235 
                    <i className="fa ti-arrow-circle-down"></i>
236 
                  </a>
237 
                )}
238 
              </StyledChatImgMessage>
239 
              <br />
240 
              <i className="text-right">{message.time}</i>
241 
            </div>
242 
          </div>
243 
        </li>
244 
      );
245 
    default:
246 
      return (
247 
        <li
248 
          key={message.id}
1189 stevensc 249 
          className={`clearfix ${message.u === 1 ? "odd" : ""
250 
            } m-t-10 conversers${message.u}`}
1 www 251 
        >
252 
          <div
253 
            className="conversation-text"
254 
            data-toggle="tooltip"
255 
            data-placement="left"
256 
            data-html="true"
257 
          >
258 
            <div className="ctext-wrap">
259 
              {senderName(message)}
260 
              <p className="">
261 
                {message.mtype}
262 
                <br />
263 
                <i className="text-right">{message.time}</i>
264 
              </p>
265 
            </div>
266 
          </div>
267 
        </li>
268 
      );
269 
  }
270 
};
271 
 
272 
export default MessageTemplate;