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