Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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