Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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