Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 948 | Rev 986 | 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 () => {
934 stevensc 183 
    console.log('loading')
936 stevensc 184 
    /* await axios.get(url_get_all_messages, {
934 stevensc 185 
      params: {
186 
        page: currentPage,
187 
      },
936 stevensc 188 
    }) */
189 
    await axios.get(`${url_get_all_messages}?page=${currentPage}`)
1 www 190 
      .then((response) => {
191 
        const resData = response.data;
192 
        if (resData.success) {
193 
          if (resData.data.page > 1) {
194 
            const updatedOldMessages = [...resData.data.items].reverse();
195 
            setOldMessages([...updatedOldMessages, ...oldMessages]);
948 stevensc 196 
            scrollDownBy(100);
1 www 197 
          }
198 
        }
199 
      });
200 
  };
201 
 
202 
  const handleCloseChat = () => {
203 
    onClose(id, url_close);
204 
  };
205 
 
206 
  const handleChatBoxKeyDown = async (e) => {
207 
    if (e.key === "Enter") {
208 
      e.preventDefault();
209 
      const message = e.target.value;
210 
      const formData = new FormData();
211 
      formData.append("message", emojione.toShort(message));
212 
      await axios.post(url_send, formData).then((response) => {
213 
        const resData = response.data;
214 
        if (resData.success) {
215 
        }
216 
      });
217 
      e.target.value = "";
218 
      await handleGetMessages();
219 
      setShowEmojiTab(false);
220 
    }
221 
  };
222 
 
223 
  const handleShowOptions = () => {
224 
    onMinimize(index, false);
225 
    setShowOptions(!showOptions);
226 
  };
227 
 
228 
  const handleChangeTab = (tab) => {
229 
    setOptionTab(tab);
230 
  };
231 
 
232 
  const handleAddPersonToGroup = async (id) => {
233 
    const formData = new FormData();
234 
    formData.append("uid", id);
235 
    await axios.post(url_add_user_to_group, formData).then((response) => {
236 
      const resData = response.data;
237 
      if (resData.success) {
238 
        loadPersonsAvailable();
239 
      }
240 
    });
241 
  };
242 
 
243 
  const handleConfirmModalAction = async () => {
244 
    await axios.post(modalActionUrl.current).then((response) => {
245 
      const resData = response.data;
246 
      if (resData.success) {
247 
      }
248 
    });
249 
    await onClose(id, url_close);
250 
  };
251 
 
252 
  const handleObserver = (entities) => {
253 
    const target = entities[0];
254 
    if (target.isIntersecting) {
255 
      setCurrentPage((prevState) => prevState + 1);
256 
    }
257 
  };
258 
 
259 
  const scrollToBottom = () => {
260 
    if (!!conversationListEl.current) {
261 
      conversationListEl.current.scrollTop =
262 
        conversationListEl.current.scrollHeight * 9;
263 
    }
264 
  };
265 
 
266 
  const scrollDownBy = (scrollDistance) => {
267 
    if (!!conversationListEl.current) {
976 stevensc 268 
      conversationListEl.current.scrollTop = scrollDistance;
1 www 269 
    }
270 
  };
271 
 
272 
  const handleShowEmojiTab = () => {
273 
    setShowEmojiTab(!showEmojiTab);
274 
    // smiley_tpl(`${id}`);
275 
  };
276 
 
277 
  const handleClickEmoji = (e) => {
278 
    const shortname = e.currentTarget.dataset.shortname;
279 
    const currentText = textAreaEl.current.value;
280 
    let cursorPosition = textAreaEl.current.selectionStart;
281 
    const textBehind = currentText.substring(0, cursorPosition);
282 
    const textForward = currentText.substring(cursorPosition);
283 
    const unicode = emojione.shortnameToUnicode(shortname);
284 
    textAreaEl.current.value = `${textBehind}${unicode}${textForward}`;
285 
    textAreaEl.current.focus();
286 
    textAreaEl.current.setSelectionRange(
287 
      cursorPosition + unicode.length,
288 
      cursorPosition + unicode.length
289 
    );
290 
  };
291 
 
292 
  // useEffect(() => {
293 
  //   setMessages([...oldMessages, ...newMessages]);
294 
  // }, [newMessages, oldMessages]);
295 
 
296 
  // getMessageOnMaximize and subscribe to infinite Loader
297 
  useEffect(async () => {
298 
    if (!minimized) {
299 
      await handleGetMessages();
300 
      // loader observer
301 
      let options = {
302 
        root: null,
303 
        rootMargin: "20px",
304 
        treshold: 1.0,
305 
      };
306 
      const observer = new IntersectionObserver(handleObserver, options);
307 
      if (loader.current) {
308 
        observer.observe(loader.current);
309 
      }
310 
    }
311 
    return () => {
312 
      if (loader.current) {
313 
        observer.unobserve(loader.current);
314 
      }
315 
    };
316 
  }, [minimized]);
317 
 
318 
  // LoadMore on change page
319 
  useEffect(() => {
932 stevensc 320 
    let loadMore = () => handleLoadMore();
928 stevensc 321 
    loadMore()
934 stevensc 322 
    console.log('Try')
1 www 323 
    return () => {
324 
      loadMore = null;
325 
    };
326 
  }, [currentPage]);
327 
 
328 
  // getMessagesInterval
329 
  useEffect(() => {
932 stevensc 330 
    if (window.location.pathname === '/group/my-groups') {
38 steven 331 
      const items = document.getElementsByClassName('sc-jSgupP')
932 stevensc 332 
      if (items && items.length > 0)
333 
        items[0].style.display = 'none';
38 steven 334 
    }
1 www 335 
    if (!minimized) {
336 
      clearInterval(getMessageInterval);
337 
      getMessageInterval = setInterval(() => {
338 
        handleGetMessages();
339 
      }, 1000);
340 
    } else {
341 
      clearInterval(getMessageInterval);
342 
    }
343 
    return () => {
344 
      clearInterval(getMessageInterval);
345 
    };
33 steven 346 
  });
1 www 347 
 
348 
  const handleConfirmModalShow = () => {
349 
    setConfirmModalShow(!confirmModalShow);
350 
  };
351 
 
352 
  const handleConfirmModalAccept = () => {
353 
    handleConfirmModalAction();
354 
  };
355 
 
356 
  const handleShareFileModalShow = () => {
357 
    setShareFileModalShow(!shareFileModalShow);
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) => (
368 
          <MessageTemplate message={message} />
369 
        ))}
370 
      </React.Fragment>
371 
    );
372 
  };
373 
 
374 
  const optionRender = () => {
375 
    switch (optionTab) {
376 
      case optionTabs.add_person_to_group:
377 
        return addPersonToGroupTab;
378 
      case optionTabs.group_contacts_list:
379 
        return groupContactsListTab;
380 
      default:
381 
        return optionsDefaultTab;
382 
    }
383 
  };
384 
 
385 
  // useEffect for tabs changing
386 
  useEffect(() => {
387 
    switch (optionTab) {
388 
      case optionTabs.add_person_to_group:
389 
        loadPersonsAvailable();
390 
        break;
391 
      case optionTabs.group_contacts_list:
392 
        loadGroupContacts();
393 
      default:
394 
        break;
395 
    }
396 
  }, [optionTab]);
397 
 
398 
  const loadPersonsAvailable = async () => {
399 
    setOptionsLoading(true);
400 
    await axios.get(url_get_contacts_availables_for_group).then((response) => {
401 
      const resData = response.data;
402 
      if (resData.success) {
403 
        setAvailableContactsToAdd(resData.data);
404 
      }
405 
    });
406 
    setOptionsLoading(false);
407 
  };
408 
 
409 
  const loadGroupContacts = async () => {
410 
    setOptionsLoading(true);
411 
    await axios.get(url_get_contact_group_list).then((response) => {
412 
      const resData = response.data;
413 
      if (resData.success) {
414 
        setGroupContactsList(resData.data);
415 
      }
416 
    });
417 
    setOptionsLoading(false);
418 
  };
419 
 
420 
  const handleDeletePersonFromGroup = async (urlDeletePersonFromGroup) => {
421 
    await axios.post(urlDeletePersonFromGroup).then((response) => {
422 
      const resData = response.data;
423 
      if (resData.success) {
424 
        loadGroupContacts();
425 
      }
426 
    });
427 
  };
428 
 
429 
  const optionsDefaultTab = (
430 
    <React.Fragment>
431 
      <span className="optionBack" onClick={() => handleShowOptions()}>
432 
        <i className="fa icon-arrow-left"></i>
433 
      </span>
434 
      <div className="optionsTab">
435 
        <ul>
436 
          {!!url_get_contact_group_list && (
437 
            <li
438 
              className="optionsTab__option"
439 
              onClick={() => handleChangeTab(optionTabs.group_contacts_list)}
440 
            >
441 
              <span className="optionsTab__option__icon">
442 
                <i className="fa fa-group"></i>
443 
              </span>
444 
              Integrantes
445 
            </li>
446 
          )}
447 
          {!!url_add_user_to_group && (
448 
            <li
449 
              className="optionsTab__option"
450 
              onClick={() => handleChangeTab(optionTabs.add_person_to_group)}
451 
            >
452 
              <span className="optionsTab__option__icon">
453 
                <i className="fa fa-user-plus"></i>
454 
              </span>
455 
              Agregar contactos
456 
            </li>
457 
          )}
458 
          {!!url_delete && (
459 
            <li
460 
              className="optionsTab__option"
461 
              style={{ color: "red" }}
462 
              onClick={() => {
463 
                handleConfirmModalShow();
464 
                modalActionUrl.current = url_delete;
465 
              }}
466 
            >
467 
              <span className="optionsTab__option__icon">
468 
                <i className="fa fa-trash"></i>
469 
              </span>
470 
              Eliminar grupo
471 
            </li>
472 
          )}
473 
          {!!url_leave && (
474 
            <li
475 
              className="optionsTab__option"
476 
              style={{ color: "red" }}
477 
              onClick={() => {
478 
                handleConfirmModalShow();
479 
                modalActionUrl.current = url_leave;
480 
              }}
481 
            >
482 
              <span className="optionsTab__option__icon">
483 
                <i className="fa fa-user-times"></i>
484 
              </span>
485 
              Dejar grupo
486 
            </li>
487 
          )}
488 
        </ul>
489 
      </div>
490 
    </React.Fragment>
491 
  );
492 
 
493 
  const addPersonToGroupTab = (
494 
    <React.Fragment>
495 
      <span
496 
        className="optionBack"
497 
        onClick={() => handleChangeTab(optionTabs.default)}
498 
      >
499 
        <i className="fa icon-arrow-left"></i>
500 
      </span>
501 
      <div className="addPersonToGroupTab">
502 
        {availableContactsToAdd.length ? (
503 
          availableContactsToAdd.map(({ image, name, id }) => (
504 
            <div className="addPersonToGroupTab__person" key={id}>
505 
              <img
506 
                className="chat-image img-circle pull-left"
507 
                height="36"
508 
                width="36"
509 
                src={image}
510 
                alt="image-image"
511 
              />
512 
              <div className="name">{name}</div>
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>
589 
      <div
590 
        className="chatbox active-chat"
591 
        style={{
592 
          bottom: "0px",
593 
          right: `${(index + 1) * 295}px`,
11 steven 594 
          zIndex: "1",
1 www 595 
          display: "block",
596 
        }}
597 
      >
598 
        <div className="chatbox-icon">
599 
          <div className="contact-floating red">
600 
            <img className="chat-image img-circle pull-left" src={image} />
601 
            <small className="unread-msg">2</small>
602 
            {/* <small className="status"'+ status+'></small> */}
603 
          </div>
604 
        </div>
605 
        <div className="panel personal-chat">
606 
          <StyledChatHead>
607 
            <div
932 stevensc 608 
              className={`panel-heading chatboxhead ${unsee_messages ? "notify" : ""
609 
                }`}
1 www 610 
            >
611 
              <div className="panel-title">
612 
                <img
613 
                  className="chat-image img-circle pull-left"
614 
                  height="36"
615 
                  width="36"
616 
                  src={image}
617 
                  alt="avatar-image"
618 
                />
619 
                <div className="header-elements">
620 
                  <a href={profile} target="_blank">
621 
                    {name}
622 
                  </a>
623 
                  <br />
624 
                  <small className={`status ${online ? "Online" : "Offline"}`}>
625 
                    <b>{online ? "Online" : "Offline"}</b>
626 
                  </small>
627 
                  <div className="pull-right options">
628 
                    <div
629 
                      className="btn-group uploadFile"
630 
                      id="uploadFile"
631 
                      data-client="'+chatboxtitle+'"
632 
                    >
633 
                      {/* <span>
634 
                      <i className="fa fa-trash"></i>
635 
                    </span> */}
636 
                    </div>
637 
                    <div
638 
                      className="btn-group"
932 stevensc 639 
                    // onClick="javascript:clearHistory(\''+chatboxtitle+'\')"
640 
                    // href="javascript:void(0)"
1 www 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:toggleChatBoxGrowth(\''+chatboxtitle+'\')"
649 
                    // href="javascript:void(0)"
1 www 650 
                    >
651 
                      <span>
652 
                        <i
653 
                          className={`fa fa-minus-circle`}
654 
                          onClick={handleActive}
655 
                        ></i>
656 
                      </span>
657 
                    </div>
658 
                    <div
659 
                      className="btn-group"
932 stevensc 660 
                    // onClick="javascript:closeChatBox(\''+chatboxtitle+'\')"
661 
                    // href="javascript:void(0)"
1 www 662 
                    >
663 
                      <span>
664 
                        <i
665 
                          className="fa fa-times-circle"
666 
                          onClick={handleCloseChat}
667 
                        ></i>
668 
                      </span>
669 
                    </div>
670 
                  </div>
671 
                </div>
672 
              </div>
673 
            </div>
674 
          </StyledChatHead>
675 
          <div
676 
            className="panel-body"
677 
            style={{ display: !minimized ? "block" : "none" }}
678 
          >
679 
            <div
680 
              id="uploader_'+chatboxtitle+'"
681 
              style={{ display: "none", height: "342px" }}
682 
            >
683 
              <p>
684 
                Your browser does not have Flash, Silverlight or HTML5 support.
685 
              </p>
686 
            </div>
687 
            <div className="chat-conversation" style={{ position: "relative" }}>
688 
              <div className="reverseChatBox" ref={conversationListEl}>
689 
                <ul
690 
                  className="conversation-list chatboxcontent"
691 
                  id="resultchat_'+chatboxtitle+'"
692 
                >
693 
                  {messagesRender()}
694 
                </ul>
695 
              </div>
696 
              <div className="wchat-footer wchat-chat-footer chatboxinput">
697 
                <div id="chatFrom">
698 
                  <div className="block-wchat">
699 
                    <button
700 
                      className="icon ti-clip attachment font-24 btn-attach btn-attach uploadFile"
701 
                      id="uploadFile"
702 
                      onClick={handleShareFileModalShow}
703 
                    ></button>
704 
                    <button
705 
                      className="icon ti-face-smile font-24 btn-emoji"
706 
                      id="toggle-emoji"
707 
                      onClick={handleShowEmojiTab}
708 
                    ></button>
709 
                    <div className="input-container">
710 
                      <div className="input-emoji">
711 
                        <div
712 
                          className="input-placeholder"
713 
                          style={{ visibility: "hidden", display: "none" }}
714 
                        >
715 
                          Escribe un mensaje
716 
                        </div>
717 
                        <textarea
718 
                          className="input chatboxtextarea"
719 
                          id="chatboxtextarea"
720 
                          name="chattxt"
721 
                          style={{ resize: "none", height: "20px" }}
722 
                          placeholder="Escribe un mensaje"
723 
                          onKeyDown={handleChatBoxKeyDown}
724 
                          ref={textAreaEl}
725 
                        ></textarea>
726 
                        <input
727 
                          id="to_uname"
728 
                          name="to_uname"
729 
                          value="'+chatboxtitle+'"
730 
                          type="hidden"
731 
                        />
732 
                        <input
733 
                          id="from_uname"
734 
                          name="from_uname"
735 
                          value="Beenny"
736 
                          type="hidden"
737 
                        />
738 
                      </div>
739 
                    </div>
740 
                  </div>
741 
                </div>
742 
                <div className="wchat-box-items-positioning-container">
743 
                  <div className="wchat-box-items-overlay-container">
744 
                    <div
745 
                      className="target-emoji"
746 
                      style={{ display: showEmojiTab ? "block" : "none" }}
747 
                    >
748 
                      <div id={`smileyPanel_${id}`}>
749 
                        <div>
750 
                          <Emojione onClickEmoji={handleClickEmoji} />
751 
                        </div>
752 
                      </div>
753 
                    </div>
754 
                  </div>
755 
                </div>
756 
              </div>
757 
            </div>
758 
          </div>
759 
        </div>
760 
      </div>
761 
      {shareFileModal}
762 
    </React.Fragment>
763 
  );
764 
 
765 
  const groupChat = (
766 
    <React.Fragment>
767 
      <div
768 
        className="chatbox active-chat"
769 
        style={{
770 
          bottom: "0px",
771 
          right: `${(index + 1) * 295}px`,
772 
          zIndes: "1",
773 
          display: "block",
774 
        }}
775 
        id={`chatbox_${id}`}
776 
        ref={chatboxEl}
777 
      >
778 
        <div className="chatbox-icon">
779 
          <div className="contact-floating red">
780 
            <img className="chat-image img-circle pull-left" src={image} />
781 
            <small className="unread-msg">2</small>
782 
            {/* <small className="status"'+ status+'></small> */}
783 
          </div>
784 
        </div>
785 
        <div className="panel personal-chat">
786 
          <StyledChatHead>
787 
            <div
932 stevensc 788 
              className={`panel-heading chatboxhead ${unsee_messages ? "notify" : ""
789 
                }`}
1 www 790 
            >
791 
              <div className="panel-title-group">
792 
                <img
793 
                  className="chat-image img-circle pull-left"
794 
                  height="36"
795 
                  width="36"
796 
                  src="/images/users-group.png"
797 
                  alt="avatar-image"
798 
                />
799 
                <div className="header-elements">
800 
                  <p>{name}</p>
801 
                  <br />
802 
                  <div className="pull-right options">
803 
                    <div
804 
                      className="btn-group uploadFile"
805 
                      id="uploadFile"
806 
                      data-client="'+chatboxtitle+'"
807 
                    >
808 
                      {/* <span>
809 
                      <i className="fa fa-trash"></i>
810 
                    </span> */}
811 
                    </div>
812 
                    <div
813 
                      className="btn-group"
932 stevensc 814 
                    // onClick="javascript:clearHistory(\''+chatboxtitle+'\')"
815 
                    // href="javascript:void(0)"
1 www 816 
                    >
817 
                      {/* <span>
818 
                      <i className="fa fa-trash"></i>
819 
                    </span> */}
820 
                    </div>
821 
                    <div
822 
                      className="btn-group addUser"
823 
                      data-client="8cb2a840-56c2-4f93-9cf1-27ad598acd8f"
824 
                      data-name="Grupo de jesus"
825 
                    >
826 
                      <span>
827 
                        <i
828 
                          // className="fa fa-user-plus"
829 
                          className="fa fa-gear"
830 
                          onClick={handleShowOptions}
831 
                        ></i>
832 
                      </span>
833 
                    </div>
834 
                    <div
835 
                      className="btn-group"
932 stevensc 836 
                    // onClick="javascript:toggleChatBoxGrowth(\''+chatboxtitle+'\')"
837 
                    // href="javascript:void(0)"
1 www 838 
                    >
839 
                      <span>
840 
                        <i
841 
                          className={`fa fa-minus-circle`}
842 
                          onClick={handleActive}
843 
                        ></i>
844 
                      </span>
845 
                    </div>
846 
                    <div
847 
                      className="btn-group"
932 stevensc 848 
                    // onClick="javascript:closeChatBox(\''+chatboxtitle+'\')"
849 
                    // href="javascript:void(0)"
1 www 850 
                    >
851 
                      <span>
852 
                        <i
853 
                          className="fa fa-times-circle"
854 
                          onClick={handleCloseChat}
855 
                        ></i>
856 
                      </span>
857 
                    </div>
858 
                  </div>
859 
                </div>
860 
              </div>
861 
            </div>
862 
          </StyledChatHead>
863 
          <div
864 
            className="panel-body"
865 
            style={{ display: !minimized ? "block" : "none" }}
866 
          >
867 
            <StyledShowOptions className={` ${showOptions ? "show" : "hide"}`}>
868 
              {optionRender()}
869 
            </StyledShowOptions>
870 
 
871 
            <div
872 
              className="chat-conversation"
873 
              style={{
874 
                display: showOptions ? "none" : "block",
875 
                position: "relative",
876 
              }}
877 
            >
878 
              <div className="reverseChatBox" ref={conversationListEl}>
879 
                <ul
880 
                  className="conversation-list chatboxcontent"
881 
                  id="resultchat_'+chatboxtitle+'"
882 
                >
883 
                  {messagesRender()}
884 
                </ul>
885 
              </div>
886 
              <div className="wchat-footer wchat-chat-footer chatboxinput">
887 
                <div id="chatFrom">
888 
                  <div className="block-wchat">
889 
                    <button
890 
                      className="icon ti-clip attachment font-24 btn-attach btn-attach uploadFile"
891 
                      id="uploadFile"
892 
                      onClick={handleShareFileModalShow}
893 
                    ></button>
894 
                    <button
895 
                      className="icon ti-face-smile font-24 btn-emoji"
896 
                      id="toggle-emoji"
897 
                      onClick={handleShowEmojiTab}
898 
                    ></button>
899 
                    <div className="input-container">
900 
                      <div className="input-emoji">
901 
                        <div
902 
                          className="input-placeholder"
903 
                          style={{ visibility: "hidden", display: "none" }}
904 
                        >
905 
                          Escribe un mensaje
906 
                        </div>
907 
                        <textarea
908 
                          className="input chatboxtextarea"
909 
                          id="chatboxtextarea"
910 
                          name="chattxt"
911 
                          style={{ resize: "none", height: "20px" }}
912 
                          placeholder="Escribe un mensaje"
913 
                          onKeyDown={handleChatBoxKeyDown}
914 
                          ref={textAreaEl}
915 
                        ></textarea>
916 
                        <input
917 
                          id="to_uname"
918 
                          name="to_uname"
919 
                          value="'+chatboxtitle+'"
920 
                          type="hidden"
921 
                        />
922 
                        <input
923 
                          id="from_uname"
924 
                          name="from_uname"
925 
                          value="Beenny"
926 
                          type="hidden"
927 
                        />
928 
                      </div>
929 
                    </div>
930 
                  </div>
931 
                </div>
932 
                <div className="wchat-box-items-positioning-container">
933 
                  <div className="wchat-box-items-overlay-container">
934 
                    <div
935 
                      className="target-emoji"
936 
                      style={{ display: showEmojiTab ? "block" : "none" }}
937 
                    >
938 
                      <div id={`smileyPanel_${id}`}>
939 
                        <div>
940 
                          <Emojione onClickEmoji={handleClickEmoji} />
941 
                        </div>
942 
                      </div>
943 
                    </div>
944 
                  </div>
945 
                </div>
946 
              </div>
947 
            </div>
948 
          </div>
949 
        </div>
950 
      </div>
951 
      <ConfirmModal
952 
        show={confirmModalShow}
953 
        onClose={handleConfirmModalShow}
954 
        onAccept={handleConfirmModalAccept}
955 
      />
956 
      {shareFileModal}
957 
    </React.Fragment>
958 
  );
959 
 
960 
  switch (type) {
961 
    case "user":
962 
      return userChat;
963 
    case "group":
964 
      return groupChat;
965 
    default:
966 
      break;
967 
  }
968 
};
969 
 
970 
export default PersonalChat;