Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useRef, useState } from 'react'
import FileModal from '../../mobile-chat/mobile-chat/chat/fileModal/FileModal';
import { axios } from '../../utils';
import { addNotification } from '../../redux/notification/notification.actions';
import { useDispatch } from 'react-redux';
import { useForm } from 'react-hook-form';

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, errors } = 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)

    return (
        <div className="message-send-area border-gray border-radius">
            <form id="form-send-message" name="form-send-message"
                onSubmit={handleSubmit(handleSend)}
            >
                <div className="mf-field">
                    <input
                        type="file"
                        name="file"
                        hidden
                        ref={(e) => fileInputEl.current = e}
                        accept={permittedFiles}
                        onChange={handleUploadFile}
                    />
                    <button
                        type="button"
                        className='inputIcon ti-clip icon uploadFile text-gray'
                        id="uploadFile"
                        onClick={() => fileInputEl.current.click()}
                    />
                    <input
                        type="text"
                        name="message"
                        className="border-radius"
                        ref={register({ required: 'Este campo es requerido' })}
                        placeholder={backendVars.labelWriteMessage}
                    />
                    {errors.message && <p>{errors.message.message}</p>}
                    <button type="submit" className="btn btn-secondary p-1 inmail-submit-btn ">
                        <i className="fas fa-chevron-right" />
                    </button>
                </div>
            </form>
            {selectedFile &&
                <FileModal
                    file={selectedFile}
                    onCancel={removeSelectedFile}
                    onSend={handleSendFile}
                />
            }
        </div >
    )
}
export default MessageBox