Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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