Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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