Proyectos de Subversion LeadersLinked - Backend

import React, { useState, useCallback, useEffect } from "react";
import { useDropzone } from "react-dropzone";
import { baseStyle, imgStyle, thumbsContainerStyle } from "../../assets/styles/js-styles/Dropzone";
import FilePreview from "./FilePreview";

const DropzoneComponent = React.memo(({
    modalType,
    onUploaded,
    settedFile,
    recomendationText
}) => {

    const [errors, setErrors] = useState([]);
    const [files, setFiles] = useState([]);

    const onDropRejected = useCallback((rejectedFiles) => {
        rejectedFiles.map((fileRejection) => {
            switch (fileRejection.errors[0].code) {
                case "too-many-files":
                    setErrors([...errors, "solo puedes agregar 1 archivo"]);
                    break;
                case "file-invalid-type":
                    setErrors([...errors, "por favor seleccione un archivo valido"]);
                    break;
                default:
                    setErrors(errors);
                    break;
            }
        });
    }, []);

    useEffect(() => {
        if (settedFile) setFiles([settedFile]);
    }, [settedFile]);

    const acceptedMimeTypes = {
        IMAGE: "image/jpeg, image/png, image/jpg",
        FILE: "application/pdf",
        VIDEO: "video/mp4, video/mpeg, video/webm",
        CHAT: "video/mp4, video/mpeg, video/webm, application/pdf, image/jpeg, image/png, image/jpg"
    }

    const { getRootProps, getInputProps, acceptedFiles } = useDropzone({
        accept: acceptedMimeTypes[modalType],
        multiple: false,
        onDrop: (accepted) => {
            onUploaded(accepted[0]);
            setFiles(accepted[0]);
        },
        onDropRejected,
        onDropAccepted: () => {
            setErrors([]);
        },
        maxFiles: 1,
    })


    const onDeleteFileHandler = (id) => {
        onUploaded('');
        setFiles(files.filter(file => file !== id));
    };

    const filePreviewOptions = (modalType, file) => {
        const options = {
            IMAGE: <img src={URL.createObjectURL(file)} style={imgStyle} />,
            FILE: <object data={URL.createObjectURL(file)} type="application/pdf" width="400" height="200" />,
            VIDEO: <video src={URL.createObjectURL(file)} width="400" height="300" controls autoPlay muted />
        }

        return options[modalType]
    }

    return (
        <div>
            {
                !files.length
                &&
                <div {...getRootProps({ className: "dropzone", style: baseStyle })}>
                    <input {...getInputProps()} />
                    <p>Arrastra el archivo aqui, o haga click para seleccionar</p>
                    {recomendationText}
                </div>
            }
            <aside>
                <div style={thumbsContainerStyle}>
                    {
                        files.map((file, index) =>
                            <FilePreview
                                onDeleteFileHandler={() => onDeleteFileHandler(file)}
                                key={index}
                            >
                                {filePreviewOptions(modalType, file)}
                            </FilePreview>
                        )
                    }
                </div>
            </aside>
        </div>
    );
});

export default DropzoneComponent;