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