Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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