Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
5195 stevensc 1 
/* eslint-disable camelcase */
3094 stevensc 2 
/* eslint-disable react/prop-types */
5195 stevensc 3 
import React, { useState, useRef, useEffect } from 'react'
4 
import { axios } from '../../../utils'
5 
import styled from 'styled-components'
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 
import { Modal } from 'react-bootstrap'
11 
import { useForm } from 'react-hook-form'
12 
import FormErrorFeedback from '../../../shared/form-error-feedback/FormErrorFeedback'
4119 stevensc 13 
import 'react-datetime/css/react-datetime.css'
5195 stevensc 14 
import Datetime from 'react-datetime'
15 
import { addNotification } from '../../../redux/notification/notification.actions'
16 
import Spinner from '../../../shared/loading-spinner/Spinner'
5307 stevensc 17 
import { useDispatch, useSelector } from 'react-redux'
4386 stevensc 18 
import SearchIcon from '@mui/icons-material/Search'
5206 stevensc 19 
import EmptySection from '../../../shared/empty-section/EmptySection'
5311 stevensc 20 
import { getMessages } from '../../../redux/conversation/conversation.actions'
1 www 21 
 
22 
const StyledShowOptions = styled.div`
23 
  height: 342px;
24 
  flex-direction: column;
5195 stevensc 25 
  gap: 0.5rem;
1 www 26 
  overflow-y: auto;
27 
  position: relative;
28 
  &.show {
29 
    display: flex;
30 
  }
31 
  &.hide {
32 
    display: none;
33 
  }
34 
  .optionBack {
35 
    margin: 1rem 0 0.5rem 1rem;
36 
    cursor: pointer;
37 
  }
38 
  .optionsTab {
39 
    &__option {
40 
      padding: 0.5rem;
41 
      border-bottom: 1px solid #e2e2e2;
42 
      cursor: pointer;
43 
      &:hover {
44 
        background-color: #e2e2e2;
45 
      }
46 
      &__icon {
47 
        margin-right: 0.3rem;
48 
      }
49 
    }
50 
  }
51 
  .addPersonToGroupTab {
52 
    display: flex;
53 
    flex-direction: column;
54 
    &__person {
55 
      display: flex;
56 
      justify-content: space-between;
57 
      align-items: center;
58 
      padding: 0.2rem 0.5rem;
59 
      border-bottom: 1px solid #e2e2e2;
60 
    }
61 
  }
5195 stevensc 62 
`
1 www 63 
 
4119 stevensc 64 
const PersonalChat = ({ entity, onClose, onMinimize, onRead, not_seen_messages, minimized, timezones }) => {
1 www 65 
  const {
66 
    id,
67 
    image,
68 
    name,
69 
    online,
70 
    type,
71 
    url_get_all_messages,
72 
    url_send,
73 
    url_upload,
74 
    profile,
75 
    url_leave,
76 
    url_delete,
77 
    url_add_user_to_group,
78 
    url_get_contact_group_list,
79 
    url_get_contacts_availables_for_group,
4134 stevensc 80 
    url_zoom
5195 stevensc 81 
  } = entity
1 www 82 
 
5311 stevensc 83 
  const { messages, currentPage, lastPage, loading } = useSelector((state) => state.conversation)
84 
  const dispatch = useDispatch()
5307 stevensc 85 
 
5195 stevensc 86 
  const [optionTab, setOptionTab] = useState('default')
5311 stevensc 87 
 
5195 stevensc 88 
  const [availableContactsToAdd, setAvailableContactsToAdd] = useState([])
89 
  const [groupContactsList, setGroupContactsList] = useState([])
5311 stevensc 90 
 
91 
  const [showOptions, setShowOptions] = useState(false)
5195 stevensc 92 
  const [confirmModalShow, setConfirmModalShow] = useState(false)
93 
  const [showEmojiTab, setShowEmojiTab] = useState(false)
94 
  const [shareFileModalShow, setShareFileModalShow] = useState(false)
95 
  const [showConferenceModal, setShowConferenceModal] = useState(false)
5311 stevensc 96 
 
5195 stevensc 97 
  const [search, setSearch] = useState('')
1 www 98 
 
4390 stevensc 99 
  const filtredGroupList = groupContactsList.filter((conversation) => conversation.name.toLowerCase().includes(search.toLowerCase()))
4386 stevensc 100 
 
1 www 101 
  // refs
5195 stevensc 102 
  const conversationListEl = useRef(null)
103 
  const loader = useRef(null)
104 
  const modalActionUrl = useRef('')
105 
  const chatboxEl = useRef(null)
106 
  const textAreaEl = useRef(null)
1 www 107 
 
108 
  const handleActive = () => {
5195 stevensc 109 
    onRead(entity)
110 
    onMinimize(entity)
111 
  }
1 www 112 
 
113 
  const handleGetMessages = async () => {
5311 stevensc 114 
    dispatch(getMessages(url_get_all_messages))
115 
    scrollToBottom()
5195 stevensc 116 
  }
1 www 117 
 
118 
  const handleLoadMore = async () => {
936 stevensc 119 
    await axios.get(`${url_get_all_messages}?page=${currentPage}`)
1 www 120 
      .then((response) => {
5195 stevensc 121 
        const resData = response.data
1 www 122 
        if (resData.success) {
123 
          if (resData.data.page > 1) {
5195 stevensc 124 
            const updatedOldMessages = [...resData.data.items].reverse()
5311 stevensc 125 
            // setOldMessages([...updatedOldMessages, ...oldMessages])
986 stevensc 126 
            /* scrollDownBy(100); */
1 www 127 
          }
128 
        }
5195 stevensc 129 
      })
130 
  }
1 www 131 
 
3122 stevensc 132 
  const handleCloseChat = () => onClose(entity)
1 www 133 
 
134 
  const handleChatBoxKeyDown = async (e) => {
5195 stevensc 135 
    if (e.key === 'Enter') {
136 
      e.preventDefault()
137 
      const message = e.target.value
138 
      const formData = new FormData()
139 
      formData.append('message', emojione.toShort(message))
2181 stevensc 140 
      await axios.post(url_send, formData).then((response) => {
5195 stevensc 141 
        const resData = response.data
2181 stevensc 142 
        if (resData.success) {
2188 stevensc 143 
          let newMessage = resData.data
2186 stevensc 144 
 
145 
          online
2188 stevensc 146 
            ? newMessage = { ...newMessage, not_received: false }
147 
            : newMessage = { ...newMessage, not_received: true }
2186 stevensc 148 
 
5311 stevensc 149 
          // setMessages([...messages, newMessage])
2181 stevensc 150 
        }
5195 stevensc 151 
      })
152 
      e.target.value = ''
2189 stevensc 153 
      /* await handleGetMessages(); */
5195 stevensc 154 
      setShowEmojiTab(false)
5311 stevensc 155 
      // setResponseMessage(null)
1 www 156 
    }
5195 stevensc 157 
  }
1 www 158 
 
159 
  const handleShowOptions = () => {
5195 stevensc 160 
    onMinimize(entity, false)
161 
    setShowOptions(!showOptions)
162 
  }
1 www 163 
 
164 
  const handleChangeTab = (tab) => {
5195 stevensc 165 
    setOptionTab(tab)
166 
  }
1 www 167 
 
168 
  const handleAddPersonToGroup = async (id) => {
5195 stevensc 169 
    const formData = new FormData()
170 
    formData.append('uid', id)
1 www 171 
    await axios.post(url_add_user_to_group, formData).then((response) => {
5195 stevensc 172 
      const resData = response.data
1 www 173 
      if (resData.success) {
5195 stevensc 174 
        loadPersonsAvailable()
1 www 175 
      }
5195 stevensc 176 
    })
177 
  }
1 www 178 
 
179 
  const handleConfirmModalAction = async () => {
3122 stevensc 180 
    try {
3788 stevensc 181 
      const { data } = await axios.post(modalActionUrl.current)
3122 stevensc 182 
      if (!data.success) console.log('Error in confirm modal action')
3788 stevensc 183 
      handleConfirmModalShow()
5195 stevensc 184 
      onClose(entity)
3788 stevensc 185 
      return
3122 stevensc 186 
    } catch (error) {
187 
      console.log(error)
188 
    }
5195 stevensc 189 
  }
1 www 190 
 
191 
  const handleObserver = (entities) => {
5195 stevensc 192 
    const target = entities[0]
1 www 193 
    if (target.isIntersecting) {
5311 stevensc 194 
      // setCurrentPage((prevState) => prevState + 1)
1 www 195 
    }
5195 stevensc 196 
  }
1 www 197 
 
198 
  const scrollToBottom = () => {
3056 stevensc 199 
    if (conversationListEl.current) {
1 www 200 
      conversationListEl.current.scrollTop =
5195 stevensc 201 
        conversationListEl.current.scrollHeight * 9
1 www 202 
    }
5195 stevensc 203 
  }
1 www 204 
 
205 
  const handleShowEmojiTab = () => {
5195 stevensc 206 
    setShowEmojiTab(!showEmojiTab)
1 www 207 
    // smiley_tpl(`${id}`);
5195 stevensc 208 
  }
1 www 209 
 
210 
  const handleClickEmoji = (e) => {
5195 stevensc 211 
    const shortname = e.currentTarget.dataset.shortname
212 
    const currentText = textAreaEl.current.value
213 
    const cursorPosition = textAreaEl.current.selectionStart
214 
    const textBehind = currentText.substring(0, cursorPosition)
215 
    const textForward = currentText.substring(cursorPosition)
216 
    const unicode = emojione.shortnameToUnicode(shortname)
217 
    textAreaEl.current.value = `${textBehind}${unicode}${textForward}`
218 
    textAreaEl.current.focus()
1 www 219 
    textAreaEl.current.setSelectionRange(
220 
      cursorPosition + unicode.length,
221 
      cursorPosition + unicode.length
5195 stevensc 222 
    )
223 
  }
1 www 224 
 
225 
  // useEffect(() => {
226 
  //   setMessages([...oldMessages, ...newMessages]);
227 
  // }, [newMessages, oldMessages]);
228 
 
229 
  // getMessageOnMaximize and subscribe to infinite Loader
230 
  useEffect(async () => {
5195 stevensc 231 
    const options = {
3090 stevensc 232 
      root: null,
5195 stevensc 233 
      rootMargin: '20px',
234 
      treshold: 1.0
235 
    }
236 
    const observer = new IntersectionObserver(handleObserver, options)
1 www 237 
    if (!minimized) {
5195 stevensc 238 
      await handleGetMessages()
1 www 239 
      // loader observer
240 
      if (loader.current) {
5195 stevensc 241 
        observer.observe(loader.current)
1 www 242 
      }
243 
    }
244 
    return () => {
245 
      if (loader.current) {
5195 stevensc 246 
        observer.unobserve(loader.current)
1 www 247 
      }
5195 stevensc 248 
    }
249 
  }, [minimized])
1 www 250 
 
251 
  // LoadMore on change page
252 
  useEffect(() => {
5195 stevensc 253 
    let loadMore = () => handleLoadMore()
928 stevensc 254 
    loadMore()
1 www 255 
    return () => {
5195 stevensc 256 
      loadMore = null
257 
    }
258 
  }, [currentPage])
1 www 259 
 
260 
  // getMessagesInterval
261 
  useEffect(() => {
932 stevensc 262 
    if (window.location.pathname === '/group/my-groups') {
38 steven 263 
      const items = document.getElementsByClassName('sc-jSgupP')
5195 stevensc 264 
      if (items && items.length > 0) { items[0].style.display = 'none' }
38 steven 265 
    }
5195 stevensc 266 
  }, [minimized])
3122 stevensc 267 
 
268 
  useEffect(() => {
5195 stevensc 269 
    let timer
3119 stevensc 270 
    if (!minimized && !loading) {
5195 stevensc 271 
      timer = setTimeout(() => handleGetMessages(), 1000)
1 www 272 
    }
3120 stevensc 273 
    return () => {
5195 stevensc 274 
      clearTimeout(timer)
275 
    }
276 
  }, [minimized, loading])
3122 stevensc 277 
 
3788 stevensc 278 
  const handleConfirmModalShow = () => setConfirmModalShow(!confirmModalShow)
1 www 279 
 
3788 stevensc 280 
  const handleConfirmModalAccept = () => handleConfirmModalAction()
1 www 281 
 
282 
  const handleShareFileModalShow = () => {
5195 stevensc 283 
    setShareFileModalShow(!shareFileModalShow)
284 
  }
1 www 285 
 
5311 stevensc 286 
  /* const handleResponseMessage = (element) => {
3059 stevensc 287 
    element.mtype === 'text'
288 
      ? setResponseMessage(element)
289 
      : setResponseMessage({ ...element, m: 'Archivo adjunto' })
290 
 
2765 stevensc 291 
    textAreaEl.current && textAreaEl.current.focus()
5311 stevensc 292 
  } */
1300 stevensc 293 
 
4116 stevensc 294 
  const displayConferenceModal = () => setShowConferenceModal(!showConferenceModal)
4115 stevensc 295 
 
1 www 296 
  const messagesRender = () => {
297 
    return (
5311 stevensc 298 
      <>
299 
        {currentPage < lastPage ? <li ref={loader}>Cargando...</li> : ''}
300 
        {messages.map((message) => (
5313 stevensc 301 
          <MessageTemplate
302 
            time={message.time}
303 
            key={message.id}
304 
            message={message} />
5310 stevensc 305 
        ))}
5311 stevensc 306 
      </>
5195 stevensc 307 
    )
308 
  }
1 www 309 
 
310 
  // useEffect for tabs changing
311 
  useEffect(() => {
5320 stevensc 312 
    if (optionTab === 'addContacts') loadPersonsAvailable()
313 
    if (optionTab === 'listContacts') loadGroupContacts()
5195 stevensc 314 
  }, [optionTab])
1 www 315 
 
316 
  const loadPersonsAvailable = async () => {
317 
    await axios.get(url_get_contacts_availables_for_group).then((response) => {
5195 stevensc 318 
      const resData = response.data
1 www 319 
      if (resData.success) {
5195 stevensc 320 
        setAvailableContactsToAdd(resData.data)
1 www 321 
      }
5195 stevensc 322 
    })
323 
  }
1 www 324 
 
325 
  const loadGroupContacts = async () => {
326 
    await axios.get(url_get_contact_group_list).then((response) => {
5195 stevensc 327 
      const resData = response.data
1 www 328 
      if (resData.success) {
5195 stevensc 329 
        setGroupContactsList(resData.data)
1 www 330 
      }
5195 stevensc 331 
    })
332 
  }
1 www 333 
 
334 
  const handleDeletePersonFromGroup = async (urlDeletePersonFromGroup) => {
335 
    await axios.post(urlDeletePersonFromGroup).then((response) => {
5195 stevensc 336 
      const resData = response.data
1 www 337 
      if (resData.success) {
5195 stevensc 338 
        loadGroupContacts()
1 www 339 
      }
5195 stevensc 340 
    })
341 
  }
1 www 342 
 
5320 stevensc 343 
  const tabsOptions = {
344 
    group: () => (
345 
      <ul>
346 
        {url_get_contact_group_list &&
347 
          <li className="optionsTab__option" onClick={() => handleChangeTab('listContacts')}>
348 
            <span className="optionsTab__option__icon">
349 
              <i className="fa fa-group" />
1 www 350 
              Integrantes
5320 stevensc 351 
            </span>
352 
          </li>
353 
        }
354 
        {url_add_user_to_group &&
355 
          <li className="optionsTab__option" onClick={() => handleChangeTab('addContacts')}>
4115 stevensc 356 
            <span className="optionsTab__option__icon">
5320 stevensc 357 
              <i className="fa fa-user-plus"></i>
358 
            </span>
359 
            {CHAT_LABELS.ADD_CONTACTS}
360 
          </li>
361 
        }
362 
        {url_zoom &&
363 
          <li
364 
            className="optionsTab__option"
365 
            onClick={displayConferenceModal}
366 
          >
367 
            <span className="optionsTab__option__icon">
4115 stevensc 368 
              <i className="fa fa-user-plus" />
369 
            </span>
5206 stevensc 370 
            {CHAT_LABELS.CREATE_CONFERENCE}
4115 stevensc 371 
          </li>
5320 stevensc 372 
        }
373 
        {url_delete &&
374 
          <li
375 
            className="optionsTab__option"
376 
            style={{ color: 'red' }}
377 
            onClick={() => {
378 
              handleConfirmModalShow()
379 
              modalActionUrl.current = url_delete
380 
            }}
381 
          >
382 
            <span className="optionsTab__option__icon">
383 
              <i className="fa fa-trash"></i>
384 
            </span>
385 
            Eliminar grupo
386 
          </li>
387 
        }
388 
        {!!url_leave &&
389 
          <li
390 
            className="optionsTab__option"
391 
            style={{ color: 'red' }}
392 
            onClick={() => {
393 
              handleConfirmModalShow()
394 
              modalActionUrl.current = url_leave
395 
            }}
396 
          >
397 
            <span className="optionsTab__option__icon">
398 
              <i className="fa fa-user-times"></i>
399 
            </span>
400 
            Dejar grupo
401 
          </li>
402 
        }
403 
      </ul>
404 
    ),
405 
    conference: () => (
406 
      <ul>
407 
        <li className="optionsTab__option" onClick={displayConferenceModal}>
408 
          <span className="optionsTab__option__icon">
409 
            <i className="fa fa-user-plus" />
410 
          </span>
411 
          {CHAT_LABELS.CREATE_CONFERENCE}
412 
        </li>
413 
      </ul>
414 
    ),
415 
    addContacts: () => (
416 
      <>
417 
        {availableContactsToAdd.length
418 
          ? <EmptySection message={CHAT_LABELS.NOT_CONTACTS} align='left' />
419 
          : availableContactsToAdd.map(({ image, name, id }) =>
1 www 420 
            <div className="addPersonToGroupTab__person" key={id}>
2664 stevensc 421 
              <div className="d-inline-flex" style={{ gap: '5px' }}>
2663 stevensc 422 
                <img
423 
                  className="chat-image img-circle pull-left"
424 
                  height="36"
425 
                  width="36"
426 
                  src={image}
427 
                  alt="image-image"
428 
                />
429 
                <div className="name">{name}</div>
430 
              </div>
5206 stevensc 431 
              <span className='cursor-pointer' onClick={() => handleAddPersonToGroup(id)}>
432 
                <i className="fa fa-plus-circle" />
1 www 433 
              </span>
434 
            </div>
5320 stevensc 435 
          )}
436 
      </>
437 
    ),
438 
    listContacts: () => (
439 
      <>
440 
        <div className='group__search'>
441 
          <SearchIcon />
442 
          <input
443 
            type='text'
444 
            placeholder={CHAT_LABELS.SEARCH}
445 
            onChange={(e) => setSearch(e.target.value)}
446 
          />
447 
        </div>
4389 stevensc 448 
        {filtredGroupList.length
449 
          ? filtredGroupList.map(({ image, name, url_remove_from_group, id }) => {
450 
            return (
1 www 451 
              <div className="addPersonToGroupTab__person" key={id}>
5195 stevensc 452 
                <div style={{ display: 'flex', alignItems: 'center' }}>
1 www 453 
                  <img
454 
                    className="chat-image img-circle pull-left"
455 
                    height="36"
456 
                    width="36"
457 
                    src={image}
458 
                    alt="image-image"
459 
                  />
460 
                  <div className="name">{name}</div>
461 
                </div>
4389 stevensc 462 
                {url_remove_from_group &&
463 
                  <span className="cursor-pointer" onClick={() => handleDeletePersonFromGroup(url_remove_from_group)}>
464 
                    <i className="fa fa-user-times" />
1 www 465 
                  </span>
4389 stevensc 466 
                }
1 www 467 
              </div>
468 
            )
4389 stevensc 469 
          })
5206 stevensc 470 
          : <div className="addPersonToGroupTab__person">{CHAT_LABELS.NOT_CONTACTS}</div>
4389 stevensc 471 
        }
5320 stevensc 472 
      </>
473 
    )
474 
  }
1 www 475 
 
476 
  const userChat = (
4116 stevensc 477 
    <>
5320 stevensc 478 
      <div className="personal-chat">
5206 stevensc 479 
 
5320 stevensc 480 
        <div className={`chat-header ${not_seen_messages ? 'notify' : ''}`}>
5206 stevensc 481 
 
5320 stevensc 482 
          <div className="user-info">
483 
            <img
484 
              className={online ? 'online' : 'offline'}
485 
              src={image}
486 
              alt="avatar-image"
487 
            />
488 
            <div className="info-content">
489 
              <a href={profile} target="_blank" rel="noreferrer">{name}</a>
490 
              <small>{online ? 'En línea' : 'Desconectado'}</small>
1 www 491 
            </div>
5320 stevensc 492 
          </div>
493 
 
494 
          <div className="pull-right options">
495 
            <div className="btn-group">
496 
              <i className="fa fa-gear" onClick={() => {
497 
                handleChangeTab('conference')
498 
                handleShowOptions()
499 
              }} />
500 
            </div>
501 
            <div className="btn-group">
502 
              <i className={'fa fa-minus-circle'} onClick={handleActive} />
503 
            </div>
504 
            <div className="btn-group">
505 
              <i className="fa fa-times-circle" onClick={handleCloseChat} />
506 
            </div>
507 
          </div>
508 
        </div>
509 
 
510 
        <div className="panel-body" style={{ display: !minimized ? 'block' : 'none' }}>
511 
          <StyledShowOptions className={` ${showOptions ? 'show' : 'hide'}`}>
512 
            <span className="optionBack" onClick={() => optionTab !== 'default' ? handleChangeTab('default') : handleShowOptions()}>
513 
              <i className="fa icon-arrow-left" />
514 
            </span>
515 
            <div className="optionsTab">
516 
              {tabsOptions[optionTab]}
517 
            </div>
518 
          </StyledShowOptions>
519 
 
1 www 520 
          <div
5320 stevensc 521 
            className="chat-conversation"
522 
            style={{ position: 'relative', display: showOptions ? 'none' : 'block' }}
1 www 523 
          >
5320 stevensc 524 
            <div className="reverseChatBox" ref={conversationListEl}>
525 
              <ul
526 
                className="conversation-list chatboxcontent"
527 
                id="resultchat_'+chatboxtitle+'"
528 
              >
529 
                {messagesRender()}
530 
              </ul>
1 www 531 
            </div>
5320 stevensc 532 
            <div className="wchat-footer wchat-chat-footer">
533 
              <div id="chatFrom" className="chatFrom">
5312 stevensc 534 
 
5320 stevensc 535 
                <div className="block-wchat">
536 
                  <button
537 
                    className="icon ti-clip attachment font-24 btn-attach btn-attach uploadFile"
538 
                    id="uploadFile"
539 
                    onClick={handleShareFileModalShow}
540 
                  ></button>
541 
                  <button
542 
                    className="icon ti-face-smile font-24 btn-emoji"
543 
                    id="toggle-emoji"
544 
                    onClick={handleShowEmojiTab}
545 
                  ></button>
546 
                  <div className="input-container">
547 
                    <div className="input-emoji">
548 
                      <div
549 
                        className="input-placeholder"
550 
                        style={{ visibility: 'hidden', display: 'none' }}
551 
                      >
552 
                        {CHAT_LABELS.WRITE_A_MESSAGE}
1 www 553 
                      </div>
5320 stevensc 554 
                      <textarea
555 
                        className="input chatboxtextarea"
556 
                        id="chatboxtextarea"
557 
                        name="chattxt"
558 
                        style={{ resize: 'none', height: '20px' }}
559 
                        placeholder={CHAT_LABELS.WRITE_A_MESSAGE}
560 
                        onKeyDown={handleChatBoxKeyDown}
561 
                        ref={textAreaEl}
562 
                        onFocus={() => not_seen_messages && onRead(entity)}
563 
                      />
1 www 564 
                    </div>
565 
                  </div>
566 
                </div>
5058 stevensc 567 
 
568 
                <div className="wchat-box-items-overlay-container">
5195 stevensc 569 
                  <div className="target-emoji" style={{ display: showEmojiTab ? 'block' : 'none' }} id={`smileyPanel_${id}`}>
5058 stevensc 570 
                    <Emojione onClickEmoji={handleClickEmoji} />
1 www 571 
                  </div>
572 
                </div>
5058 stevensc 573 
 
1 www 574 
              </div>
575 
            </div>
5320 stevensc 576 
 
1 www 577 
          </div>
578 
        </div>
579 
      </div>
5320 stevensc 580 
 
5052 stevensc 581 
      <SendFileModal
582 
        show={shareFileModalShow}
583 
        onHide={() => setShareFileModalShow(false)}
584 
        urlUpload={url_upload}
585 
      />
4147 stevensc 586 
      <ConferenceModal
587 
        show={showConferenceModal}
588 
        timezones={timezones}
589 
        zoomUrl={url_zoom}
4149 stevensc 590 
        onCreate={() => {
591 
          handleShowOptions()
592 
          displayConferenceModal()
593 
        }}
4147 stevensc 594 
      />
4116 stevensc 595 
    </>
5195 stevensc 596 
  )
1 www 597 
 
598 
  const groupChat = (
5206 stevensc 599 
    <>
600 
      <div className="chatbox active-chat " ref={chatboxEl}>
1 www 601 
        <div className="panel personal-chat">
5195 stevensc 602 
            <div className={`panel-heading chatboxhead ${not_seen_messages ? 'notify' : ''}`}>
1 www 603 
              <div className="panel-title-group">
604 
                <img
605 
                  className="chat-image img-circle pull-left"
606 
                  height="36"
607 
                  width="36"
608 
                  src="/images/users-group.png"
609 
                  alt="avatar-image"
610 
                />
5206 stevensc 611 
 
1 www 612 
                <div className="header-elements">
613 
                  <p>{name}</p>
5206 stevensc 614 
 
1 www 615 
                  <div className="pull-right options">
5206 stevensc 616 
                    <div className="btn-group addUser" />
617 
                    <i className="fa fa-gear" onClick={handleShowOptions} />
1 www 618 
                  </div>
5206 stevensc 619 
                  <div className="btn-group">
620 
                    <i className='fa fa-minus-circle' onClick={handleActive} />
621 
                  </div>
622 
                  <div className="btn-group">
623 
                    <i className="fa fa-times-circle" onClick={handleCloseChat} />
624 
                  </div>
1 www 625 
                </div>
5206 stevensc 626 
 
1 www 627 
              </div>
628 
            </div>
5206 stevensc 629 
 
630 
          <div className="panel-body" style={{ display: !minimized ? 'block' : 'none' }}>
5195 stevensc 631 
            <StyledShowOptions className={` ${showOptions ? 'show' : 'hide'}`}>
5320 stevensc 632 
 
1 www 633 
            </StyledShowOptions>
634 
 
635 
            <div
636 
              className="chat-conversation"
637 
              style={{
5195 stevensc 638 
                display: showOptions ? 'none' : 'block',
639 
                position: 'relative'
1 www 640 
              }}
641 
            >
642 
              <div className="reverseChatBox" ref={conversationListEl}>
643 
                <ul
644 
                  className="conversation-list chatboxcontent"
645 
                  id="resultchat_'+chatboxtitle+'"
646 
                >
647 
                  {messagesRender()}
648 
                </ul>
649 
              </div>
3604 stevensc 650 
              <div className="wchat-footer wchat-chat-footer">
1 www 651 
                <div id="chatFrom">
652 
                  <div className="block-wchat">
653 
                    <button
654 
                      className="icon ti-clip attachment font-24 btn-attach btn-attach uploadFile"
655 
                      id="uploadFile"
656 
                      onClick={handleShareFileModalShow}
657 
                    ></button>
658 
                    <button
659 
                      className="icon ti-face-smile font-24 btn-emoji"
660 
                      id="toggle-emoji"
661 
                      onClick={handleShowEmojiTab}
662 
                    ></button>
663 
                    <div className="input-container">
664 
                      <div className="input-emoji">
665 
                        <div
666 
                          className="input-placeholder"
5195 stevensc 667 
                          style={{ visibility: 'hidden', display: 'none' }}
1 www 668 
                        >
5206 stevensc 669 
                          {CHAT_LABELS.WRITE_A_MESSAGE}
1 www 670 
                        </div>
671 
                        <textarea
672 
                          className="input chatboxtextarea"
673 
                          name="chattxt"
5195 stevensc 674 
                          style={{ resize: 'none', height: '20px' }}
5206 stevensc 675 
                          placeholder={CHAT_LABELS.WRITE_A_MESSAGE}
1 www 676 
                          onKeyDown={handleChatBoxKeyDown}
677 
                          ref={textAreaEl}
3122 stevensc 678 
                          onFocus={() => not_seen_messages && onRead(entity)}
5206 stevensc 679 
                        />
1 www 680 
                        <input
681 
                          id="to_uname"
682 
                          name="to_uname"
683 
                          value="'+chatboxtitle+'"
684 
                          type="hidden"
685 
                        />
686 
                        <input
687 
                          id="from_uname"
688 
                          name="from_uname"
689 
                          value="Beenny"
690 
                          type="hidden"
691 
                        />
692 
                      </div>
693 
                    </div>
694 
                  </div>
695 
                </div>
696 
                <div className="wchat-box-items-positioning-container">
697 
                  <div className="wchat-box-items-overlay-container">
698 
                    <div
699 
                      className="target-emoji"
5195 stevensc 700 
                      style={{ display: showEmojiTab ? 'block' : 'none' }}
1 www 701 
                    >
702 
                      <div id={`smileyPanel_${id}`}>
703 
                        <div>
704 
                          <Emojione onClickEmoji={handleClickEmoji} />
705 
                        </div>
706 
                      </div>
707 
                    </div>
708 
                  </div>
709 
                </div>
710 
              </div>
711 
            </div>
712 
          </div>
713 
        </div>
714 
      </div>
715 
      <ConfirmModal
716 
        show={confirmModalShow}
717 
        onClose={handleConfirmModalShow}
718 
        onAccept={handleConfirmModalAccept}
719 
      />
4152 stevensc 720 
      <ConferenceModal
721 
        show={showConferenceModal}
722 
        timezones={timezones}
723 
        zoomUrl={url_zoom}
724 
        onCreate={() => {
725 
          handleShowOptions()
726 
          displayConferenceModal()
727 
        }}
728 
      />
5052 stevensc 729 
      <SendFileModal
730 
        show={shareFileModalShow}
731 
        onHide={() => setShareFileModalShow(false)}
732 
        urlUpload={url_upload}
733 
      />
5206 stevensc 734 
    </>
5195 stevensc 735 
  )
1 www 736 
 
737 
  switch (type) {
5195 stevensc 738 
    case 'user':
739 
      return userChat
740 
    case 'group':
741 
      return groupChat
1 www 742 
    default:
5195 stevensc 743 
      break
1 www 744 
  }
5195 stevensc 745 
}
1 www 746 
 
4115 stevensc 747 
const StyleModal = ({
748 
  title = 'Crea una conferencia',
749 
  size = 'md',
750 
  show = false,
751 
  children
752 
}) => {
753 
  const [isShow, setIsShow] = useState(show)
754 
 
4118 stevensc 755 
  useEffect(() => {
756 
    setIsShow(show)
757 
  }, [show])
758 
 
4115 stevensc 759 
  const closeModal = () => setIsShow(false)
760 
 
761 
  return (
762 
    <Modal
763 
      show={isShow}
764 
      onHide={closeModal}
5195 stevensc 765 
      style={{ overflowY: 'scroll' }}
4115 stevensc 766 
    >
767 
      <Modal.Header closeButton>
768 
        <Modal.Title>{title}</Modal.Title>
769 
      </Modal.Header>
770 
      <Modal.Body>
771 
        {children}
772 
      </Modal.Body>
773 
    </Modal>
774 
  )
775 
}
776 
 
5021 stevensc 777 
export const ConferenceModal = ({
4128 stevensc 778 
  show = false,
4134 stevensc 779 
  timezones = {},
4147 stevensc 780 
  zoomUrl = '',
781 
  onCreate = () => null
4115 stevensc 782 
}) => {
4130 stevensc 783 
  const dt = new Date()
4136 stevensc 784 
  const { handleSubmit, register, errors, reset } = useForm({ mode: 'all' })
4128 stevensc 785 
  const [date, setDate] = useState({
5195 stevensc 786 
    year: dt.toLocaleString('default', { year: 'numeric' }),
787 
    month: dt.toLocaleString('default', { month: '2-digit' }),
788 
    day: dt.toLocaleString('default', { day: '2-digit' })
4128 stevensc 789 
  })
5195 stevensc 790 
  const [time, setTime] = useState(dt.toLocaleString('es', { hour: 'numeric', minute: '2-digit', second: '2-digit' }))
4120 stevensc 791 
  const [coferenceType, setConferenceType] = useState(1)
4140 stevensc 792 
  const dispatch = useDispatch()
4115 stevensc 793 
 
4120 stevensc 794 
  const handleChange = (value) => setConferenceType(value)
795 
 
4128 stevensc 796 
  const handleDateTime = (value) => {
797 
    setDate({
798 
      ...date,
4134 stevensc 799 
      year: new Intl.DateTimeFormat('es', { year: 'numeric' }).format(value),
800 
      month: new Intl.DateTimeFormat('es', { month: '2-digit' }).format(value),
5195 stevensc 801 
      day: new Intl.DateTimeFormat('es', { day: '2-digit' }).format(value)
4128 stevensc 802 
    })
4143 stevensc 803 
    setTime(new Intl.DateTimeFormat('es', { hour: 'numeric', minute: '2-digit', second: 'numeric' }).format(value))
4128 stevensc 804 
  }
805 
 
4139 stevensc 806 
  const onSubmit = async (data) => {
807 
    try {
808 
      const formData = new FormData()
4134 stevensc 809 
 
4139 stevensc 810 
      Object.entries(data).forEach(([key, value]) => formData.append(key, value))
811 
      formData.append('date', `${date.year}-${date.month}-${date.day}`)
4144 stevensc 812 
      formData.append('time', time)
4139 stevensc 813 
 
814 
      const { data: response } = await axios.post(zoomUrl, formData)
815 
 
4140 stevensc 816 
      if (!response.success && typeof response.data === 'string') {
817 
        dispatch(addNotification({ msg: response.data, style: 'danger' }))
818 
        return
4139 stevensc 819 
      }
820 
 
4140 stevensc 821 
      if (!response.success && typeof response.data === 'object') {
822 
        Object.entries(response.data)
823 
          .forEach(([key, value]) => {
824 
            dispatch(addNotification({ msg: `${key}: ${value[0]}`, style: 'danger' }))
825 
          })
826 
        return
827 
      }
828 
 
4147 stevensc 829 
      dispatch(addNotification({ msg: response.data, style: 'success' }))
830 
      onCreate()
4139 stevensc 831 
      reset()
832 
    } catch (error) {
833 
      console.log(`Error: ${error.message}`)
4140 stevensc 834 
      return dispatch(addNotification({ msg: 'Ha ocurrido un error', style: 'danger' }))
4139 stevensc 835 
    }
4115 stevensc 836 
  }
837 
 
838 
  return (
5052 stevensc 839 
    <StyleModal title='Crea una conferencia' show={show}>
4145 stevensc 840 
      <form onSubmit={handleSubmit(onSubmit)} autoComplete="new-password">
4128 stevensc 841 
        <div className="form-group">
842 
          <label htmlFor="first_name">Título</label>
843 
          <input
844 
            type="text"
845 
            name="title"
846 
            className="form-control"
4133 stevensc 847 
            maxLength={128}
5195 stevensc 848 
            ref={register({ required: 'Por favor ingrese un título' })}
4128 stevensc 849 
          />
5052 stevensc 850 
          {errors.title && <FormErrorFeedback>{errors.title.message}</FormErrorFeedback>}
4128 stevensc 851 
        </div>
852 
        <div className="form-group">
4133 stevensc 853 
          <label htmlFor="first_name">Descripción</label>
854 
          <input
855 
            type="text"
856 
            name="description"
857 
            className="form-control"
5195 stevensc 858 
            ref={register({ required: 'Por favor ingrese una descripción' })}
4133 stevensc 859 
          />
5052 stevensc 860 
          {errors.description && <FormErrorFeedback>{errors.description.message}</FormErrorFeedback>}
4133 stevensc 861 
        </div>
862 
        <div className="form-group">
4134 stevensc 863 
          <label htmlFor="timezone">Tipo de conferencia</label>
864 
          <select
865 
            name="type"
866 
            className="form-control"
867 
            onChange={({ target }) => handleChange(target.value)}
4137 stevensc 868 
            ref={register}
4134 stevensc 869 
          >
870 
            <option value='i'>
871 
              Inmediata
872 
            </option>
873 
            <option value='s'>
874 
              Programada
875 
            </option>
876 
          </select>
877 
        </div>
878 
        {
879 
          coferenceType === 's' &&
880 
          <div className="form-group">
881 
            <label htmlFor="timezone">Horario</label>
882 
            <Datetime
883 
              dateFormat="DD-MM-YYYY"
5017 stevensc 884 
              onChange={(e) => {
5019 stevensc 885 
                if (e.toDate) {
886 
                  handleDateTime(e.toDate())
5017 stevensc 887 
                }
888 
              }}
4134 stevensc 889 
              inputProps={{ className: 'form-control' }}
4138 stevensc 890 
              initialValue={Date.parse(new Date())}
4134 stevensc 891 
              closeOnSelect
892 
            />
893 
          </div>
894 
        }
895 
        <div className="form-group">
4128 stevensc 896 
          <label htmlFor="timezone">Zona horaria</label>
897 
          <select
898 
            className="form-control"
899 
            name="timezone"
5195 stevensc 900 
            ref={register({ required: 'Por favor elige una Zona horaria' })}
4128 stevensc 901 
          >
902 
            <option value="" hidden>
903 
              Zona horaria
904 
            </option>
905 
            {Object.entries(timezones).map(([key, value]) => (
906 
              <option value={key} key={key}>
907 
                {value}
4116 stevensc 908 
              </option>
4128 stevensc 909 
            ))}
910 
          </select>
911 
          {errors.timezone && <FormErrorFeedback>{errors.timezone.message}</FormErrorFeedback>}
4116 stevensc 912 
        </div>
4133 stevensc 913 
        <div className="form-group">
914 
          <label htmlFor="timezone">Duración</label>
915 
          <select
916 
            className="form-control"
917 
            name="duration"
4137 stevensc 918 
            ref={register}
4133 stevensc 919 
          >
920 
            <option value={5}>5-min</option>
921 
            <option value={10}>10-min</option>
922 
            <option value={15}>15-min</option>
923 
            <option value={20}>20-min</option>
924 
            <option value={25}>25-min</option>
925 
            <option value={30}>30-min</option>
926 
            <option value={35}>35-min</option>
927 
            <option value={40}>40-min</option>
928 
            <option value={45}>45-min</option>
929 
          </select>
930 
        </div>
931 
        <div className="form-group">
932 
          <label htmlFor="first_name">Contraseña de ingreso</label>
933 
          <input
934 
            type="password"
935 
            name="password"
936 
            className="form-control"
4137 stevensc 937 
            ref={register({
5195 stevensc 938 
              required: 'Por favor ingrese una contraseña',
939 
              maxLength: { value: 6, message: 'La contraseña debe tener al menos 6 digitos' }
4137 stevensc 940 
            })}
4133 stevensc 941 
          />
5052 stevensc 942 
          {errors.password && <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>}
4115 stevensc 943 
        </div>
5052 stevensc 944 
        <button className="btn btn-primary" type="submit">
4116 stevensc 945 
          Crear
946 
        </button>
4115 stevensc 947 
      </form>
5206 stevensc 948 
    </StyleModal>
4115 stevensc 949 
  )
950 
}
951 
 
5195 stevensc 952 
export default React.memo(PersonalChat)