Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5323 | Rev 5328 | 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' : ''}`}>
5326 stevensc 481 
          <img src={image} alt="avatar-image" />
482 
          <div className="info-content">
483 
            <a href={profile} target="_blank" rel="noreferrer">{name}</a>
484 
            <small className={online ? 'online' : 'offline'} >{online ? 'En línea' : 'Desconectado'}</small>
485 
          </div>
5206 stevensc 486 
 
5323 stevensc 487 
          <div className="options">
5326 stevensc 488 
              <i className="cursor-pointer fa fa-gear"
489 
              onClick={() => {
5320 stevensc 490 
                handleChangeTab('conference')
491 
                handleShowOptions()
492 
              }} />
5326 stevensc 493 
              <i className={'cursor-pointer fa fa-minus-circle'} onClick={handleActive} />
494 
              <i className="cursor-pointer fa fa-times-circle" onClick={handleCloseChat} />
5320 stevensc 495 
          </div>
496 
        </div>
497 
 
498 
        <div className="panel-body" style={{ display: !minimized ? 'block' : 'none' }}>
5323 stevensc 499 
 
5320 stevensc 500 
          <StyledShowOptions className={` ${showOptions ? 'show' : 'hide'}`}>
501 
            <span className="optionBack" onClick={() => optionTab !== 'default' ? handleChangeTab('default') : handleShowOptions()}>
502 
              <i className="fa icon-arrow-left" />
503 
            </span>
504 
            <div className="optionsTab">
505 
              {tabsOptions[optionTab]}
506 
            </div>
507 
          </StyledShowOptions>
508 
 
1 www 509 
          <div
5320 stevensc 510 
            className="chat-conversation"
511 
            style={{ position: 'relative', display: showOptions ? 'none' : 'block' }}
1 www 512 
          >
5320 stevensc 513 
            <div className="reverseChatBox" ref={conversationListEl}>
514 
              <ul
515 
                className="conversation-list chatboxcontent"
516 
                id="resultchat_'+chatboxtitle+'"
517 
              >
518 
                {messagesRender()}
519 
              </ul>
1 www 520 
            </div>
5320 stevensc 521 
            <div className="wchat-footer wchat-chat-footer">
522 
              <div id="chatFrom" className="chatFrom">
5312 stevensc 523 
 
5320 stevensc 524 
                <div className="block-wchat">
525 
                  <button
526 
                    className="icon ti-clip attachment font-24 btn-attach btn-attach uploadFile"
527 
                    id="uploadFile"
528 
                    onClick={handleShareFileModalShow}
529 
                  ></button>
530 
                  <button
531 
                    className="icon ti-face-smile font-24 btn-emoji"
532 
                    id="toggle-emoji"
533 
                    onClick={handleShowEmojiTab}
534 
                  ></button>
535 
                  <div className="input-container">
536 
                    <div className="input-emoji">
537 
                      <div
538 
                        className="input-placeholder"
539 
                        style={{ visibility: 'hidden', display: 'none' }}
540 
                      >
541 
                        {CHAT_LABELS.WRITE_A_MESSAGE}
1 www 542 
                      </div>
5320 stevensc 543 
                      <textarea
544 
                        className="input chatboxtextarea"
545 
                        id="chatboxtextarea"
546 
                        name="chattxt"
547 
                        style={{ resize: 'none', height: '20px' }}
548 
                        placeholder={CHAT_LABELS.WRITE_A_MESSAGE}
549 
                        onKeyDown={handleChatBoxKeyDown}
550 
                        ref={textAreaEl}
551 
                        onFocus={() => not_seen_messages && onRead(entity)}
552 
                      />
1 www 553 
                    </div>
554 
                  </div>
555 
                </div>
5058 stevensc 556 
 
557 
                <div className="wchat-box-items-overlay-container">
5195 stevensc 558 
                  <div className="target-emoji" style={{ display: showEmojiTab ? 'block' : 'none' }} id={`smileyPanel_${id}`}>
5058 stevensc 559 
                    <Emojione onClickEmoji={handleClickEmoji} />
1 www 560 
                  </div>
561 
                </div>
5058 stevensc 562 
 
1 www 563 
              </div>
564 
            </div>
5320 stevensc 565 
 
1 www 566 
          </div>
567 
        </div>
568 
      </div>
5320 stevensc 569 
 
5052 stevensc 570 
      <SendFileModal
571 
        show={shareFileModalShow}
572 
        onHide={() => setShareFileModalShow(false)}
573 
        urlUpload={url_upload}
574 
      />
4147 stevensc 575 
      <ConferenceModal
576 
        show={showConferenceModal}
577 
        timezones={timezones}
578 
        zoomUrl={url_zoom}
4149 stevensc 579 
        onCreate={() => {
580 
          handleShowOptions()
581 
          displayConferenceModal()
582 
        }}
4147 stevensc 583 
      />
4116 stevensc 584 
    </>
5195 stevensc 585 
  )
1 www 586 
 
587 
  const groupChat = (
5206 stevensc 588 
    <>
589 
      <div className="chatbox active-chat " ref={chatboxEl}>
1 www 590 
        <div className="panel personal-chat">
5326 stevensc 591 
          <div className={`panel-heading chatboxhead ${not_seen_messages ? 'notify' : ''}`}>
592 
            <div className="panel-title-group">
593 
              <img
594 
                className="chat-image img-circle pull-left"
595 
                height="36"
596 
                width="36"
597 
                src="/images/users-group.png"
598 
                alt="avatar-image"
599 
              />
5206 stevensc 600 
 
5326 stevensc 601 
              <div className="header-elements">
602 
                <p>{name}</p>
5206 stevensc 603 
 
5326 stevensc 604 
                <div className="pull-right options">
605 
                  <div className="btn-group addUser" />
606 
                  <i className="fa fa-gear" onClick={handleShowOptions} />
1 www 607 
                </div>
5326 stevensc 608 
                <div className="btn-group">
609 
                  <i className='fa fa-minus-circle' onClick={handleActive} />
610 
                </div>
611 
                <div className="btn-group">
612 
                  <i className="fa fa-times-circle" onClick={handleCloseChat} />
613 
                </div>
614 
              </div>
5206 stevensc 615 
 
1 www 616 
            </div>
5326 stevensc 617 
          </div>
5206 stevensc 618 
 
619 
          <div className="panel-body" style={{ display: !minimized ? 'block' : 'none' }}>
5195 stevensc 620 
            <StyledShowOptions className={` ${showOptions ? 'show' : 'hide'}`}>
5320 stevensc 621 
 
1 www 622 
            </StyledShowOptions>
623 
 
624 
            <div
625 
              className="chat-conversation"
626 
              style={{
5195 stevensc 627 
                display: showOptions ? 'none' : 'block',
628 
                position: 'relative'
1 www 629 
              }}
630 
            >
631 
              <div className="reverseChatBox" ref={conversationListEl}>
632 
                <ul
633 
                  className="conversation-list chatboxcontent"
634 
                  id="resultchat_'+chatboxtitle+'"
635 
                >
636 
                  {messagesRender()}
637 
                </ul>
638 
              </div>
3604 stevensc 639 
              <div className="wchat-footer wchat-chat-footer">
1 www 640 
                <div id="chatFrom">
641 
                  <div className="block-wchat">
642 
                    <button
643 
                      className="icon ti-clip attachment font-24 btn-attach btn-attach uploadFile"
644 
                      id="uploadFile"
645 
                      onClick={handleShareFileModalShow}
646 
                    ></button>
647 
                    <button
648 
                      className="icon ti-face-smile font-24 btn-emoji"
649 
                      id="toggle-emoji"
650 
                      onClick={handleShowEmojiTab}
651 
                    ></button>
652 
                    <div className="input-container">
653 
                      <div className="input-emoji">
654 
                        <div
655 
                          className="input-placeholder"
5195 stevensc 656 
                          style={{ visibility: 'hidden', display: 'none' }}
1 www 657 
                        >
5206 stevensc 658 
                          {CHAT_LABELS.WRITE_A_MESSAGE}
1 www 659 
                        </div>
660 
                        <textarea
661 
                          className="input chatboxtextarea"
662 
                          name="chattxt"
5195 stevensc 663 
                          style={{ resize: 'none', height: '20px' }}
5206 stevensc 664 
                          placeholder={CHAT_LABELS.WRITE_A_MESSAGE}
1 www 665 
                          onKeyDown={handleChatBoxKeyDown}
666 
                          ref={textAreaEl}
3122 stevensc 667 
                          onFocus={() => not_seen_messages && onRead(entity)}
5206 stevensc 668 
                        />
1 www 669 
                        <input
670 
                          id="to_uname"
671 
                          name="to_uname"
672 
                          value="'+chatboxtitle+'"
673 
                          type="hidden"
674 
                        />
675 
                        <input
676 
                          id="from_uname"
677 
                          name="from_uname"
678 
                          value="Beenny"
679 
                          type="hidden"
680 
                        />
681 
                      </div>
682 
                    </div>
683 
                  </div>
684 
                </div>
685 
                <div className="wchat-box-items-positioning-container">
686 
                  <div className="wchat-box-items-overlay-container">
687 
                    <div
688 
                      className="target-emoji"
5195 stevensc 689 
                      style={{ display: showEmojiTab ? 'block' : 'none' }}
1 www 690 
                    >
691 
                      <div id={`smileyPanel_${id}`}>
692 
                        <div>
693 
                          <Emojione onClickEmoji={handleClickEmoji} />
694 
                        </div>
695 
                      </div>
696 
                    </div>
697 
                  </div>
698 
                </div>
699 
              </div>
700 
            </div>
701 
          </div>
702 
        </div>
703 
      </div>
704 
      <ConfirmModal
705 
        show={confirmModalShow}
706 
        onClose={handleConfirmModalShow}
707 
        onAccept={handleConfirmModalAccept}
708 
      />
4152 stevensc 709 
      <ConferenceModal
710 
        show={showConferenceModal}
711 
        timezones={timezones}
712 
        zoomUrl={url_zoom}
713 
        onCreate={() => {
714 
          handleShowOptions()
715 
          displayConferenceModal()
716 
        }}
717 
      />
5052 stevensc 718 
      <SendFileModal
719 
        show={shareFileModalShow}
720 
        onHide={() => setShareFileModalShow(false)}
721 
        urlUpload={url_upload}
722 
      />
5206 stevensc 723 
    </>
5195 stevensc 724 
  )
1 www 725 
 
726 
  switch (type) {
5195 stevensc 727 
    case 'user':
728 
      return userChat
729 
    case 'group':
730 
      return groupChat
1 www 731 
    default:
5195 stevensc 732 
      break
1 www 733 
  }
5195 stevensc 734 
}
1 www 735 
 
4115 stevensc 736 
const StyleModal = ({
737 
  title = 'Crea una conferencia',
738 
  size = 'md',
739 
  show = false,
740 
  children
741 
}) => {
742 
  const [isShow, setIsShow] = useState(show)
743 
 
4118 stevensc 744 
  useEffect(() => {
745 
    setIsShow(show)
746 
  }, [show])
747 
 
4115 stevensc 748 
  const closeModal = () => setIsShow(false)
749 
 
750 
  return (
751 
    <Modal
752 
      show={isShow}
753 
      onHide={closeModal}
5195 stevensc 754 
      style={{ overflowY: 'scroll' }}
4115 stevensc 755 
    >
756 
      <Modal.Header closeButton>
757 
        <Modal.Title>{title}</Modal.Title>
758 
      </Modal.Header>
759 
      <Modal.Body>
760 
        {children}
761 
      </Modal.Body>
762 
    </Modal>
763 
  )
764 
}
765 
 
5021 stevensc 766 
export const ConferenceModal = ({
4128 stevensc 767 
  show = false,
4134 stevensc 768 
  timezones = {},
4147 stevensc 769 
  zoomUrl = '',
770 
  onCreate = () => null
4115 stevensc 771 
}) => {
4130 stevensc 772 
  const dt = new Date()
4136 stevensc 773 
  const { handleSubmit, register, errors, reset } = useForm({ mode: 'all' })
4128 stevensc 774 
  const [date, setDate] = useState({
5195 stevensc 775 
    year: dt.toLocaleString('default', { year: 'numeric' }),
776 
    month: dt.toLocaleString('default', { month: '2-digit' }),
777 
    day: dt.toLocaleString('default', { day: '2-digit' })
4128 stevensc 778 
  })
5195 stevensc 779 
  const [time, setTime] = useState(dt.toLocaleString('es', { hour: 'numeric', minute: '2-digit', second: '2-digit' }))
4120 stevensc 780 
  const [coferenceType, setConferenceType] = useState(1)
4140 stevensc 781 
  const dispatch = useDispatch()
4115 stevensc 782 
 
4120 stevensc 783 
  const handleChange = (value) => setConferenceType(value)
784 
 
4128 stevensc 785 
  const handleDateTime = (value) => {
786 
    setDate({
787 
      ...date,
4134 stevensc 788 
      year: new Intl.DateTimeFormat('es', { year: 'numeric' }).format(value),
789 
      month: new Intl.DateTimeFormat('es', { month: '2-digit' }).format(value),
5195 stevensc 790 
      day: new Intl.DateTimeFormat('es', { day: '2-digit' }).format(value)
4128 stevensc 791 
    })
4143 stevensc 792 
    setTime(new Intl.DateTimeFormat('es', { hour: 'numeric', minute: '2-digit', second: 'numeric' }).format(value))
4128 stevensc 793 
  }
794 
 
4139 stevensc 795 
  const onSubmit = async (data) => {
796 
    try {
797 
      const formData = new FormData()
4134 stevensc 798 
 
4139 stevensc 799 
      Object.entries(data).forEach(([key, value]) => formData.append(key, value))
800 
      formData.append('date', `${date.year}-${date.month}-${date.day}`)
4144 stevensc 801 
      formData.append('time', time)
4139 stevensc 802 
 
803 
      const { data: response } = await axios.post(zoomUrl, formData)
804 
 
4140 stevensc 805 
      if (!response.success && typeof response.data === 'string') {
806 
        dispatch(addNotification({ msg: response.data, style: 'danger' }))
807 
        return
4139 stevensc 808 
      }
809 
 
4140 stevensc 810 
      if (!response.success && typeof response.data === 'object') {
811 
        Object.entries(response.data)
812 
          .forEach(([key, value]) => {
813 
            dispatch(addNotification({ msg: `${key}: ${value[0]}`, style: 'danger' }))
814 
          })
815 
        return
816 
      }
817 
 
4147 stevensc 818 
      dispatch(addNotification({ msg: response.data, style: 'success' }))
819 
      onCreate()
4139 stevensc 820 
      reset()
821 
    } catch (error) {
822 
      console.log(`Error: ${error.message}`)
4140 stevensc 823 
      return dispatch(addNotification({ msg: 'Ha ocurrido un error', style: 'danger' }))
4139 stevensc 824 
    }
4115 stevensc 825 
  }
826 
 
827 
  return (
5052 stevensc 828 
    <StyleModal title='Crea una conferencia' show={show}>
4145 stevensc 829 
      <form onSubmit={handleSubmit(onSubmit)} autoComplete="new-password">
4128 stevensc 830 
        <div className="form-group">
831 
          <label htmlFor="first_name">Título</label>
832 
          <input
833 
            type="text"
834 
            name="title"
835 
            className="form-control"
4133 stevensc 836 
            maxLength={128}
5195 stevensc 837 
            ref={register({ required: 'Por favor ingrese un título' })}
4128 stevensc 838 
          />
5052 stevensc 839 
          {errors.title && <FormErrorFeedback>{errors.title.message}</FormErrorFeedback>}
4128 stevensc 840 
        </div>
841 
        <div className="form-group">
4133 stevensc 842 
          <label htmlFor="first_name">Descripción</label>
843 
          <input
844 
            type="text"
845 
            name="description"
846 
            className="form-control"
5195 stevensc 847 
            ref={register({ required: 'Por favor ingrese una descripción' })}
4133 stevensc 848 
          />
5052 stevensc 849 
          {errors.description && <FormErrorFeedback>{errors.description.message}</FormErrorFeedback>}
4133 stevensc 850 
        </div>
851 
        <div className="form-group">
4134 stevensc 852 
          <label htmlFor="timezone">Tipo de conferencia</label>
853 
          <select
854 
            name="type"
855 
            className="form-control"
856 
            onChange={({ target }) => handleChange(target.value)}
4137 stevensc 857 
            ref={register}
4134 stevensc 858 
          >
859 
            <option value='i'>
860 
              Inmediata
861 
            </option>
862 
            <option value='s'>
863 
              Programada
864 
            </option>
865 
          </select>
866 
        </div>
867 
        {
868 
          coferenceType === 's' &&
869 
          <div className="form-group">
870 
            <label htmlFor="timezone">Horario</label>
871 
            <Datetime
872 
              dateFormat="DD-MM-YYYY"
5017 stevensc 873 
              onChange={(e) => {
5019 stevensc 874 
                if (e.toDate) {
875 
                  handleDateTime(e.toDate())
5017 stevensc 876 
                }
877 
              }}
4134 stevensc 878 
              inputProps={{ className: 'form-control' }}
4138 stevensc 879 
              initialValue={Date.parse(new Date())}
4134 stevensc 880 
              closeOnSelect
881 
            />
882 
          </div>
883 
        }
884 
        <div className="form-group">
4128 stevensc 885 
          <label htmlFor="timezone">Zona horaria</label>
886 
          <select
887 
            className="form-control"
888 
            name="timezone"
5195 stevensc 889 
            ref={register({ required: 'Por favor elige una Zona horaria' })}
4128 stevensc 890 
          >
891 
            <option value="" hidden>
892 
              Zona horaria
893 
            </option>
894 
            {Object.entries(timezones).map(([key, value]) => (
895 
              <option value={key} key={key}>
896 
                {value}
4116 stevensc 897 
              </option>
4128 stevensc 898 
            ))}
899 
          </select>
900 
          {errors.timezone && <FormErrorFeedback>{errors.timezone.message}</FormErrorFeedback>}
4116 stevensc 901 
        </div>
4133 stevensc 902 
        <div className="form-group">
903 
          <label htmlFor="timezone">Duración</label>
904 
          <select
905 
            className="form-control"
906 
            name="duration"
4137 stevensc 907 
            ref={register}
4133 stevensc 908 
          >
909 
            <option value={5}>5-min</option>
910 
            <option value={10}>10-min</option>
911 
            <option value={15}>15-min</option>
912 
            <option value={20}>20-min</option>
913 
            <option value={25}>25-min</option>
914 
            <option value={30}>30-min</option>
915 
            <option value={35}>35-min</option>
916 
            <option value={40}>40-min</option>
917 
            <option value={45}>45-min</option>
918 
          </select>
919 
        </div>
920 
        <div className="form-group">
921 
          <label htmlFor="first_name">Contraseña de ingreso</label>
922 
          <input
923 
            type="password"
924 
            name="password"
925 
            className="form-control"
4137 stevensc 926 
            ref={register({
5195 stevensc 927 
              required: 'Por favor ingrese una contraseña',
928 
              maxLength: { value: 6, message: 'La contraseña debe tener al menos 6 digitos' }
4137 stevensc 929 
            })}
4133 stevensc 930 
          />
5052 stevensc 931 
          {errors.password && <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>}
4115 stevensc 932 
        </div>
5052 stevensc 933 
        <button className="btn btn-primary" type="submit">
4116 stevensc 934 
          Crear
935 
        </button>
4115 stevensc 936 
      </form>
5206 stevensc 937 
    </StyleModal>
4115 stevensc 938 
  )
939 
}
940 
 
5195 stevensc 941 
export default React.memo(PersonalChat)