Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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