Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5334 | Rev 5807 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 5334 Rev 5344
Línea 7... Línea 7...
7 
import { addNotification } from '../../../redux/notification/notification.actions'
 7 
import { addNotification } from '../../../redux/notification/notification.actions'
8 
import { useDispatch } from 'react-redux'
 8 
import { useDispatch } from 'react-redux'
9 
import styled from 'styled-components'
 9 
import styled from 'styled-components'
10 
import Datetime from 'react-datetime'
 10 
import Datetime from 'react-datetime'
11 
import SearchIcon from '@mui/icons-material/Search'
 11 
import SearchIcon from '@mui/icons-material/Search'
12 
import Emojione from './emojione/Emojione'
 - 
 
13 
import SendFileModal from './send-file-modal/SendFileModal'
 - 
 
14 
import ConfirmModal from '../../../shared/confirm-modal/ConfirmModal'
 12 
import ConfirmModal from '../../../shared/confirm-modal/ConfirmModal'
15 
import EmptySection from '../../../shared/empty-section/EmptySection'
 13 
import EmptySection from '../../../shared/empty-section/EmptySection'
16 
import FormErrorFeedback from '../../../shared/form-error-feedback/FormErrorFeedback'
 14 
import FormErrorFeedback from '../../../shared/form-error-feedback/FormErrorFeedback'
Línea 17... Línea 15...
17 
 
 15 
 
18 
import 'react-datetime/css/react-datetime.css'
 16 
import 'react-datetime/css/react-datetime.css'
- 
 
 17 
import ChatList from '../../../components/chat/ChatList'
Línea 19... Línea 18...
19 
import ChatList from '../../../components/chat/ChatList'
 18 
import TextBox from '../../../components/chat/TextBox'
20 
 
 19 
 
21 
const StyledShowOptions = styled.div`
 20 
const StyledShowOptions = styled.div`
22 
  height: 342px;
 21 
  height: 342px;
Línea 68... Línea 67...
68 
  INITIAL: null
 67 
  INITIAL: null
69 
}
 68 
}
Línea 70... Línea 69...
70 
 
 69 
 
71 
const PersonalChat = ({ entity, onClose, onMinimize, onRead, not_seen_messages, minimized, timezones }) => {
 70 
const PersonalChat = ({ entity, onClose, onMinimize, onRead, not_seen_messages, minimized, timezones }) => {
72 
  const {
 71 
  const {
73 
    id,
 72 
    // id,
74 
    image,
 73 
    image,
75 
    name,
 74 
    name,
76 
    online,
 75 
    online,
77 
    type,
 76 
    type,
Línea 91... Línea 90...
91 
 
 90 
 
92 
  const [availableContactsToAdd, setAvailableContactsToAdd] = useState([])
 91 
  const [availableContactsToAdd, setAvailableContactsToAdd] = useState([])
Línea 93... Línea 92...
93 
  const [groupContactsList, setGroupContactsList] = useState([])
 92 
  const [groupContactsList, setGroupContactsList] = useState([])
94 
 
 - 
 
95 
  const [confirmModalShow, setConfirmModalShow] = useState(false)
 - 
 
96 
  const [showEmojiTab, setShowEmojiTab] = useState(false)
 93 
 
Línea 97... Línea 94...
97 
  const [shareFileModalShow, setShareFileModalShow] = useState(false)
 94 
  const [confirmModalShow, setConfirmModalShow] = useState(false)
Línea 98... Línea 95...
98 
  const [showConferenceModal, setShowConferenceModal] = useState(false)
 95 
  const [showConferenceModal, setShowConferenceModal] = useState(false)
Línea 110... Línea 107...
110 
 
 107 
 
111 
  // refs
 108 
  // refs
112 
  const conversationListEl = useRef(null)
 109 
  const conversationListEl = useRef(null)
113 
  const loader = useRef(null)
 110 
  const loader = useRef(null)
114 
  const modalActionUrl = useRef('')
 - 
 
Línea 115... Línea 111...
115 
  const textAreaEl = useRef(null)
 111 
  const modalActionUrl = useRef('')
116 
 
 112 
 
117 
  const handleActive = () => {
 113 
  const handleActive = () => {
118 
    onRead(entity)
 114 
    onRead(entity)
Línea 159... Línea 155...
159 
      })
 155 
      })
160 
  }
 156 
  }
Línea 161... Línea 157...
161 
 
 157 
 
Línea 162... Línea 158...
162 
  const handleCloseChat = () => onClose(entity)
 158 
  const handleCloseChat = () => onClose(entity)
163 
 
 - 
 
164 
  const handleChatBoxKeyDown = async (e) => {
 - 
 
165 
    if (e.key === 'Enter') {
 - 
 
166 
      e.preventDefault()
 159 
 
167 
      const message = e.target.value
 160 
  const sendMessage = async (message) => {
168 
      const formData = new FormData()
 161 
    const formData = new FormData()
169 
      formData.append('message', emojione.toShort(message))
 162 
    formData.append('message', emojione.toShort(message))
170 
      await axios.post(url_send, formData).then((response) => {
 163 
    await axios.post(url_send, formData).then((response) => {
171 
        const resData = response.data
 164 
      const resData = response.data
Línea 172... Línea 165...
172 
        if (resData.success) {
 165 
      if (resData.success) {
173 
          let newMessage = resData.data
 166 
        let newMessage = resData.data
174 
 
 167 
 
Línea 175... Línea 168...
175 
          online
 168 
        online
176 
            ? newMessage = { ...newMessage, not_received: false }
 169 
          ? newMessage = { ...newMessage, not_received: false }
177 
            : newMessage = { ...newMessage, not_received: true }
 170 
          : newMessage = { ...newMessage, not_received: true }
178 
 
 - 
 
179 
          // setMessages([...messages, newMessage])
 171 
 
180 
        }
 - 
 
181 
      })
 172 
        setMessages([...messages, newMessage])
182 
      e.target.value = ''
 - 
 
183 
      /* await handleGetMessages(); */
 173 
      }
Línea 184... Línea 174...
184 
      setShowEmojiTab(false)
 174 
    })
185 
      // setResponseMessage(null)
 175 
    // await handleGetMessages()
186 
    }
 176 
    // setResponseMessage(null)
Línea 226... Línea 216...
226 
      conversationListEl.current.scrollTop =
 216 
      conversationListEl.current.scrollTop =
227 
        conversationListEl.current.scrollHeight * 9
 217 
        conversationListEl.current.scrollHeight * 9
228 
    }
 218 
    }
229 
  }
 219 
  }
Línea 230... Línea -...
230 
 
 - 
 
231 
  const handleShowEmojiTab = () => {
 - 
 
232 
    setShowEmojiTab(!showEmojiTab)
 - 
 
233 
    // smiley_tpl(`${id}`);
 - 
 
234 
  }
 - 
 
235 
 
 - 
 
236 
  const handleClickEmoji = (e) => {
 - 
 
237 
    const shortname = e.currentTarget.dataset.shortname
 - 
 
238 
    const currentText = textAreaEl.current.value
 - 
 
239 
    const cursorPosition = textAreaEl.current.selectionStart
 - 
 
240 
    const textBehind = currentText.substring(0, cursorPosition)
 - 
 
241 
    const textForward = currentText.substring(cursorPosition)
 - 
 
242 
    const unicode = emojione.shortnameToUnicode(shortname)
 - 
 
243 
    textAreaEl.current.value = `${textBehind}${unicode}${textForward}`
 - 
 
244 
    textAreaEl.current.focus()
 - 
 
245 
    textAreaEl.current.setSelectionRange(
 - 
 
246 
      cursorPosition + unicode.length,
 - 
 
247 
      cursorPosition + unicode.length
 - 
 
248 
    )
 - 
 
249 
  }
 - 
 
250 
 
 220 
 
Línea 251... Línea 221...
251 
  const handleConfirmModalShow = () => setConfirmModalShow(!confirmModalShow)
 221 
  const handleConfirmModalShow = () => setConfirmModalShow(!confirmModalShow)
Línea 252... Línea -...
252 
 
 - 
 
253 
  const handleConfirmModalAccept = () => handleConfirmModalAction()
 - 
 
254 
 
 - 
 
255 
  const handleShareFileModalShow = () => {
 - 
 
256 
    setShareFileModalShow(!shareFileModalShow)
 222 
 
257 
  }
 223 
  const handleConfirmModalAccept = () => handleConfirmModalAction()
258 
 
 224 
 
259 
  /* const handleResponseMessage = (element) => {
 225 
  /* const handleResponseMessage = (element) => {
Línea 505... Línea 471...
505 
              <div className="optionsTab">
 471 
              <div className="optionsTab">
506 
                {tabsOptions[optionTab]}
 472 
                {tabsOptions[optionTab]}
507 
              </div>
 473 
              </div>
508 
            </StyledShowOptions>
 474 
            </StyledShowOptions>
509 
            : <>
 475 
            : <>
510 
            <ChatList
 476 
              <ChatList
511 
              messages={[...oldMessages, ...messages]}
 477 
                messages={[...oldMessages, ...messages]}
512 
              currentPage={currentPage}
 478 
                currentPage={currentPage}
513 
              lastPage={lastPage}
 479 
                lastPage={lastPage}
514 
              conversationList={conversationListEl}
 480 
                conversationList={conversationListEl}
515 
              loader={loader}
 481 
                loader={loader}
516 
            />
 482 
              />
517 
            <div className="wchat-footer wchat-chat-footer">
 - 
 
518 
              <div id="chatFrom" className="chatFrom">
 - 
 
519 
 
 - 
 
520 
                <div className="block-wchat">
 - 
 
521 
                  <button
 483 
              <TextBox
522 
                    className="icon ti-clip attachment font-24 btn-attach btn-attach uploadFile"
 - 
 
523 
                    id="uploadFile"
 484 
                uploadUrl={url_upload}
524 
                    onClick={handleShareFileModalShow}
 - 
 
525 
                  ></button>
 - 
 
526 
                  <button
 - 
 
527 
                    className="icon ti-face-smile font-24 btn-emoji"
 - 
 
528 
                    id="toggle-emoji"
 - 
 
529 
                    onClick={handleShowEmojiTab}
 485 
                isNotSeen={not_seen_messages}
530 
                  ></button>
 - 
 
531 
                  <div className="input-container">
 486 
                markRead={() => onRead(entity)}
532 
                    <div className="input-emoji">
 - 
 
533 
                      <div
 - 
 
534 
                        className="input-placeholder"
 - 
 
535 
                        style={{ visibility: 'hidden', display: 'none' }}
 - 
 
536 
                      >
 - 
 
537 
                        {CHAT_LABELS.WRITE_A_MESSAGE}
 - 
 
538 
                      </div>
 - 
 
539 
                      <textarea
 487 
                onSend={sendMessage}
540 
                        className="input chatboxtextarea"
 - 
 
541 
                        id="chatboxtextarea"
 - 
 
542 
                        name="chattxt"
 - 
 
543 
                        style={{ resize: 'none', height: '20px' }}
 - 
 
544 
                        placeholder={CHAT_LABELS.WRITE_A_MESSAGE}
 - 
 
545 
                        onKeyDown={handleChatBoxKeyDown}
 - 
 
546 
                        ref={textAreaEl}
 - 
 
547 
                        onFocus={() => not_seen_messages && onRead(entity)}
 - 
 
548 
                      />
 - 
 
549 
                    </div>
 - 
 
550 
                  </div>
 - 
 
551 
                </div>
 - 
 
552 
 
 - 
 
553 
                <div className="wchat-box-items-overlay-container">
 - 
 
554 
                  <div className="target-emoji" style={{ display: showEmojiTab ? 'block' : 'none' }} id={`smileyPanel_${id}`}>
 - 
 
555 
                    <Emojione onClickEmoji={handleClickEmoji} />
 - 
 
556 
                  </div>
 - 
 
557 
                </div>
 - 
 
558 
 
 - 
 
559 
              </div>
 488 
              />
560 
            </div>
 - 
 
561 
            </>
 489 
            </>
562 
          }
 490 
          }
563 
        </div>
 491 
        </div>
Línea 564... Línea 492...
564 
 
 492 
 
Línea 575... Línea 503...
575 
        onCreate={() => {
 503 
        onCreate={() => {
576 
          showOptions()
 504 
          showOptions()
577 
          displayConferenceModal()
 505 
          displayConferenceModal()
578 
        }}
 506 
        }}
579 
      />
 507 
      />
580 
      <SendFileModal
 - 
 
581 
        show={shareFileModalShow}
 - 
 
582 
        onHide={() => setShareFileModalShow(false)}
 - 
 
583 
        urlUpload={url_upload}
 - 
 
584 
      />
 - 
 
585 
    </>
 508 
    </>
586 
  )
 509 
  )
587 
}
 510 
}
Línea 588... Línea 511...
588 
 
 511