Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 3752 | Rev 4115 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3094 stevensc 1 
/* eslint-disable react/prop-types */
1 www 2 
import React from "react";
3 
import { useState, useRef, useEffect } from "react";
4 
import styled from "styled-components";
932 stevensc 5 
import { axios } from "../../../utils";
1 www 6 
import Emojione from "./emojione/Emojione";
7 
import SendFileModal from "./send-file-modal/SendFileModal";
8 
import ConfirmModal from "../../../shared/confirm-modal/ConfirmModal";
9 
import MessageTemplate from "./messageTemplate/MessageTemplate";
10 
 
11 
const StyledChatHead = styled.div`
12 
  .notify {
13 
    animation: notify 2s infinite;
14 
  }
15 
 
16 
  @keyframes notify {
17 
    0% {
18 
      background-color: unset;
19 
    }
20 
    50% {
21 
      background-color: #00b0ff;
22 
    }
23 
    100% {
24 
      background-color: unset;
25 
    }
26 
  }
27 
`;
28 
 
29 
const StyledShowOptions = styled.div`
30 
  height: 342px;
31 
  flex-direction: column;
32 
  overflow-y: auto;
33 
  position: relative;
34 
  &.show {
35 
    display: flex;
36 
  }
37 
  &.hide {
38 
    display: none;
39 
  }
40 
  .optionBack {
41 
    margin: 1rem 0 0.5rem 1rem;
42 
    cursor: pointer;
43 
  }
44 
  .optionsTab {
45 
    &__option {
46 
      padding: 0.5rem;
47 
      border-bottom: 1px solid #e2e2e2;
48 
      cursor: pointer;
49 
      &:hover {
50 
        background-color: #e2e2e2;
51 
      }
52 
      &__icon {
53 
        margin-right: 0.3rem;
54 
      }
55 
    }
56 
  }
57 
  .addPersonToGroupTab {
58 
    display: flex;
59 
    flex-direction: column;
60 
    &__person {
61 
      display: flex;
62 
      justify-content: space-between;
63 
      align-items: center;
64 
      padding: 0.2rem 0.5rem;
65 
      border-bottom: 1px solid #e2e2e2;
66 
    }
67 
  }
68 
`;
69 
 
3131 stevensc 70 
const PersonalChat = ({ entity, index, onClose, onMinimize, onRead, not_seen_messages, minimized }) => {
3056 stevensc 71 
 
1 www 72 
  // entity destructuring
73 
  const {
74 
    id,
75 
    image,
76 
    name,
77 
    online,
78 
    type,
79 
    url_get_all_messages,
80 
    url_send,
81 
    url_upload,
82 
    profile,
83 
    // group
84 
    url_leave,
85 
    url_delete,
86 
    url_add_user_to_group,
87 
    url_get_contact_group_list,
88 
    url_get_contacts_availables_for_group,
3056 stevensc 89 
  } = entity;
1 www 90 
 
91 
  // states
92 
  const [messages, setMessages] = useState([]);
1298 stevensc 93 
  const [responseMessage, setResponseMessage] = useState(null);
1 www 94 
  const [oldMessages, setOldMessages] = useState([]);
95 
  const [currentPage, setCurrentPage] = useState(1);
96 
  const [pages, setPages] = useState(1);
97 
  const [showOptions, setShowOptions] = useState(false);
98 
  const [optionTab, setOptionTab] = useState("default");
99 
  const [availableContactsToAdd, setAvailableContactsToAdd] = useState([]);
100 
  const [groupContactsList, setGroupContactsList] = useState([]);
101 
  const [confirmModalShow, setConfirmModalShow] = useState(false);
102 
  const [showEmojiTab, setShowEmojiTab] = useState(false);
103 
  const [shareFileModalShow, setShareFileModalShow] = useState(false);
3122 stevensc 104 
  const [loading, setLoading] = useState(false);
1 www 105 
 
106 
  // refs
107 
  const conversationListEl = useRef(null);
108 
  const loader = useRef(null);
109 
  const modalActionUrl = useRef("");
110 
  const chatboxEl = useRef(null);
111 
  const textAreaEl = useRef(null);
112 
 
113 
  // optionTabs
114 
  const optionTabs = {
115 
    add_person_to_group: "add_person_to_group",
116 
    group_contacts_list: "group_contacts_list",
117 
    default: "default",
118 
  };
119 
 
120 
  const handleActive = () => {
3122 stevensc 121 
    onRead(entity);
3123 stevensc 122 
    onMinimize(entity);
1 www 123 
  };
124 
 
125 
  const handleGetMessages = async () => {
3122 stevensc 126 
    setLoading(true)
1 www 127 
    const response = await axios.get(url_get_all_messages);
128 
    const resData = response.data;
129 
    if (!resData.success) {
932 stevensc 130 
      return ("ha ocurrido un error", resData);
1 www 131 
    }
132 
    const updatedMessages = [...resData.data.items].reverse();
133 
    const newMessages = updatedMessages.reduce((acum, updatedMessage) => {
3089 stevensc 134 
      if (messages.findIndex((message) => message.id === updatedMessage.id) === -1) {
1 www 135 
        acum = [...acum, updatedMessage];
136 
      }
137 
      return acum;
138 
    }, []);
3089 stevensc 139 
 
1 www 140 
    if (newMessages.length > 0) {
141 
      setMessages([...messages, ...newMessages]);
3122 stevensc 142 
      setLoading(false)
1 www 143 
      setPages(resData.data.pages);
144 
      scrollToBottom();
3090 stevensc 145 
    } else {
3089 stevensc 146 
      setMessages([...updatedMessages]);
3122 stevensc 147 
      setLoading(false)
1 www 148 
    }
149 
  };
150 
 
151 
  const handleLoadMore = async () => {
936 stevensc 152 
    await axios.get(`${url_get_all_messages}?page=${currentPage}`)
1 www 153 
      .then((response) => {
154 
        const resData = response.data;
155 
        if (resData.success) {
156 
          if (resData.data.page > 1) {
157 
            const updatedOldMessages = [...resData.data.items].reverse();
158 
            setOldMessages([...updatedOldMessages, ...oldMessages]);
986 stevensc 159 
            /* scrollDownBy(100); */
1 www 160 
          }
161 
        }
162 
      });
163 
  };
164 
 
3122 stevensc 165 
  const handleCloseChat = () => onClose(entity)
1 www 166 
 
167 
  const handleChatBoxKeyDown = async (e) => {
168 
    if (e.key === "Enter") {
169 
      e.preventDefault();
170 
      const message = e.target.value;
171 
      const formData = new FormData();
172 
      formData.append("message", emojione.toShort(message));
2181 stevensc 173 
      await axios.post(url_send, formData).then((response) => {
174 
        const resData = response.data;
175 
        if (resData.success) {
2188 stevensc 176 
          let newMessage = resData.data
2186 stevensc 177 
 
178 
          online
2188 stevensc 179 
            ? newMessage = { ...newMessage, not_received: false }
180 
            : newMessage = { ...newMessage, not_received: true }
2186 stevensc 181 
 
2189 stevensc 182 
          setMessages([...messages, newMessage])
2181 stevensc 183 
        }
184 
      });
1 www 185 
      e.target.value = "";
2189 stevensc 186 
      /* await handleGetMessages(); */
1 www 187 
      setShowEmojiTab(false);
1778 stevensc 188 
      setResponseMessage(null)
1 www 189 
    }
190 
  };
191 
 
192 
  const handleShowOptions = () => {
3131 stevensc 193 
    onMinimize(entity, false);
1 www 194 
    setShowOptions(!showOptions);
195 
  };
196 
 
197 
  const handleChangeTab = (tab) => {
198 
    setOptionTab(tab);
199 
  };
200 
 
201 
  const handleAddPersonToGroup = async (id) => {
202 
    const formData = new FormData();
203 
    formData.append("uid", id);
204 
    await axios.post(url_add_user_to_group, formData).then((response) => {
205 
      const resData = response.data;
206 
      if (resData.success) {
207 
        loadPersonsAvailable();
208 
      }
209 
    });
210 
  };
211 
 
212 
  const handleConfirmModalAction = async () => {
3122 stevensc 213 
    try {
3788 stevensc 214 
      const { data } = await axios.post(modalActionUrl.current)
3122 stevensc 215 
      if (!data.success) console.log('Error in confirm modal action')
3788 stevensc 216 
      handleConfirmModalShow()
217 
      onClose(entity);
218 
      return
3122 stevensc 219 
    } catch (error) {
220 
      console.log(error)
221 
    }
1 www 222 
  };
223 
 
224 
  const handleObserver = (entities) => {
225 
    const target = entities[0];
226 
    if (target.isIntersecting) {
227 
      setCurrentPage((prevState) => prevState + 1);
228 
    }
229 
  };
230 
 
231 
  const scrollToBottom = () => {
3056 stevensc 232 
    if (conversationListEl.current) {
1 www 233 
      conversationListEl.current.scrollTop =
234 
        conversationListEl.current.scrollHeight * 9;
235 
    }
236 
  };
237 
 
238 
  const scrollDownBy = (scrollDistance) => {
3056 stevensc 239 
    if (conversationListEl.current) {
976 stevensc 240 
      conversationListEl.current.scrollTop = scrollDistance;
1 www 241 
    }
242 
  };
243 
 
244 
  const handleShowEmojiTab = () => {
245 
    setShowEmojiTab(!showEmojiTab);
246 
    // smiley_tpl(`${id}`);
247 
  };
248 
 
249 
  const handleClickEmoji = (e) => {
250 
    const shortname = e.currentTarget.dataset.shortname;
251 
    const currentText = textAreaEl.current.value;
252 
    let cursorPosition = textAreaEl.current.selectionStart;
253 
    const textBehind = currentText.substring(0, cursorPosition);
254 
    const textForward = currentText.substring(cursorPosition);
255 
    const unicode = emojione.shortnameToUnicode(shortname);
256 
    textAreaEl.current.value = `${textBehind}${unicode}${textForward}`;
257 
    textAreaEl.current.focus();
258 
    textAreaEl.current.setSelectionRange(
259 
      cursorPosition + unicode.length,
260 
      cursorPosition + unicode.length
261 
    );
262 
  };
263 
 
264 
  // useEffect(() => {
265 
  //   setMessages([...oldMessages, ...newMessages]);
266 
  // }, [newMessages, oldMessages]);
267 
 
268 
  // getMessageOnMaximize and subscribe to infinite Loader
269 
  useEffect(async () => {
3090 stevensc 270 
    let options = {
271 
      root: null,
272 
      rootMargin: "20px",
273 
      treshold: 1.0,
274 
    };
275 
    const observer = new IntersectionObserver(handleObserver, options);
1 www 276 
    if (!minimized) {
277 
      await handleGetMessages();
278 
      // loader observer
279 
      if (loader.current) {
280 
        observer.observe(loader.current);
281 
      }
282 
    }
283 
    return () => {
284 
      if (loader.current) {
285 
        observer.unobserve(loader.current);
286 
      }
287 
    };
288 
  }, [minimized]);
289 
 
290 
  // LoadMore on change page
291 
  useEffect(() => {
932 stevensc 292 
    let loadMore = () => handleLoadMore();
928 stevensc 293 
    loadMore()
1 www 294 
    return () => {
295 
      loadMore = null;
296 
    };
297 
  }, [currentPage]);
298 
 
299 
  // getMessagesInterval
300 
  useEffect(() => {
932 stevensc 301 
    if (window.location.pathname === '/group/my-groups') {
38 steven 302 
      const items = document.getElementsByClassName('sc-jSgupP')
932 stevensc 303 
      if (items && items.length > 0)
304 
        items[0].style.display = 'none';
38 steven 305 
    }
3122 stevensc 306 
  }, [minimized]);
307 
 
308 
  useEffect(() => {
309 
    let timer;
3119 stevensc 310 
    if (!minimized && !loading) {
3122 stevensc 311 
      timer = setTimeout(() => handleGetMessages(), 1000);
1 www 312 
    }
3120 stevensc 313 
    return () => {
3122 stevensc 314 
      clearTimeout(timer);
315 
    };
3119 stevensc 316 
  }, [minimized, loading]);
3122 stevensc 317 
 
3788 stevensc 318 
  const handleConfirmModalShow = () => setConfirmModalShow(!confirmModalShow)
1 www 319 
 
3788 stevensc 320 
  const handleConfirmModalAccept = () => handleConfirmModalAction()
1 www 321 
 
322 
  const handleShareFileModalShow = () => {
323 
    setShareFileModalShow(!shareFileModalShow);
324 
  };
325 
 
1300 stevensc 326 
  const handleResponseMessage = (element) => {
3059 stevensc 327 
    element.mtype === 'text'
328 
      ? setResponseMessage(element)
329 
      : setResponseMessage({ ...element, m: 'Archivo adjunto' })
330 
 
2765 stevensc 331 
    textAreaEl.current && textAreaEl.current.focus()
1300 stevensc 332 
  };
333 
 
1 www 334 
  const messagesRender = () => {
335 
    return (
336 
      <React.Fragment>
337 
        {currentPage < pages ? <li ref={loader}>Cargando...</li> : ""}
338 
        {oldMessages.map((oldMessage) => (
3088 stevensc 339 
          <MessageTemplate time={oldMessage.time} key={oldMessage.id} message={oldMessage} />
1 www 340 
        ))}
1215 stevensc 341 
        {messages.map((message, i) => {
342 
          let currentTime = message.time;
1216 stevensc 343 
          let prevMessage = messages[i - 1];
2187 stevensc 344 
 
2537 stevensc 345 
          const dailys = ["mes", "meses", "semana", "semanas", "dia", 'dias', "año", "años"]
1215 stevensc 346 
          const date = new Date(Date.now()).toLocaleDateString()
347 
 
1216 stevensc 348 
          if (prevMessage !== undefined) {
349 
            let prevTime = messages[i - 1].time;
2181 stevensc 350 
 
1216 stevensc 351 
            if (prevTime !== currentTime && dailys.includes(prevTime.split(' ')[1])) {
352 
              return <>
2538 stevensc 353 
                {/* <h2 className="text-center date-chat">{date}</h2> */}
1298 stevensc 354 
                <MessageTemplate
3088 stevensc 355 
                  key={message.id}
1298 stevensc 356 
                  message={message}
3088 stevensc 357 
                  time={message.time}
1300 stevensc 358 
                  setResponseMessage={handleResponseMessage}
1298 stevensc 359 
                  responseMessage={responseMessage}
360 
                />
1216 stevensc 361 
              </>
362 
            }
1215 stevensc 363 
          }
364 
 
1300 stevensc 365 
          return <MessageTemplate
3088 stevensc 366 
            key={message.id}
1300 stevensc 367 
            message={message}
3088 stevensc 368 
            time={message.time}
1300 stevensc 369 
            setResponseMessage={handleResponseMessage}
370 
            responseMessage={responseMessage}
371 
          />
1215 stevensc 372 
        })}
1 www 373 
      </React.Fragment>
374 
    );
375 
  };
376 
 
377 
  const optionRender = () => {
378 
    switch (optionTab) {
379 
      case optionTabs.add_person_to_group:
380 
        return addPersonToGroupTab;
381 
      case optionTabs.group_contacts_list:
382 
        return groupContactsListTab;
383 
      default:
384 
        return optionsDefaultTab;
385 
    }
386 
  };
387 
 
388 
  // useEffect for tabs changing
389 
  useEffect(() => {
390 
    switch (optionTab) {
391 
      case optionTabs.add_person_to_group:
392 
        loadPersonsAvailable();
393 
        break;
394 
      case optionTabs.group_contacts_list:
395 
        loadGroupContacts();
396 
        break;
397 
    }
398 
  }, [optionTab]);
399 
 
400 
  const loadPersonsAvailable = async () => {
401 
    await axios.get(url_get_contacts_availables_for_group).then((response) => {
402 
      const resData = response.data;
403 
      if (resData.success) {
404 
        setAvailableContactsToAdd(resData.data);
405 
      }
406 
    });
407 
  };
408 
 
409 
  const loadGroupContacts = async () => {
410 
    await axios.get(url_get_contact_group_list).then((response) => {
411 
      const resData = response.data;
412 
      if (resData.success) {
413 
        setGroupContactsList(resData.data);
414 
      }
415 
    });
416 
  };
417 
 
418 
  const handleDeletePersonFromGroup = async (urlDeletePersonFromGroup) => {
419 
    await axios.post(urlDeletePersonFromGroup).then((response) => {
420 
      const resData = response.data;
421 
      if (resData.success) {
422 
        loadGroupContacts();
423 
      }
424 
    });
425 
  };
426 
 
427 
  const optionsDefaultTab = (
428 
    <React.Fragment>
429 
      <span className="optionBack" onClick={() => handleShowOptions()}>
430 
        <i className="fa icon-arrow-left"></i>
431 
      </span>
432 
      <div className="optionsTab">
433 
        <ul>
434 
          {!!url_get_contact_group_list && (
435 
            <li
436 
              className="optionsTab__option"
437 
              onClick={() => handleChangeTab(optionTabs.group_contacts_list)}
438 
            >
439 
              <span className="optionsTab__option__icon">
440 
                <i className="fa fa-group"></i>
441 
              </span>
442 
              Integrantes
443 
            </li>
444 
          )}
445 
          {!!url_add_user_to_group && (
446 
            <li
447 
              className="optionsTab__option"
448 
              onClick={() => handleChangeTab(optionTabs.add_person_to_group)}
449 
            >
450 
              <span className="optionsTab__option__icon">
451 
                <i className="fa fa-user-plus"></i>
452 
              </span>
453 
              Agregar contactos
454 
            </li>
455 
          )}
456 
          {!!url_delete && (
457 
            <li
458 
              className="optionsTab__option"
459 
              style={{ color: "red" }}
460 
              onClick={() => {
461 
                handleConfirmModalShow();
462 
                modalActionUrl.current = url_delete;
463 
              }}
464 
            >
465 
              <span className="optionsTab__option__icon">
466 
                <i className="fa fa-trash"></i>
467 
              </span>
468 
              Eliminar grupo
469 
            </li>
470 
          )}
471 
          {!!url_leave && (
472 
            <li
473 
              className="optionsTab__option"
474 
              style={{ color: "red" }}
475 
              onClick={() => {
476 
                handleConfirmModalShow();
477 
                modalActionUrl.current = url_leave;
478 
              }}
479 
            >
480 
              <span className="optionsTab__option__icon">
481 
                <i className="fa fa-user-times"></i>
482 
              </span>
483 
              Dejar grupo
484 
            </li>
485 
          )}
486 
        </ul>
487 
      </div>
488 
    </React.Fragment>
489 
  );
490 
 
491 
  const addPersonToGroupTab = (
492 
    <React.Fragment>
493 
      <span
494 
        className="optionBack"
495 
        onClick={() => handleChangeTab(optionTabs.default)}
496 
      >
497 
        <i className="fa icon-arrow-left"></i>
498 
      </span>
499 
      <div className="addPersonToGroupTab">
500 
        {availableContactsToAdd.length ? (
501 
          availableContactsToAdd.map(({ image, name, id }) => (
502 
            <div className="addPersonToGroupTab__person" key={id}>
2664 stevensc 503 
              <div className="d-inline-flex" style={{ gap: '5px' }}>
2663 stevensc 504 
                <img
505 
                  className="chat-image img-circle pull-left"
506 
                  height="36"
507 
                  width="36"
508 
                  src={image}
509 
                  alt="image-image"
510 
                />
511 
                <div className="name">{name}</div>
512 
              </div>
1 www 513 
              <span
514 
                style={{
515 
                  cursor: "pointer",
516 
                }}
517 
                onClick={() => {
518 
                  handleAddPersonToGroup(id);
519 
                }}
520 
              >
521 
                <i className="fa fa-plus-circle"></i>
522 
              </span>
523 
            </div>
524 
          ))
525 
        ) : (
526 
          <div className="addPersonToGroupTab__person">No hay Contactos</div>
527 
        )}
528 
      </div>
529 
    </React.Fragment>
530 
  );
531 
 
532 
  const groupContactsListTab = (
533 
    <React.Fragment>
534 
      <span
535 
        className="optionBack"
536 
        onClick={() => handleChangeTab(optionTabs.default)}
537 
      >
538 
        <i className="fa icon-arrow-left"></i>
539 
      </span>
540 
      <div className="addPersonToGroupTab">
541 
        {groupContactsList.length ? (
542 
          groupContactsList.map(
543 
            ({ image, name, url_remove_from_group, id }) => (
544 
              <div className="addPersonToGroupTab__person" key={id}>
545 
                <div style={{ display: "flex", alignItems: "center" }}>
546 
                  <img
547 
                    className="chat-image img-circle pull-left"
548 
                    height="36"
549 
                    width="36"
550 
                    src={image}
551 
                    alt="image-image"
552 
                  />
553 
                  <div className="name">{name}</div>
554 
                </div>
555 
                {url_remove_from_group && (
556 
                  <span
557 
                    style={{
558 
                      cursor: "pointer",
559 
                    }}
560 
                    onClick={() => {
561 
                      handleDeletePersonFromGroup(url_remove_from_group);
562 
                    }}
563 
                  >
564 
                    <i className="fa fa-user-times"></i>
565 
                  </span>
566 
                )}
567 
              </div>
568 
            )
569 
          )
570 
        ) : (
571 
          <div className="addPersonToGroupTab__person">No hay Contactos</div>
572 
        )}
573 
      </div>
574 
    </React.Fragment>
575 
  );
576 
 
577 
  const shareFileModal = (
578 
    <SendFileModal
579 
      show={shareFileModalShow}
580 
      onHide={() => {
581 
        setShareFileModalShow(false);
582 
      }}
583 
      urlUpload={url_upload}
584 
    />
585 
  );
586 
 
587 
  const userChat = (
588 
    <React.Fragment>
3752 stevensc 589 
      <div className="chatbox active-chat" style={{ display: 'block' }}>
1 www 590 
        <div className="chatbox-icon">
591 
          <div className="contact-floating red">
592 
            <img className="chat-image img-circle pull-left" src={image} />
593 
            <small className="unread-msg">2</small>
594 
          </div>
595 
        </div>
596 
        <div className="panel personal-chat">
597 
          <StyledChatHead>
3094 stevensc 598 
            <div className={`panel-heading chatboxhead ${not_seen_messages ? "notify" : ""}`}>
1 www 599 
              <div className="panel-title">
600 
                <img
601 
                  className="chat-image img-circle pull-left"
602 
                  height="36"
603 
                  width="36"
604 
                  src={image}
605 
                  alt="avatar-image"
606 
                />
607 
                <div className="header-elements">
3056 stevensc 608 
                  <a href={profile} target="_blank" rel="noreferrer">
1 www 609 
                    {name}
610 
                  </a>
611 
                  <br />
1188 stevensc 612 
                  <small className={`status ${online ? "Online" : "Offline"}`}>
613 
                    <b>{online ? "En línea" : "Desconectado"}</b>
1 www 614 
                  </small>
615 
                  <div className="pull-right options">
616 
                    <div
617 
                      className="btn-group uploadFile"
618 
                      id="uploadFile"
619 
                      data-client="'+chatboxtitle+'"
620 
                    >
621 
                      {/* <span>
622 
                      <i className="fa fa-trash"></i>
623 
                    </span> */}
624 
                    </div>
625 
                    <div
626 
                      className="btn-group"
932 stevensc 627 
                    // onClick="javascript:clearHistory(\''+chatboxtitle+'\')"
628 
                    // href="javascript:void(0)"
1 www 629 
                    >
630 
                      {/* <span>
631 
                      <i className="fa fa-trash"></i>
632 
                    </span> */}
633 
                    </div>
634 
                    <div
635 
                      className="btn-group"
932 stevensc 636 
                    // onClick="javascript:toggleChatBoxGrowth(\''+chatboxtitle+'\')"
637 
                    // href="javascript:void(0)"
1 www 638 
                    >
639 
                      <span>
640 
                        <i
641 
                          className={`fa fa-minus-circle`}
642 
                          onClick={handleActive}
643 
                        ></i>
644 
                      </span>
645 
                    </div>
646 
                    <div
647 
                      className="btn-group"
932 stevensc 648 
                    // onClick="javascript:closeChatBox(\''+chatboxtitle+'\')"
649 
                    // href="javascript:void(0)"
1 www 650 
                    >
651 
                      <span>
652 
                        <i
653 
                          className="fa fa-times-circle"
654 
                          onClick={handleCloseChat}
655 
                        ></i>
656 
                      </span>
657 
                    </div>
658 
                  </div>
659 
                </div>
660 
              </div>
661 
            </div>
662 
          </StyledChatHead>
663 
          <div
664 
            className="panel-body"
665 
            style={{ display: !minimized ? "block" : "none" }}
666 
          >
667 
            <div
668 
              id="uploader_'+chatboxtitle+'"
669 
              style={{ display: "none", height: "342px" }}
670 
            >
671 
              <p>
672 
                Your browser does not have Flash, Silverlight or HTML5 support.
673 
              </p>
674 
            </div>
675 
            <div className="chat-conversation" style={{ position: "relative" }}>
676 
              <div className="reverseChatBox" ref={conversationListEl}>
677 
                <ul
678 
                  className="conversation-list chatboxcontent"
679 
                  id="resultchat_'+chatboxtitle+'"
680 
                >
681 
                  {messagesRender()}
682 
                </ul>
683 
              </div>
3604 stevensc 684 
              <div className="wchat-footer wchat-chat-footer">
1301 stevensc 685 
                <div id="chatFrom" className="chatFrom">
2577 stevensc 686 
                  {
687 
                    responseMessage
688 
                    &&
689 
                    <div className={responseMessage ? "resp_messages-container active" : "resp_messages-container"}>
690 
                      <span>{`Respondiendo a ${responseMessage.user_name}`}</span>
691 
                      <p>{responseMessage.m}</p>
692 
                    </div>
693 
                  }
1 www 694 
                  <div className="block-wchat">
695 
                    <button
696 
                      className="icon ti-clip attachment font-24 btn-attach btn-attach uploadFile"
697 
                      id="uploadFile"
698 
                      onClick={handleShareFileModalShow}
699 
                    ></button>
700 
                    <button
701 
                      className="icon ti-face-smile font-24 btn-emoji"
702 
                      id="toggle-emoji"
703 
                      onClick={handleShowEmojiTab}
704 
                    ></button>
705 
                    <div className="input-container">
706 
                      <div className="input-emoji">
707 
                        <div
708 
                          className="input-placeholder"
709 
                          style={{ visibility: "hidden", display: "none" }}
710 
                        >
711 
                          Escribe un mensaje
712 
                        </div>
713 
                        <textarea
714 
                          className="input chatboxtextarea"
715 
                          id="chatboxtextarea"
716 
                          name="chattxt"
717 
                          style={{ resize: "none", height: "20px" }}
718 
                          placeholder="Escribe un mensaje"
719 
                          onKeyDown={handleChatBoxKeyDown}
720 
                          ref={textAreaEl}
3045 stevensc 721 
                          onBlur={() => responseMessage && setResponseMessage(null)}
3122 stevensc 722 
                          onFocus={() => not_seen_messages && onRead(entity)}
723 
                        />
1 www 724 
                        <input
725 
                          id="to_uname"
726 
                          name="to_uname"
727 
                          value="'+chatboxtitle+'"
728 
                          type="hidden"
729 
                        />
730 
                        <input
731 
                          id="from_uname"
732 
                          name="from_uname"
733 
                          value="Beenny"
734 
                          type="hidden"
735 
                        />
736 
                      </div>
737 
                    </div>
738 
                  </div>
739 
                </div>
740 
                <div className="wchat-box-items-positioning-container">
741 
                  <div className="wchat-box-items-overlay-container">
742 
                    <div
743 
                      className="target-emoji"
744 
                      style={{ display: showEmojiTab ? "block" : "none" }}
745 
                    >
746 
                      <div id={`smileyPanel_${id}`}>
747 
                        <div>
748 
                          <Emojione onClickEmoji={handleClickEmoji} />
749 
                        </div>
750 
                      </div>
751 
                    </div>
752 
                  </div>
753 
                </div>
754 
              </div>
755 
            </div>
756 
          </div>
757 
        </div>
758 
      </div>
759 
      {shareFileModal}
760 
    </React.Fragment>
761 
  );
762 
 
763 
  const groupChat = (
764 
    <React.Fragment>
765 
      <div
3752 stevensc 766 
        className="chatbox active-chat "
1 www 767 
        ref={chatboxEl}
768 
      >
769 
        <div className="chatbox-icon">
770 
          <div className="contact-floating red">
771 
            <img className="chat-image img-circle pull-left" src={image} />
772 
            <small className="unread-msg">2</small>
773 
          </div>
774 
        </div>
775 
        <div className="panel personal-chat">
776 
          <StyledChatHead>
3752 stevensc 777 
            <div className={`panel-heading chatboxhead ${not_seen_messages ? "notify" : ""}`}>
1 www 778 
              <div className="panel-title-group">
779 
                <img
780 
                  className="chat-image img-circle pull-left"
781 
                  height="36"
782 
                  width="36"
783 
                  src="/images/users-group.png"
784 
                  alt="avatar-image"
785 
                />
786 
                <div className="header-elements">
787 
                  <p>{name}</p>
788 
                  <br />
789 
                  <div className="pull-right options">
790 
                    <div
791 
                      className="btn-group uploadFile"
792 
                      id="uploadFile"
793 
                      data-client="'+chatboxtitle+'"
794 
                    >
795 
                    </div>
3752 stevensc 796 
                    <div className="btn-group">
1 www 797 
                    </div>
798 
                    <div
799 
                      className="btn-group addUser"
800 
                      data-client="8cb2a840-56c2-4f93-9cf1-27ad598acd8f"
801 
                      data-name="Grupo de jesus"
802 
                    >
803 
                      <span>
804 
                        <i
805 
                          className="fa fa-gear"
806 
                          onClick={handleShowOptions}
807 
                        ></i>
808 
                      </span>
809 
                    </div>
3752 stevensc 810 
                    <div className="btn-group">
1 www 811 
                      <span>
812 
                        <i
813 
                          className={`fa fa-minus-circle`}
814 
                          onClick={handleActive}
815 
                        ></i>
816 
                      </span>
817 
                    </div>
3752 stevensc 818 
                    <div className="btn-group">
1 www 819 
                      <span>
820 
                        <i
821 
                          className="fa fa-times-circle"
822 
                          onClick={handleCloseChat}
823 
                        ></i>
824 
                      </span>
825 
                    </div>
826 
                  </div>
827 
                </div>
828 
              </div>
829 
            </div>
830 
          </StyledChatHead>
831 
          <div
832 
            className="panel-body"
833 
            style={{ display: !minimized ? "block" : "none" }}
834 
          >
835 
            <StyledShowOptions className={` ${showOptions ? "show" : "hide"}`}>
836 
              {optionRender()}
837 
            </StyledShowOptions>
838 
 
839 
            <div
840 
              className="chat-conversation"
841 
              style={{
842 
                display: showOptions ? "none" : "block",
843 
                position: "relative",
844 
              }}
845 
            >
846 
              <div className="reverseChatBox" ref={conversationListEl}>
847 
                <ul
848 
                  className="conversation-list chatboxcontent"
849 
                  id="resultchat_'+chatboxtitle+'"
850 
                >
851 
                  {messagesRender()}
852 
                </ul>
853 
              </div>
3604 stevensc 854 
              <div className="wchat-footer wchat-chat-footer">
1 www 855 
                <div id="chatFrom">
856 
                  <div className="block-wchat">
857 
                    <button
858 
                      className="icon ti-clip attachment font-24 btn-attach btn-attach uploadFile"
859 
                      id="uploadFile"
860 
                      onClick={handleShareFileModalShow}
861 
                    ></button>
862 
                    <button
863 
                      className="icon ti-face-smile font-24 btn-emoji"
864 
                      id="toggle-emoji"
865 
                      onClick={handleShowEmojiTab}
866 
                    ></button>
867 
                    <div className="input-container">
868 
                      <div className="input-emoji">
869 
                        <div
870 
                          className="input-placeholder"
871 
                          style={{ visibility: "hidden", display: "none" }}
872 
                        >
873 
                          Escribe un mensaje
874 
                        </div>
875 
                        <textarea
876 
                          className="input chatboxtextarea"
877 
                          id="chatboxtextarea"
878 
                          name="chattxt"
879 
                          style={{ resize: "none", height: "20px" }}
880 
                          placeholder="Escribe un mensaje"
881 
                          onKeyDown={handleChatBoxKeyDown}
882 
                          ref={textAreaEl}
3122 stevensc 883 
                          onFocus={() => not_seen_messages && onRead(entity)}
3045 stevensc 884 
                          onBlur={() => responseMessage && setResponseMessage(null)}
1 www 885 
                        ></textarea>
886 
                        <input
887 
                          id="to_uname"
888 
                          name="to_uname"
889 
                          value="'+chatboxtitle+'"
890 
                          type="hidden"
891 
                        />
892 
                        <input
893 
                          id="from_uname"
894 
                          name="from_uname"
895 
                          value="Beenny"
896 
                          type="hidden"
897 
                        />
898 
                      </div>
899 
                    </div>
900 
                  </div>
901 
                </div>
902 
                <div className="wchat-box-items-positioning-container">
903 
                  <div className="wchat-box-items-overlay-container">
904 
                    <div
905 
                      className="target-emoji"
906 
                      style={{ display: showEmojiTab ? "block" : "none" }}
907 
                    >
908 
                      <div id={`smileyPanel_${id}`}>
909 
                        <div>
910 
                          <Emojione onClickEmoji={handleClickEmoji} />
911 
                        </div>
912 
                      </div>
913 
                    </div>
914 
                  </div>
915 
                </div>
916 
              </div>
917 
            </div>
918 
          </div>
919 
        </div>
920 
      </div>
921 
      <ConfirmModal
922 
        show={confirmModalShow}
923 
        onClose={handleConfirmModalShow}
924 
        onAccept={handleConfirmModalAccept}
925 
      />
926 
      {shareFileModal}
927 
    </React.Fragment>
928 
  );
929 
 
930 
  switch (type) {
931 
    case "user":
932 
      return userChat;
933 
    case "group":
934 
      return groupChat;
935 
    default:
936 
      break;
937 
  }
938 
};
939 
 
3133 stevensc 940 
export default React.memo(PersonalChat);