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, backendVars, 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={backendVars.labelWriteMessage}
                />
                <button type="submit" className="send_btn">
                    <SendIcon />
                </button>
            </form>
            {selectedFile &&
                <FileModal
                    file={selectedFile}
                    onCancel={removeSelectedFile}
                    onSend={handleSendFile}
                />
            }
        </div >
    )
}
export default MessageBox