Proyectos de Subversion LeadersLinked - Backend

/* eslint-disable no-mixed-spaces-and-tabs */
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 = ({
        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 } = 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 React.memo(DropzoneComponent)