Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5326 | Rev 5329 | 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 = {
5328 stevensc 344 
    group:
5320 stevensc 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 
        }
5328 stevensc 403 
      </ul>,
404 
    conference:
5320 stevensc 405 
      <ul>
406 
        <li className="optionsTab__option" onClick={displayConferenceModal}>
407 
          <span className="optionsTab__option__icon">
408 
            <i className="fa fa-user-plus" />
409 
          </span>
410 
          {CHAT_LABELS.CREATE_CONFERENCE}
411 
        </li>
5328 stevensc 412 
      </ul>,
413 
    addContacts:
5320 stevensc 414 
      <>
415 
        {availableContactsToAdd.length
416 
          ? <EmptySection message={CHAT_LABELS.NOT_CONTACTS} align='left' />
417 
          : availableContactsToAdd.map(({ image, name, id }) =>
1 www 418 
            <div className="addPersonToGroupTab__person" key={id}>
2664 stevensc 419 
              <div className="d-inline-flex" style={{ gap: '5px' }}>
2663 stevensc 420 
                <img
421 
                  className="chat-image img-circle pull-left"
422 
                  height="36"
423 
                  width="36"
424 
                  src={image}
425 
                  alt="image-image"
426 
                />
427 
                <div className="name">{name}</div>
428 
              </div>
5206 stevensc 429 
              <span className='cursor-pointer' onClick={() => handleAddPersonToGroup(id)}>
430 
                <i className="fa fa-plus-circle" />
1 www 431 
              </span>
432 
            </div>
5320 stevensc 433 
          )}
5328 stevensc 434 
      </>,
435 
    listContacts:
5320 stevensc 436 
      <>
437 
        <div className='group__search'>
438 
          <SearchIcon />
439 
          <input
440 
            type='text'
441 
            placeholder={CHAT_LABELS.SEARCH}
442 
            onChange={(e) => setSearch(e.target.value)}
443 
          />
444 
        </div>
4389 stevensc 445 
        {filtredGroupList.length
446 
          ? filtredGroupList.map(({ image, name, url_remove_from_group, id }) => {
447 
            return (
1 www 448 
              <div className="addPersonToGroupTab__person" key={id}>
5195 stevensc 449 
                <div style={{ display: 'flex', alignItems: 'center' }}>
1 www 450 
                  <img
451 
                    className="chat-image img-circle pull-left"
452 
                    height="36"
453 
                    width="36"
454 
                    src={image}
455 
                    alt="image-image"
456 
                  />
457 
                  <div className="name">{name}</div>
458 
                </div>
4389 stevensc 459 
                {url_remove_from_group &&
460 
                  <span className="cursor-pointer" onClick={() => handleDeletePersonFromGroup(url_remove_from_group)}>
461 
                    <i className="fa fa-user-times" />
1 www 462 
                  </span>
4389 stevensc 463 
                }
1 www 464 
              </div>
465 
            )
4389 stevensc 466 
          })
5206 stevensc 467 
          : <div className="addPersonToGroupTab__person">{CHAT_LABELS.NOT_CONTACTS}</div>
4389 stevensc 468 
        }
5320 stevensc 469 
      </>
470 
  }
1 www 471 
 
5328 stevensc 472 
  return (
4116 stevensc 473 
    <>
5320 stevensc 474 
      <div className="personal-chat">
5206 stevensc 475 
 
5320 stevensc 476 
        <div className={`chat-header ${not_seen_messages ? 'notify' : ''}`}>
5326 stevensc 477 
          <img src={image} alt="avatar-image" />
478 
          <div className="info-content">
479 
            <a href={profile} target="_blank" rel="noreferrer">{name}</a>
5328 stevensc 480 
            {type === 'user' && <small className={online ? 'online' : 'offline'} >{online ? 'En línea' : 'Desconectado'}</small>}
5326 stevensc 481 
          </div>
5206 stevensc 482 
 
5323 stevensc 483 
          <div className="options">
5328 stevensc 484 
            <i className="cursor-pointer fa fa-gear"
5326 stevensc 485 
              onClick={() => {
5328 stevensc 486 
                if (type === 'user') handleChangeTab('conference')
5320 stevensc 487 
                handleShowOptions()
488 
              }} />
5328 stevensc 489 
            <i className={'cursor-pointer fa fa-minus-circle'} onClick={handleActive} />
490 
            <i className="cursor-pointer fa fa-times-circle" onClick={handleCloseChat} />
5320 stevensc 491 
          </div>
492 
        </div>
493 
 
494 
        <div className="panel-body" style={{ display: !minimized ? 'block' : 'none' }}>
5323 stevensc 495 
 
5320 stevensc 496 
          <StyledShowOptions className={` ${showOptions ? 'show' : 'hide'}`}>
497 
            <span className="optionBack" onClick={() => optionTab !== 'default' ? handleChangeTab('default') : handleShowOptions()}>
498 
              <i className="fa icon-arrow-left" />
499 
            </span>
500 
            <div className="optionsTab">
501 
              {tabsOptions[optionTab]}
502 
            </div>
503 
          </StyledShowOptions>
504 
 
5328 stevensc 505 
          <div className="chat-conversation" style={{ display: showOptions ? 'none' : 'block' }}>
5320 stevensc 506 
            <div className="reverseChatBox" ref={conversationListEl}>
5328 stevensc 507 
              <ul className="conversation-list chatboxcontent">
5320 stevensc 508 
                {messagesRender()}
509 
              </ul>
1 www 510 
            </div>
5328 stevensc 511 
 
5320 stevensc 512 
            <div className="wchat-footer wchat-chat-footer">
513 
              <div id="chatFrom" className="chatFrom">
5312 stevensc 514 
 
5320 stevensc 515 
                <div className="block-wchat">
516 
                  <button
517 
                    className="icon ti-clip attachment font-24 btn-attach btn-attach uploadFile"
518 
                    id="uploadFile"
519 
                    onClick={handleShareFileModalShow}
520 
                  ></button>
521 
                  <button
522 
                    className="icon ti-face-smile font-24 btn-emoji"
523 
                    id="toggle-emoji"
524 
                    onClick={handleShowEmojiTab}
525 
                  ></button>
526 
                  <div className="input-container">
527 
                    <div className="input-emoji">
528 
                      <div
529 
                        className="input-placeholder"
530 
                        style={{ visibility: 'hidden', display: 'none' }}
531 
                      >
532 
                        {CHAT_LABELS.WRITE_A_MESSAGE}
1 www 533 
                      </div>
5320 stevensc 534 
                      <textarea
535 
                        className="input chatboxtextarea"
536 
                        id="chatboxtextarea"
537 
                        name="chattxt"
538 
                        style={{ resize: 'none', height: '20px' }}
539 
                        placeholder={CHAT_LABELS.WRITE_A_MESSAGE}
540 
                        onKeyDown={handleChatBoxKeyDown}
541 
                        ref={textAreaEl}
542 
                        onFocus={() => not_seen_messages && onRead(entity)}
543 
                      />
1 www 544 
                    </div>
545 
                  </div>
546 
                </div>
5058 stevensc 547 
 
548 
                <div className="wchat-box-items-overlay-container">
5195 stevensc 549 
                  <div className="target-emoji" style={{ display: showEmojiTab ? 'block' : 'none' }} id={`smileyPanel_${id}`}>
5058 stevensc 550 
                    <Emojione onClickEmoji={handleClickEmoji} />
1 www 551 
                  </div>
552 
                </div>
5058 stevensc 553 
 
1 www 554 
              </div>
555 
            </div>
5320 stevensc 556 
 
1 www 557 
          </div>
558 
        </div>
559 
      </div>
560 
      <ConfirmModal
561 
        show={confirmModalShow}
562 
        onClose={handleConfirmModalShow}
563 
        onAccept={handleConfirmModalAccept}
564 
      />
4152 stevensc 565 
      <ConferenceModal
566 
        show={showConferenceModal}
567 
        timezones={timezones}
568 
        zoomUrl={url_zoom}
569 
        onCreate={() => {
570 
          handleShowOptions()
571 
          displayConferenceModal()
572 
        }}
573 
      />
5052 stevensc 574 
      <SendFileModal
575 
        show={shareFileModalShow}
576 
        onHide={() => setShareFileModalShow(false)}
577 
        urlUpload={url_upload}
578 
      />
5206 stevensc 579 
    </>
5195 stevensc 580 
  )
581 
}
1 www 582 
 
4115 stevensc 583 
const StyleModal = ({
584 
  title = 'Crea una conferencia',
585 
  size = 'md',
586 
  show = false,
587 
  children
588 
}) => {
589 
  const [isShow, setIsShow] = useState(show)
590 
 
4118 stevensc 591 
  useEffect(() => {
592 
    setIsShow(show)
593 
  }, [show])
594 
 
4115 stevensc 595 
  const closeModal = () => setIsShow(false)
596 
 
597 
  return (
598 
    <Modal
599 
      show={isShow}
600 
      onHide={closeModal}
5195 stevensc 601 
      style={{ overflowY: 'scroll' }}
4115 stevensc 602 
    >
603 
      <Modal.Header closeButton>
604 
        <Modal.Title>{title}</Modal.Title>
605 
      </Modal.Header>
606 
      <Modal.Body>
607 
        {children}
608 
      </Modal.Body>
609 
    </Modal>
610 
  )
611 
}
612 
 
5021 stevensc 613 
export const ConferenceModal = ({
4128 stevensc 614 
  show = false,
4134 stevensc 615 
  timezones = {},
4147 stevensc 616 
  zoomUrl = '',
617 
  onCreate = () => null
4115 stevensc 618 
}) => {
4130 stevensc 619 
  const dt = new Date()
4136 stevensc 620 
  const { handleSubmit, register, errors, reset } = useForm({ mode: 'all' })
4128 stevensc 621 
  const [date, setDate] = useState({
5195 stevensc 622 
    year: dt.toLocaleString('default', { year: 'numeric' }),
623 
    month: dt.toLocaleString('default', { month: '2-digit' }),
624 
    day: dt.toLocaleString('default', { day: '2-digit' })
4128 stevensc 625 
  })
5195 stevensc 626 
  const [time, setTime] = useState(dt.toLocaleString('es', { hour: 'numeric', minute: '2-digit', second: '2-digit' }))
4120 stevensc 627 
  const [coferenceType, setConferenceType] = useState(1)
4140 stevensc 628 
  const dispatch = useDispatch()
4115 stevensc 629 
 
4120 stevensc 630 
  const handleChange = (value) => setConferenceType(value)
631 
 
4128 stevensc 632 
  const handleDateTime = (value) => {
633 
    setDate({
634 
      ...date,
4134 stevensc 635 
      year: new Intl.DateTimeFormat('es', { year: 'numeric' }).format(value),
636 
      month: new Intl.DateTimeFormat('es', { month: '2-digit' }).format(value),
5195 stevensc 637 
      day: new Intl.DateTimeFormat('es', { day: '2-digit' }).format(value)
4128 stevensc 638 
    })
4143 stevensc 639 
    setTime(new Intl.DateTimeFormat('es', { hour: 'numeric', minute: '2-digit', second: 'numeric' }).format(value))
4128 stevensc 640 
  }
641 
 
4139 stevensc 642 
  const onSubmit = async (data) => {
643 
    try {
644 
      const formData = new FormData()
4134 stevensc 645 
 
4139 stevensc 646 
      Object.entries(data).forEach(([key, value]) => formData.append(key, value))
647 
      formData.append('date', `${date.year}-${date.month}-${date.day}`)
4144 stevensc 648 
      formData.append('time', time)
4139 stevensc 649 
 
650 
      const { data: response } = await axios.post(zoomUrl, formData)
651 
 
4140 stevensc 652 
      if (!response.success && typeof response.data === 'string') {
653 
        dispatch(addNotification({ msg: response.data, style: 'danger' }))
654 
        return
4139 stevensc 655 
      }
656 
 
4140 stevensc 657 
      if (!response.success && typeof response.data === 'object') {
658 
        Object.entries(response.data)
659 
          .forEach(([key, value]) => {
660 
            dispatch(addNotification({ msg: `${key}: ${value[0]}`, style: 'danger' }))
661 
          })
662 
        return
663 
      }
664 
 
4147 stevensc 665 
      dispatch(addNotification({ msg: response.data, style: 'success' }))
666 
      onCreate()
4139 stevensc 667 
      reset()
668 
    } catch (error) {
669 
      console.log(`Error: ${error.message}`)
4140 stevensc 670 
      return dispatch(addNotification({ msg: 'Ha ocurrido un error', style: 'danger' }))
4139 stevensc 671 
    }
4115 stevensc 672 
  }
673 
 
674 
  return (
5052 stevensc 675 
    <StyleModal title='Crea una conferencia' show={show}>
4145 stevensc 676 
      <form onSubmit={handleSubmit(onSubmit)} autoComplete="new-password">
4128 stevensc 677 
        <div className="form-group">
678 
          <label htmlFor="first_name">Título</label>
679 
          <input
680 
            type="text"
681 
            name="title"
682 
            className="form-control"
4133 stevensc 683 
            maxLength={128}
5195 stevensc 684 
            ref={register({ required: 'Por favor ingrese un título' })}
4128 stevensc 685 
          />
5052 stevensc 686 
          {errors.title && <FormErrorFeedback>{errors.title.message}</FormErrorFeedback>}
4128 stevensc 687 
        </div>
688 
        <div className="form-group">
4133 stevensc 689 
          <label htmlFor="first_name">Descripción</label>
690 
          <input
691 
            type="text"
692 
            name="description"
693 
            className="form-control"
5195 stevensc 694 
            ref={register({ required: 'Por favor ingrese una descripción' })}
4133 stevensc 695 
          />
5052 stevensc 696 
          {errors.description && <FormErrorFeedback>{errors.description.message}</FormErrorFeedback>}
4133 stevensc 697 
        </div>
698 
        <div className="form-group">
4134 stevensc 699 
          <label htmlFor="timezone">Tipo de conferencia</label>
700 
          <select
701 
            name="type"
702 
            className="form-control"
703 
            onChange={({ target }) => handleChange(target.value)}
4137 stevensc 704 
            ref={register}
4134 stevensc 705 
          >
706 
            <option value='i'>
707 
              Inmediata
708 
            </option>
709 
            <option value='s'>
710 
              Programada
711 
            </option>
712 
          </select>
713 
        </div>
714 
        {
715 
          coferenceType === 's' &&
716 
          <div className="form-group">
717 
            <label htmlFor="timezone">Horario</label>
718 
            <Datetime
719 
              dateFormat="DD-MM-YYYY"
5017 stevensc 720 
              onChange={(e) => {
5019 stevensc 721 
                if (e.toDate) {
722 
                  handleDateTime(e.toDate())
5017 stevensc 723 
                }
724 
              }}
4134 stevensc 725 
              inputProps={{ className: 'form-control' }}
4138 stevensc 726 
              initialValue={Date.parse(new Date())}
4134 stevensc 727 
              closeOnSelect
728 
            />
729 
          </div>
730 
        }
731 
        <div className="form-group">
4128 stevensc 732 
          <label htmlFor="timezone">Zona horaria</label>
733 
          <select
734 
            className="form-control"
735 
            name="timezone"
5195 stevensc 736 
            ref={register({ required: 'Por favor elige una Zona horaria' })}
4128 stevensc 737 
          >
738 
            <option value="" hidden>
739 
              Zona horaria
740 
            </option>
741 
            {Object.entries(timezones).map(([key, value]) => (
742 
              <option value={key} key={key}>
743 
                {value}
4116 stevensc 744 
              </option>
4128 stevensc 745 
            ))}
746 
          </select>
747 
          {errors.timezone && <FormErrorFeedback>{errors.timezone.message}</FormErrorFeedback>}
4116 stevensc 748 
        </div>
4133 stevensc 749 
        <div className="form-group">
750 
          <label htmlFor="timezone">Duración</label>
751 
          <select
752 
            className="form-control"
753 
            name="duration"
4137 stevensc 754 
            ref={register}
4133 stevensc 755 
          >
756 
            <option value={5}>5-min</option>
757 
            <option value={10}>10-min</option>
758 
            <option value={15}>15-min</option>
759 
            <option value={20}>20-min</option>
760 
            <option value={25}>25-min</option>
761 
            <option value={30}>30-min</option>
762 
            <option value={35}>35-min</option>
763 
            <option value={40}>40-min</option>
764 
            <option value={45}>45-min</option>
765 
          </select>
766 
        </div>
767 
        <div className="form-group">
768 
          <label htmlFor="first_name">Contraseña de ingreso</label>
769 
          <input
770 
            type="password"
771 
            name="password"
772 
            className="form-control"
4137 stevensc 773 
            ref={register({
5195 stevensc 774 
              required: 'Por favor ingrese una contraseña',
775 
              maxLength: { value: 6, message: 'La contraseña debe tener al menos 6 digitos' }
4137 stevensc 776 
            })}
4133 stevensc 777 
          />
5052 stevensc 778 
          {errors.password && <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>}
4115 stevensc 779 
        </div>
5052 stevensc 780 
        <button className="btn btn-primary" type="submit">
4116 stevensc 781 
          Crear
782 
        </button>
4115 stevensc 783 
      </form>
5206 stevensc 784 
    </StyleModal>
4115 stevensc 785 
  )
786 
}
787 
 
5195 stevensc 788 
export default React.memo(PersonalChat)