Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 14176 | Ir a la última revisión | | Ultima modificación | Ver Log |

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