Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useRef, useState } from 'react'
import { axios } from '../../utils'
import { addNotification } from '../../redux/notification/notification.actions'
import { useDispatch } from 'react-redux'
import { useForm } from 'react-hook-form'
import SendIcon from '@mui/icons-material/Send'
import AttachFileIcon from '@mui/icons-material/AttachFile'
import FileModal from '../../mobile-chat/mobile-chat/chat/fileModal/FileModal'

const permittedFiles = 'video/mp4, video/mpeg, video/webm, application/pdf, image/jpeg, image/png, image/jpg'

const MessageBox = ({ onSend, sendLink, setMsgs }) => {
  const fileInputEl = useRef(null)
  const [selectedFile, setSelectedFile] = useState('')
  const { handleSubmit, register, reset } = useForm()
  const dispatch = useDispatch()

  const handleUploadFile = (e) => {
    const file = e.target.files[0]
    if (file) setSelectedFile(file)
  }

  const removeSelectedFile = () => setSelectedFile('')

  const handleSendFile = () => {
    const formData = new FormData()
    formData.append('filename', selectedFile)
    formData.append('message', 'File')

    axios.post(sendLink, formData)
      .then(({ data }) => {
        if (!data.success) {
          return dispatch(addNotification({
            style: 'danger',
            msg: 'Ha ocurrido un error'
          }))
        }

        setMsgs(prev => [data.data, ...prev])
        setSelectedFile('')
      })
  }

  const handleSend = ({ message }) => {
    onSend(message)
    reset()
  }

  return (
        <div className="chat__input-container">
            <form onSubmit={handleSubmit(handleSend)}>
                <input
                    type="file"
                    name="file"
                    hidden
                    ref={fileInputEl}
                    accept={permittedFiles}
                    onChange={handleUploadFile}
                />
                <button
                    type="button"
                    className='send_btn icon'
                    onClick={() => fileInputEl.current.click()}
                >
                    <AttachFileIcon />
                </button>
                <input
                    type="text"
                    name="message"
                    className="chatInput"
                    ref={register({ required: true })}
                    placeholder={LABELS.WRITE_YOUR_MESSAGE_HERE}
                />
                <button type="submit" className="send_btn">
                    <SendIcon />
                </button>
            </form>
            {selectedFile &&
                <FileModal
                    file={selectedFile}
                    onCancel={removeSelectedFile}
                    onSend={handleSendFile}
                />
            }
        </div >
  )
}
export default MessageBox