Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'
import { useSelector } from 'react-redux'
import { shareModalTypes } from '../../redux/share-modal/shareModal.types'

import Modal from 'components/UI/modal/Modal'
import Spinner from 'components/UI/Spinner'
import FormErrorFeedback from 'components/UI/form/FormErrorFeedback'
import DropzoneComponent from 'components/dropzone/DropzoneComponent'

const FileModal = ({ isShow, onHide, onComplete, loading }) => {
  const [selectedFile, setSelectedFile] = useState(null)
  const [error, setError] = useState(false)
  const labels = useSelector(({ intl }) => intl.labels)

  const onUpload = (file) => {
    setSelectedFile(file)
  }

  const onClose = () => {
    setSelectedFile(null)
    onHide()
  }

  const handleSubmit = () => {
    if (!selectedFile) {
      setError(true)
      return
    }

    onComplete(selectedFile)
  }

  return (
    <Modal
      show={isShow}
      onClose={onClose}
      onReject={onClose}
      onAccept={handleSubmit}
    >
      {loading ? (
        <Spinner />
      ) : (
        <DropzoneComponent
          modalType={shareModalTypes.CHAT}
          onUploaded={onUpload}
          settedFile={selectedFile}
          recomendationText={
            <p className='text-center'>
              {labels.extensions_allowed}: png, jpg, jpeg, mp4, mpeg, webm, pdf.
            </p>
          }
        />
      )}
      {error && <FormErrorFeedback>{labels.select_file}</FormErrorFeedback>}
    </Modal>
  )
}

export default FileModal