Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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