Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5187 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 5187 Rev 6753
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
import React, { useState } from 'react'
2 
import React, { useRef, useState } from 'react'
 2 
import { axios } from '../../utils'
3 
import { useForm } from 'react-hook-form'
 3 
import { useForm } from 'react-hook-form'
4 
import SendIcon from '@mui/icons-material/Send'
 4 
import SendIcon from '@mui/icons-material/Send'
5 
import AttachFileIcon from '@mui/icons-material/AttachFile'
 5 
import AttachFileIcon from '@mui/icons-material/AttachFile'
6 
import FileModal from '../../mobile-chat/mobile-chat/chat/fileModal/FileModal'
 - 
 
Línea 7... Línea 6...
7 
 
 6 
 
- 
 
 7 
import SendFileModal from '../../chat/chat/personal-chat/send-file-modal/SendFileModal'
- 
 
 8 
import { addNotification } from '../../redux/notification/notification.actions'
Línea 8... Línea 9...
8 
const permittedFiles = 'video/mp4, video/mpeg, video/webm, application/pdf, image/jpeg, image/png, image/jpg'
 9 
import { useDispatch } from 'react-redux'
9 
 
 - 
 
10 
const MessageBox = ({ onSend, sendUrl }) => {
 10 
 
11 
  const fileInputEl = useRef(null)
 11 
const MessageBox = ({ onSend, sendUrl }) => {
12 
  const [selectedFile, setSelectedFile] = useState('')
 - 
 
13 
  const { handleSubmit, register, reset } = useForm()
 - 
 
14 
 
 - 
 
15 
  const handleUploadFile = (e) => {
 - 
 
16 
    const file = e.target.files[0]
 - 
 
Línea 17... Línea 12...
17 
    if (file) setSelectedFile(file)
 12 
  const [isShowFileModal, setIsShowFileModal] = useState(false)
Línea 18... Línea 13...
18 
  }
 13 
  const [isSending, setIsSending] = useState(false)
19 
 
 - 
 
20 
  const removeSelectedFile = () => setSelectedFile('')
 - 
 
21 
 
 - 
 
22 
  const handleSendFile = () => {
 - 
 
23 
    const messages = {
 - 
 
24 
      filename: selectedFile,
 - 
 
25 
      message: 'File'
 - 
 
Línea 26... Línea 14...
26 
    }
 14 
 
27 
    onSend(sendUrl, messages)
 15 
  const { handleSubmit, register, reset } = useForm()
28 
    setSelectedFile('')
 16 
 
29 
  }
 17 
  const dispatch = useDispatch()
Línea -... Línea 18...
- 
 
 18 
 
- 
 
 19 
  const handleSend = (message) => {
- 
 
 20 
    onSend(sendUrl, message)
- 
 
 21 
    reset()
- 
 
 22 
  }
- 
 
 23 
 
- 
 
 24 
  const toggleFileModal = () => {
- 
 
 25 
    setIsShowFileModal(!isShowFileModal)
- 
 
 26 
  }
- 
 
 27 
 
- 
 
 28 
  const sendFile = (file) => {
- 
 
 29 
    setIsSending(true)
- 
 
 30 
    const formData = new FormData()
- 
 
 31 
    formData.append('file', file)
- 
 
 32 
 
- 
 
 33 
    axios
- 
 
 34 
      .post(sendUrl, formData)
- 
 
 35 
      .then(({ data: response }) => {
- 
 
 36 
        const { success, data } = response
- 
 
 37 
        if (!success) {
- 
 
 38 
          const errorMessage =
- 
 
 39 
            typeof data === 'string' ? data : 'Ha ocurrido un error'
- 
 
 40 
          dispatch(addNotification({ style: 'success', msg: errorMessage }))
- 
 
 41 
          return
- 
 
 42 
        }
30 
 
 43 
 
- 
 
 44 
        toggleFileModal()
31 
  const handleSend = (message) => {
 45 
      })
32 
    onSend(sendUrl, message)
 46 
      .finally(() => setIsSending(false))
33 
    reset()
 - 
 
34 
  }
 - 
 
35 
 
 - 
 
36 
  return (
 - 
 
37 
        <div className="chat__input-container">
 - 
 
38 
            <form onSubmit={handleSubmit(handleSend)}>
 - 
 
39 
                <input
 - 
 
40 
                    type="file"
 - 
 
41 
                    name="file"
 47 
  }
42 
                    hidden
 48 
 
43 
                    ref={fileInputEl}
 49 
  return (
44 
                    accept={permittedFiles}
 50 
    <>
45 
                    onChange={handleUploadFile}
 51 
      <div className="chat__input-container">
46 
                />
 52 
        <form onSubmit={handleSubmit(handleSend)}>
47 
                <button
 53 
          <button
48 
                    type="button"
 54 
            type="button"
49 
                    className='send_btn icon'
 55 
            className="send_btn icon"
50 
                    onClick={() => fileInputEl.current.click()}
 56 
            onClick={toggleFileModal}
51 
                >
 57 
          >
52 
                    <AttachFileIcon />
 58 
            <AttachFileIcon />
53 
                </button>
 59 
          </button>
54 
                <input
 60 
          <input
55 
                    type="text"
 61 
            type="text"
56 
                    name="message"
 62 
            name="message"
57 
                    className="chatInput"
 63 
            className="chatInput"
58 
                    ref={register({ required: true })}
 64 
            ref={register({ required: true })}
59 
                    placeholder={LABELS.WRITE_YOUR_MESSAGE_HERE}
 65 
            placeholder={LABELS.WRITE_YOUR_MESSAGE_HERE}
60 
                />
 66 
          />
61 
                <button type="submit" className="send_btn">
 67 
          <button type="submit" className="send_btn">
62 
                    <SendIcon />
 68 
            <SendIcon />
63 
                </button>
 69 
          </button>
64 
            </form>
 70 
        </form>
65 
            {selectedFile &&
 71 
      </div>
66 
                <FileModal
 72 
      <SendFileModal
67 
                    file={selectedFile}
 73 
        isShow={isShowFileModal}
68 
                    onCancel={removeSelectedFile}
 74 
        onHide={toggleFileModal}
69 
                    onSend={handleSendFile}
 75 
        onComplete={sendFile}