Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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