Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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