Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useRef, useState } from 'react'
import FileModal from '../../mobile-chat/mobile-chat/chat/fileModal/FileModal';
import { axios } from '../../utils';
import styles from "../../mobile-chat/mobile-chat/chat/chat.module.scss";
import { addNotification } from '../../redux/notification/notification.actions';
import { useDispatch } from 'react-redux';

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 [text, setText] = useState('')
    const [selectedFile, setSelectedFile] = useState("");
    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("");
            });
    };

    return (
        <div className="message-send-area border-gray border-radius">
            <form id="form-send-message" name="form-send-message"
                onSubmit={e => {
                    e.preventDefault()
                    onSend(text)
                    setText('')
                }}
            >
                <div className="mf-field">
                    <input
                        type="file"
                        name="file"
                        id="file"
                        ref={(e) => {
                            fileInputEl.current = e;
                        }}
                        accept={permittedFiles}
                        hidden
                        onChange={handleUploadFile}
                    />
                    <button
                        type="button"
                        className={`${styles.inputIcon} ti-clip icon uploadFile text-gray`}
                        id="uploadFile"
                        onClick={() => fileInputEl.current.click()}
                    />
                    <input
                        type="text"
                        name="message"
                        id="message"
                        className="border-radius"
                        value={text}
                        placeholder={backendVars.labelWriteMessage}
                        onChange={e => setText(e.target.value || '')}
                    />
                    <button type="submit" className="btn btn-secondary p-1 inmail-submit-btn ">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </form>
            {
                selectedFile
                &&
                <FileModal
                    file={selectedFile}
                    onCancel={removeSelectedFile}
                    onSend={handleSendFile}
                />
            }
        </div>
    )
}
export default MessageBox