Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from 'react'
import { axios } from '../../utils'
import { useForm } from 'react-hook-form'
import SendIcon from '@mui/icons-material/Send'
import AttachFileIcon from '@mui/icons-material/AttachFile'

import SendFileModal from '../../chat/chat/personal-chat/send-file-modal/SendFileModal'
import { addNotification } from '../../redux/notification/notification.actions'
import { useDispatch } from 'react-redux'

const MessageBox = ({ onSend, sendUrl }) => {
  const [isShowFileModal, setIsShowFileModal] = useState(false)
  const [isSending, setIsSending] = useState(false)

  const { handleSubmit, register, reset } = useForm()

  const dispatch = useDispatch()

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

  const toggleFileModal = () => {
    setIsShowFileModal(!isShowFileModal)
  }

  const sendFile = (file) => {
    setIsSending(true)
    const formData = new FormData()
    formData.append('file', file)

    axios
      .post(sendUrl, formData)
      .then(({ data: response }) => {
        const { success, data } = response
        if (!success) {
          const errorMessage =
            typeof data === 'string' ? data : 'Ha ocurrido un error'
          dispatch(addNotification({ style: 'success', msg: errorMessage }))
          return
        }

        toggleFileModal()
      })
      .finally(() => setIsSending(false))
  }

  return (
    <>
      <div className="chat__input-container">
        <form onSubmit={handleSubmit(handleSend)}>
          <button
            type="button"
            className="send_btn icon"
            onClick={toggleFileModal}
          >
            <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>
      </div>
      <SendFileModal
        isShow={isShowFileModal}
        onHide={toggleFileModal}
        onComplete={sendFile}
        loading={isSending}
      />
    </>
  )
}
export default MessageBox