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