Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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