Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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