import { Spin } from 'antd';
import { useEffect, useState } from 'react';
import { connect } from 'react-redux';

const PromisePreloader = ({ children, name, reduxPromises }) => {
  const [status, setStatus] = useState('');

  useEffect(() => {
    if (reduxPromises && reduxPromises[name]) {
      setStatus(reduxPromises[name].status);
    }
  }, [reduxPromises]);

  return (
    < >
    { (status === 'RESOLVED' || !reduxPromises[name])
      ? children
      : <div className="example">
       <Spin size="large" delay={500}/>
      </div>
    }
    </>
  );
};

const CPromisePreloader = connect(state => ({ reduxPromises: state.promise }))(PromisePreloader);

export default CPromisePreloader;
