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 FormErrorFeedback from '@components/UI/form/FormErrorFeedback';
import DropzoneComponent from '@components/dropzone/DropzoneComponent';

const FileModal = ({ isShow, onHide, onComplete }) => {
  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}
      title='Selecciona un archivo'
      onClose={onClose}
      onReject={onClose}
      onAccept={handleSubmit}
    >
      <DropzoneComponent
        type={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;