Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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