Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 3788 | Rev 4116 | 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 */
4115 stevensc 2 
import React, { Children } from "react";
1 www 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";
4115 stevensc 10 
import { Button, Modal } from "react-bootstrap";
11 
import Spinner from "../../../shared/loading-spinner/Spinner";
12 
import { useForm } from "react-hook-form";
13 
import FormErrorFeedback from "../../../shared/form-error-feedback/FormErrorFeedback";
1 www 14 
 
15 
const StyledChatHead = styled.div`
16 
  .notify {
17 
    animation: notify 2s infinite;
18 
  }
19 
 
20 
  @keyframes notify {
21 
    0% {
22 
      background-color: unset;
23 
    }
24 
    50% {
25 
      background-color: #00b0ff;
26 
    }
27 
    100% {
28 
      background-color: unset;
29 
    }
30 
  }
31 
`;
32 
 
33 
const StyledShowOptions = styled.div`
34 
  height: 342px;
35 
  flex-direction: column;
36 
  overflow-y: auto;
37 
  position: relative;
38 
  &.show {
39 
    display: flex;
40 
  }
41 
  &.hide {
42 
    display: none;
43 
  }
44 
  .optionBack {
45 
    margin: 1rem 0 0.5rem 1rem;
46 
    cursor: pointer;
47 
  }
48 
  .optionsTab {
49 
    &__option {
50 
      padding: 0.5rem;
51 
      border-bottom: 1px solid #e2e2e2;
52 
      cursor: pointer;
53 
      &:hover {
54 
        background-color: #e2e2e2;
55 
      }
56 
      &__icon {
57 
        margin-right: 0.3rem;
58 
      }
59 
    }
60 
  }
61 
  .addPersonToGroupTab {
62 
    display: flex;
63 
    flex-direction: column;
64 
    &__person {
65 
      display: flex;
66 
      justify-content: space-between;
67 
      align-items: center;
68 
      padding: 0.2rem 0.5rem;
69 
      border-bottom: 1px solid #e2e2e2;
70 
    }
71 
  }
72 
`;
73 
 
4115 stevensc 74 
const PersonalChat = ({ entity, 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);
4115 stevensc 108 
  const [showConferenceModal, setShowConferenceModal] = useState(false);
3122 stevensc 109 
  const [loading, setLoading] = useState(false);
1 www 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 
  const handleActive = () => {
3122 stevensc 126 
    onRead(entity);
3123 stevensc 127 
    onMinimize(entity);
1 www 128 
  };
129 
 
130 
  const handleGetMessages = async () => {
3122 stevensc 131 
    setLoading(true)
1 www 132 
    const response = await axios.get(url_get_all_messages);
133 
    const resData = response.data;
134 
    if (!resData.success) {
932 stevensc 135 
      return ("ha ocurrido un error", resData);
1 www 136 
    }
137 
    const updatedMessages = [...resData.data.items].reverse();
138 
    const newMessages = updatedMessages.reduce((acum, updatedMessage) => {
3089 stevensc 139 
      if (messages.findIndex((message) => message.id === updatedMessage.id) === -1) {
1 www 140 
        acum = [...acum, updatedMessage];
141 
      }
142 
      return acum;
143 
    }, []);
3089 stevensc 144 
 
1 www 145 
    if (newMessages.length > 0) {
146 
      setMessages([...messages, ...newMessages]);
3122 stevensc 147 
      setLoading(false)
1 www 148 
      setPages(resData.data.pages);
149 
      scrollToBottom();
3090 stevensc 150 
    } else {
3089 stevensc 151 
      setMessages([...updatedMessages]);
3122 stevensc 152 
      setLoading(false)
1 www 153 
    }
154 
  };
155 
 
156 
  const handleLoadMore = async () => {
936 stevensc 157 
    await axios.get(`${url_get_all_messages}?page=${currentPage}`)
1 www 158 
      .then((response) => {
159 
        const resData = response.data;
160 
        if (resData.success) {
161 
          if (resData.data.page > 1) {
162 
            const updatedOldMessages = [...resData.data.items].reverse();
163 
            setOldMessages([...updatedOldMessages, ...oldMessages]);
986 stevensc 164 
            /* scrollDownBy(100); */
1 www 165 
          }
166 
        }
167 
      });
168 
  };
169 
 
3122 stevensc 170 
  const handleCloseChat = () => onClose(entity)
1 www 171 
 
172 
  const handleChatBoxKeyDown = async (e) => {
173 
    if (e.key === "Enter") {
174 
      e.preventDefault();
175 
      const message = e.target.value;
176 
      const formData = new FormData();
177 
      formData.append("message", emojione.toShort(message));
2181 stevensc 178 
      await axios.post(url_send, formData).then((response) => {
179 
        const resData = response.data;
180 
        if (resData.success) {
2188 stevensc 181 
          let newMessage = resData.data
2186 stevensc 182 
 
183 
          online
2188 stevensc 184 
            ? newMessage = { ...newMessage, not_received: false }
185 
            : newMessage = { ...newMessage, not_received: true }
2186 stevensc 186 
 
2189 stevensc 187 
          setMessages([...messages, newMessage])
2181 stevensc 188 
        }
189 
      });
1 www 190 
      e.target.value = "";
2189 stevensc 191 
      /* await handleGetMessages(); */
1 www 192 
      setShowEmojiTab(false);
1778 stevensc 193 
      setResponseMessage(null)
1 www 194 
    }
195 
  };
196 
 
197 
  const handleShowOptions = () => {
3131 stevensc 198 
    onMinimize(entity, false);
1 www 199 
    setShowOptions(!showOptions);
200 
  };
201 
 
202 
  const handleChangeTab = (tab) => {
203 
    setOptionTab(tab);
204 
  };
205 
 
206 
  const handleAddPersonToGroup = async (id) => {
207 
    const formData = new FormData();
208 
    formData.append("uid", id);
209 
    await axios.post(url_add_user_to_group, formData).then((response) => {
210 
      const resData = response.data;
211 
      if (resData.success) {
212 
        loadPersonsAvailable();
213 
      }
214 
    });
215 
  };
216 
 
217 
  const handleConfirmModalAction = async () => {
3122 stevensc 218 
    try {
3788 stevensc 219 
      const { data } = await axios.post(modalActionUrl.current)
3122 stevensc 220 
      if (!data.success) console.log('Error in confirm modal action')
3788 stevensc 221 
      handleConfirmModalShow()
222 
      onClose(entity);
223 
      return
3122 stevensc 224 
    } catch (error) {
225 
      console.log(error)
226 
    }
1 www 227 
  };
228 
 
229 
  const handleObserver = (entities) => {
230 
    const target = entities[0];
231 
    if (target.isIntersecting) {
232 
      setCurrentPage((prevState) => prevState + 1);
233 
    }
234 
  };
235 
 
236 
  const scrollToBottom = () => {
3056 stevensc 237 
    if (conversationListEl.current) {
1 www 238 
      conversationListEl.current.scrollTop =
239 
        conversationListEl.current.scrollHeight * 9;
240 
    }
241 
  };
242 
 
243 
  const scrollDownBy = (scrollDistance) => {
3056 stevensc 244 
    if (conversationListEl.current) {
976 stevensc 245 
      conversationListEl.current.scrollTop = scrollDistance;
1 www 246 
    }
247 
  };
248 
 
249 
  const handleShowEmojiTab = () => {
250 
    setShowEmojiTab(!showEmojiTab);
251 
    // smiley_tpl(`${id}`);
252 
  };
253 
 
254 
  const handleClickEmoji = (e) => {
255 
    const shortname = e.currentTarget.dataset.shortname;
256 
    const currentText = textAreaEl.current.value;
257 
    let cursorPosition = textAreaEl.current.selectionStart;
258 
    const textBehind = currentText.substring(0, cursorPosition);
259 
    const textForward = currentText.substring(cursorPosition);
260 
    const unicode = emojione.shortnameToUnicode(shortname);
261 
    textAreaEl.current.value = `${textBehind}${unicode}${textForward}`;
262 
    textAreaEl.current.focus();
263 
    textAreaEl.current.setSelectionRange(
264 
      cursorPosition + unicode.length,
265 
      cursorPosition + unicode.length
266 
    );
267 
  };
268 
 
269 
  // useEffect(() => {
270 
  //   setMessages([...oldMessages, ...newMessages]);
271 
  // }, [newMessages, oldMessages]);
272 
 
273 
  // getMessageOnMaximize and subscribe to infinite Loader
274 
  useEffect(async () => {
3090 stevensc 275 
    let options = {
276 
      root: null,
277 
      rootMargin: "20px",
278 
      treshold: 1.0,
279 
    };
280 
    const observer = new IntersectionObserver(handleObserver, options);
1 www 281 
    if (!minimized) {
282 
      await handleGetMessages();
283 
      // loader observer
284 
      if (loader.current) {
285 
        observer.observe(loader.current);
286 
      }
287 
    }
288 
    return () => {
289 
      if (loader.current) {
290 
        observer.unobserve(loader.current);
291 
      }
292 
    };
293 
  }, [minimized]);
294 
 
295 
  // LoadMore on change page
296 
  useEffect(() => {
932 stevensc 297 
    let loadMore = () => handleLoadMore();
928 stevensc 298 
    loadMore()
1 www 299 
    return () => {
300 
      loadMore = null;
301 
    };
302 
  }, [currentPage]);
303 
 
304 
  // getMessagesInterval
305 
  useEffect(() => {
932 stevensc 306 
    if (window.location.pathname === '/group/my-groups') {
38 steven 307 
      const items = document.getElementsByClassName('sc-jSgupP')
932 stevensc 308 
      if (items && items.length > 0)
309 
        items[0].style.display = 'none';
38 steven 310 
    }
3122 stevensc 311 
  }, [minimized]);
312 
 
313 
  useEffect(() => {
314 
    let timer;
3119 stevensc 315 
    if (!minimized && !loading) {
3122 stevensc 316 
      timer = setTimeout(() => handleGetMessages(), 1000);
1 www 317 
    }
3120 stevensc 318 
    return () => {
3122 stevensc 319 
      clearTimeout(timer);
320 
    };
3119 stevensc 321 
  }, [minimized, loading]);
3122 stevensc 322 
 
3788 stevensc 323 
  const handleConfirmModalShow = () => setConfirmModalShow(!confirmModalShow)
1 www 324 
 
3788 stevensc 325 
  const handleConfirmModalAccept = () => handleConfirmModalAction()
1 www 326 
 
327 
  const handleShareFileModalShow = () => {
328 
    setShareFileModalShow(!shareFileModalShow);
329 
  };
330 
 
1300 stevensc 331 
  const handleResponseMessage = (element) => {
3059 stevensc 332 
    element.mtype === 'text'
333 
      ? setResponseMessage(element)
334 
      : setResponseMessage({ ...element, m: 'Archivo adjunto' })
335 
 
2765 stevensc 336 
    textAreaEl.current && textAreaEl.current.focus()
1300 stevensc 337 
  };
338 
 
4115 stevensc 339 
  const displayConferenceModal = () => setShowConferenceModal(!displayConferenceModal)
340 
 
1 www 341 
  const messagesRender = () => {
342 
    return (
343 
      <React.Fragment>
344 
        {currentPage < pages ? <li ref={loader}>Cargando...</li> : ""}
345 
        {oldMessages.map((oldMessage) => (
3088 stevensc 346 
          <MessageTemplate time={oldMessage.time} key={oldMessage.id} message={oldMessage} />
1 www 347 
        ))}
1215 stevensc 348 
        {messages.map((message, i) => {
349 
          let currentTime = message.time;
1216 stevensc 350 
          let prevMessage = messages[i - 1];
2187 stevensc 351 
 
2537 stevensc 352 
          const dailys = ["mes", "meses", "semana", "semanas", "dia", 'dias', "año", "años"]
1215 stevensc 353 
          const date = new Date(Date.now()).toLocaleDateString()
354 
 
1216 stevensc 355 
          if (prevMessage !== undefined) {
356 
            let prevTime = messages[i - 1].time;
2181 stevensc 357 
 
1216 stevensc 358 
            if (prevTime !== currentTime && dailys.includes(prevTime.split(' ')[1])) {
359 
              return <>
2538 stevensc 360 
                {/* <h2 className="text-center date-chat">{date}</h2> */}
1298 stevensc 361 
                <MessageTemplate
3088 stevensc 362 
                  key={message.id}
1298 stevensc 363 
                  message={message}
3088 stevensc 364 
                  time={message.time}
1300 stevensc 365 
                  setResponseMessage={handleResponseMessage}
1298 stevensc 366 
                  responseMessage={responseMessage}
367 
                />
1216 stevensc 368 
              </>
369 
            }
1215 stevensc 370 
          }
371 
 
1300 stevensc 372 
          return <MessageTemplate
3088 stevensc 373 
            key={message.id}
1300 stevensc 374 
            message={message}
3088 stevensc 375 
            time={message.time}
1300 stevensc 376 
            setResponseMessage={handleResponseMessage}
377 
            responseMessage={responseMessage}
378 
          />
1215 stevensc 379 
        })}
1 www 380 
      </React.Fragment>
381 
    );
382 
  };
383 
 
384 
  const optionRender = () => {
385 
    switch (optionTab) {
386 
      case optionTabs.add_person_to_group:
387 
        return addPersonToGroupTab;
388 
      case optionTabs.group_contacts_list:
389 
        return groupContactsListTab;
390 
      default:
391 
        return optionsDefaultTab;
392 
    }
393 
  };
394 
 
395 
  // useEffect for tabs changing
396 
  useEffect(() => {
397 
    switch (optionTab) {
398 
      case optionTabs.add_person_to_group:
399 
        loadPersonsAvailable();
400 
        break;
401 
      case optionTabs.group_contacts_list:
402 
        loadGroupContacts();
403 
        break;
404 
    }
405 
  }, [optionTab]);
406 
 
407 
  const loadPersonsAvailable = async () => {
408 
    await axios.get(url_get_contacts_availables_for_group).then((response) => {
409 
      const resData = response.data;
410 
      if (resData.success) {
411 
        setAvailableContactsToAdd(resData.data);
412 
      }
413 
    });
414 
  };
415 
 
416 
  const loadGroupContacts = async () => {
417 
    await axios.get(url_get_contact_group_list).then((response) => {
418 
      const resData = response.data;
419 
      if (resData.success) {
420 
        setGroupContactsList(resData.data);
421 
      }
422 
    });
423 
  };
424 
 
425 
  const handleDeletePersonFromGroup = async (urlDeletePersonFromGroup) => {
426 
    await axios.post(urlDeletePersonFromGroup).then((response) => {
427 
      const resData = response.data;
428 
      if (resData.success) {
429 
        loadGroupContacts();
430 
      }
431 
    });
432 
  };
433 
 
434 
  const optionsDefaultTab = (
435 
    <React.Fragment>
436 
      <span className="optionBack" onClick={() => handleShowOptions()}>
437 
        <i className="fa icon-arrow-left"></i>
438 
      </span>
439 
      <div className="optionsTab">
440 
        <ul>
441 
          {!!url_get_contact_group_list && (
442 
            <li
443 
              className="optionsTab__option"
444 
              onClick={() => handleChangeTab(optionTabs.group_contacts_list)}
445 
            >
446 
              <span className="optionsTab__option__icon">
447 
                <i className="fa fa-group"></i>
448 
              </span>
449 
              Integrantes
450 
            </li>
451 
          )}
452 
          {!!url_add_user_to_group && (
453 
            <li
454 
              className="optionsTab__option"
455 
              onClick={() => handleChangeTab(optionTabs.add_person_to_group)}
456 
            >
457 
              <span className="optionsTab__option__icon">
458 
                <i className="fa fa-user-plus"></i>
459 
              </span>
460 
              Agregar contactos
461 
            </li>
462 
          )}
463 
          {!!url_delete && (
464 
            <li
465 
              className="optionsTab__option"
466 
              style={{ color: "red" }}
467 
              onClick={() => {
468 
                handleConfirmModalShow();
469 
                modalActionUrl.current = url_delete;
470 
              }}
471 
            >
472 
              <span className="optionsTab__option__icon">
473 
                <i className="fa fa-trash"></i>
474 
              </span>
475 
              Eliminar grupo
476 
            </li>
477 
          )}
478 
          {!!url_leave && (
479 
            <li
480 
              className="optionsTab__option"
481 
              style={{ color: "red" }}
482 
              onClick={() => {
483 
                handleConfirmModalShow();
484 
                modalActionUrl.current = url_leave;
485 
              }}
486 
            >
487 
              <span className="optionsTab__option__icon">
488 
                <i className="fa fa-user-times"></i>
489 
              </span>
490 
              Dejar grupo
491 
            </li>
492 
          )}
493 
        </ul>
494 
      </div>
495 
    </React.Fragment>
496 
  );
497 
 
4115 stevensc 498 
  const meetingOptionsTab = (
499 
    <>
500 
      <span className="optionBack" onClick={() => handleShowOptions()}>
501 
        <i className="fa icon-arrow-left" />
502 
      </span>
503 
      <div className="optionsTab">
504 
        <ul>
505 
          <li
506 
            className="optionsTab__option"
507 
            onClick={displayConferenceModal}
508 
          >
509 
            <span className="optionsTab__option__icon">
510 
              <i className="fa fa-user-plus" />
511 
            </span>
512 
            Crear conferencia
513 
          </li>
514 
        </ul>
515 
      </div>
516 
    </>
517 
  );
518 
 
1 www 519 
  const addPersonToGroupTab = (
520 
    <React.Fragment>
521 
      <span
522 
        className="optionBack"
523 
        onClick={() => handleChangeTab(optionTabs.default)}
524 
      >
525 
        <i className="fa icon-arrow-left"></i>
526 
      </span>
527 
      <div className="addPersonToGroupTab">
528 
        {availableContactsToAdd.length ? (
529 
          availableContactsToAdd.map(({ image, name, id }) => (
530 
            <div className="addPersonToGroupTab__person" key={id}>
2664 stevensc 531 
              <div className="d-inline-flex" style={{ gap: '5px' }}>
2663 stevensc 532 
                <img
533 
                  className="chat-image img-circle pull-left"
534 
                  height="36"
535 
                  width="36"
536 
                  src={image}
537 
                  alt="image-image"
538 
                />
539 
                <div className="name">{name}</div>
540 
              </div>
1 www 541 
              <span
542 
                style={{
543 
                  cursor: "pointer",
544 
                }}
545 
                onClick={() => {
546 
                  handleAddPersonToGroup(id);
547 
                }}
548 
              >
549 
                <i className="fa fa-plus-circle"></i>
550 
              </span>
551 
            </div>
552 
          ))
553 
        ) : (
554 
          <div className="addPersonToGroupTab__person">No hay Contactos</div>
555 
        )}
556 
      </div>
557 
    </React.Fragment>
558 
  );
559 
 
560 
  const groupContactsListTab = (
561 
    <React.Fragment>
562 
      <span
563 
        className="optionBack"
564 
        onClick={() => handleChangeTab(optionTabs.default)}
565 
      >
566 
        <i className="fa icon-arrow-left"></i>
567 
      </span>
568 
      <div className="addPersonToGroupTab">
569 
        {groupContactsList.length ? (
570 
          groupContactsList.map(
571 
            ({ image, name, url_remove_from_group, id }) => (
572 
              <div className="addPersonToGroupTab__person" key={id}>
573 
                <div style={{ display: "flex", alignItems: "center" }}>
574 
                  <img
575 
                    className="chat-image img-circle pull-left"
576 
                    height="36"
577 
                    width="36"
578 
                    src={image}
579 
                    alt="image-image"
580 
                  />
581 
                  <div className="name">{name}</div>
582 
                </div>
583 
                {url_remove_from_group && (
584 
                  <span
585 
                    style={{
586 
                      cursor: "pointer",
587 
                    }}
588 
                    onClick={() => {
589 
                      handleDeletePersonFromGroup(url_remove_from_group);
590 
                    }}
591 
                  >
592 
                    <i className="fa fa-user-times"></i>
593 
                  </span>
594 
                )}
595 
              </div>
596 
            )
597 
          )
598 
        ) : (
599 
          <div className="addPersonToGroupTab__person">No hay Contactos</div>
600 
        )}
601 
      </div>
602 
    </React.Fragment>
603 
  );
604 
 
605 
  const shareFileModal = (
606 
    <SendFileModal
607 
      show={shareFileModalShow}
608 
      onHide={() => {
609 
        setShareFileModalShow(false);
610 
      }}
611 
      urlUpload={url_upload}
612 
    />
613 
  );
614 
 
615 
  const userChat = (
616 
    <React.Fragment>
3752 stevensc 617 
      <div className="chatbox active-chat" style={{ display: 'block' }}>
1 www 618 
        <div className="chatbox-icon">
619 
          <div className="contact-floating red">
620 
            <img className="chat-image img-circle pull-left" src={image} />
621 
            <small className="unread-msg">2</small>
622 
          </div>
623 
        </div>
624 
        <div className="panel personal-chat">
625 
          <StyledChatHead>
3094 stevensc 626 
            <div className={`panel-heading chatboxhead ${not_seen_messages ? "notify" : ""}`}>
1 www 627 
              <div className="panel-title">
628 
                <img
629 
                  className="chat-image img-circle pull-left"
630 
                  height="36"
631 
                  width="36"
632 
                  src={image}
633 
                  alt="avatar-image"
634 
                />
635 
                <div className="header-elements">
3056 stevensc 636 
                  <a href={profile} target="_blank" rel="noreferrer">
1 www 637 
                    {name}
638 
                  </a>
639 
                  <br />
1188 stevensc 640 
                  <small className={`status ${online ? "Online" : "Offline"}`}>
641 
                    <b>{online ? "En línea" : "Desconectado"}</b>
1 www 642 
                  </small>
643 
                  <div className="pull-right options">
4115 stevensc 644 
                    <div className="btn-group uploadFile">
1 www 645 
                      {/* <span>
646 
                      <i className="fa fa-trash"></i>
647 
                    </span> */}
648 
                    </div>
4115 stevensc 649 
                    <div className="btn-group">
1 www 650 
                      {/* <span>
651 
                      <i className="fa fa-trash"></i>
652 
                    </span> */}
653 
                    </div>
654 
                    <div
4115 stevensc 655 
                      className="btn-group addUser"
656 
                      data-client="8cb2a840-56c2-4f93-9cf1-27ad598acd8f"
657 
                      data-name="Grupo de jesus"
1 www 658 
                    >
659 
                      <span>
4115 stevensc 660 
                        <i className="fa fa-gear" onClick={handleShowOptions} />
1 www 661 
                      </span>
662 
                    </div>
4115 stevensc 663 
                    <div className="btn-group">
1 www 664 
                      <span>
4115 stevensc 665 
                        <i className={`fa fa-minus-circle`} onClick={handleActive} />
1 www 666 
                      </span>
667 
                    </div>
4115 stevensc 668 
                    <div className="btn-group">
669 
                      <span>
670 
                        <i className="fa fa-times-circle" onClick={handleCloseChat} />
671 
                      </span>
672 
                    </div>
1 www 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>
3604 stevensc 699 
              <div className="wchat-footer wchat-chat-footer">
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
3752 stevensc 781 
        className="chatbox active-chat "
1 www 782 
        ref={chatboxEl}
783 
      >
784 
        <div className="chatbox-icon">
785 
          <div className="contact-floating red">
786 
            <img className="chat-image img-circle pull-left" src={image} />
787 
            <small className="unread-msg">2</small>
788 
          </div>
789 
        </div>
790 
        <div className="panel personal-chat">
791 
          <StyledChatHead>
3752 stevensc 792 
            <div className={`panel-heading chatboxhead ${not_seen_messages ? "notify" : ""}`}>
1 www 793 
              <div className="panel-title-group">
794 
                <img
795 
                  className="chat-image img-circle pull-left"
796 
                  height="36"
797 
                  width="36"
798 
                  src="/images/users-group.png"
799 
                  alt="avatar-image"
800 
                />
801 
                <div className="header-elements">
802 
                  <p>{name}</p>
803 
                  <br />
804 
                  <div className="pull-right options">
805 
                    <div
806 
                      className="btn-group uploadFile"
807 
                      id="uploadFile"
808 
                      data-client="'+chatboxtitle+'"
809 
                    >
810 
                    </div>
3752 stevensc 811 
                    <div className="btn-group">
1 www 812 
                    </div>
813 
                    <div
814 
                      className="btn-group addUser"
815 
                      data-client="8cb2a840-56c2-4f93-9cf1-27ad598acd8f"
816 
                      data-name="Grupo de jesus"
817 
                    >
818 
                      <span>
819 
                        <i
820 
                          className="fa fa-gear"
821 
                          onClick={handleShowOptions}
822 
                        ></i>
823 
                      </span>
824 
                    </div>
3752 stevensc 825 
                    <div className="btn-group">
1 www 826 
                      <span>
827 
                        <i
828 
                          className={`fa fa-minus-circle`}
829 
                          onClick={handleActive}
830 
                        ></i>
831 
                      </span>
832 
                    </div>
3752 stevensc 833 
                    <div className="btn-group">
1 www 834 
                      <span>
835 
                        <i
836 
                          className="fa fa-times-circle"
837 
                          onClick={handleCloseChat}
838 
                        ></i>
839 
                      </span>
840 
                    </div>
841 
                  </div>
842 
                </div>
843 
              </div>
844 
            </div>
845 
          </StyledChatHead>
846 
          <div
847 
            className="panel-body"
848 
            style={{ display: !minimized ? "block" : "none" }}
849 
          >
850 
            <StyledShowOptions className={` ${showOptions ? "show" : "hide"}`}>
851 
              {optionRender()}
852 
            </StyledShowOptions>
853 
 
854 
            <div
855 
              className="chat-conversation"
856 
              style={{
857 
                display: showOptions ? "none" : "block",
858 
                position: "relative",
859 
              }}
860 
            >
861 
              <div className="reverseChatBox" ref={conversationListEl}>
862 
                <ul
863 
                  className="conversation-list chatboxcontent"
864 
                  id="resultchat_'+chatboxtitle+'"
865 
                >
866 
                  {messagesRender()}
867 
                </ul>
868 
              </div>
3604 stevensc 869 
              <div className="wchat-footer wchat-chat-footer">
1 www 870 
                <div id="chatFrom">
871 
                  <div className="block-wchat">
872 
                    <button
873 
                      className="icon ti-clip attachment font-24 btn-attach btn-attach uploadFile"
874 
                      id="uploadFile"
875 
                      onClick={handleShareFileModalShow}
876 
                    ></button>
877 
                    <button
878 
                      className="icon ti-face-smile font-24 btn-emoji"
879 
                      id="toggle-emoji"
880 
                      onClick={handleShowEmojiTab}
881 
                    ></button>
882 
                    <div className="input-container">
883 
                      <div className="input-emoji">
884 
                        <div
885 
                          className="input-placeholder"
886 
                          style={{ visibility: "hidden", display: "none" }}
887 
                        >
888 
                          Escribe un mensaje
889 
                        </div>
890 
                        <textarea
891 
                          className="input chatboxtextarea"
892 
                          id="chatboxtextarea"
893 
                          name="chattxt"
894 
                          style={{ resize: "none", height: "20px" }}
895 
                          placeholder="Escribe un mensaje"
896 
                          onKeyDown={handleChatBoxKeyDown}
897 
                          ref={textAreaEl}
3122 stevensc 898 
                          onFocus={() => not_seen_messages && onRead(entity)}
3045 stevensc 899 
                          onBlur={() => responseMessage && setResponseMessage(null)}
1 www 900 
                        ></textarea>
901 
                        <input
902 
                          id="to_uname"
903 
                          name="to_uname"
904 
                          value="'+chatboxtitle+'"
905 
                          type="hidden"
906 
                        />
907 
                        <input
908 
                          id="from_uname"
909 
                          name="from_uname"
910 
                          value="Beenny"
911 
                          type="hidden"
912 
                        />
913 
                      </div>
914 
                    </div>
915 
                  </div>
916 
                </div>
917 
                <div className="wchat-box-items-positioning-container">
918 
                  <div className="wchat-box-items-overlay-container">
919 
                    <div
920 
                      className="target-emoji"
921 
                      style={{ display: showEmojiTab ? "block" : "none" }}
922 
                    >
923 
                      <div id={`smileyPanel_${id}`}>
924 
                        <div>
925 
                          <Emojione onClickEmoji={handleClickEmoji} />
926 
                        </div>
927 
                      </div>
928 
                    </div>
929 
                  </div>
930 
                </div>
931 
              </div>
932 
            </div>
933 
          </div>
934 
        </div>
935 
      </div>
936 
      <ConfirmModal
937 
        show={confirmModalShow}
938 
        onClose={handleConfirmModalShow}
939 
        onAccept={handleConfirmModalAccept}
940 
      />
941 
      {shareFileModal}
942 
    </React.Fragment>
943 
  );
944 
 
945 
  switch (type) {
946 
    case "user":
947 
      return userChat;
948 
    case "group":
949 
      return groupChat;
950 
    default:
951 
      break;
952 
  }
953 
};
954 
 
4115 stevensc 955 
const StyleModal = ({
956 
  title = 'Crea una conferencia',
957 
  size = 'md',
958 
  show = false,
959 
  children
960 
}) => {
961 
 
962 
  const [isShow, setIsShow] = useState(show)
963 
 
964 
  const closeModal = () => setIsShow(false)
965 
 
966 
  return (
967 
    <Modal
968 
      size={size}
969 
      show={isShow}
970 
      onHide={closeModal}
971 
      style={{ overflowY: "scroll" }}
972 
    >
973 
      <Modal.Header closeButton>
974 
        <Modal.Title>{title}</Modal.Title>
975 
      </Modal.Header>
976 
      <Modal.Body>
977 
        {children}
978 
      </Modal.Body>
979 
    </Modal>
980 
  )
981 
}
982 
 
983 
const ConferenceModal = ({
984 
  show = false,
985 
}) => {
986 
 
987 
  const { handleSubmit, register, errors, reset } = useForm()
988 
 
989 
  const onSubmit = () => {
990 
    reset()
991 
  }
992 
 
993 
  return (
994 
    <StyleModal
995 
      title='Crea una conferencia'
996 
      size='md'
997 
      show={show}
998 
    >
999 
      <form onSubmit={handleSubmit(onSubmit)}>
1000 
        <div className="d-flex flex-wrap pb-3" style={{ gap: '1rem' }}>
1001 
          <div className="cp-field">
1002 
            <label htmlFor="first_name">Título</label>
1003 
            <input
1004 
              type="text"
1005 
              name="title"
1006 
              {...register({ required: "Por favor un título" })}
1007 
            />
1008 
            {errors.title && <FormErrorFeedback> {errors.title.message}</FormErrorFeedback>}
1009 
          </div>
1010 
          <div className="cp-field">
1011 
            <label htmlFor="first_name">Título</label>
1012 
            <input
1013 
              type="text"
1014 
              name="title"
1015 
              {...register({ required: "Por favor ingrese su nombre" })}
1016 
            />
1017 
            {errors.title && <FormErrorFeedback> {errors.title.message}</FormErrorFeedback>}
1018 
          </div>
1019 
        </div>
1020 
      </form>
1021 
    </StyleModal>
1022 
  )
1023 
}
1024 
 
1025 
export default React.memo(PersonalChat);