import { useParams } from 'react-router-dom';
import PropTypes from 'prop-types';
import PaymentVerify from './payment-verify';
import Fetcher from '../shared/fetches/fetcher';
import { fetchPayment } from '../../redux/actions/payment';

function PaymentVerifyContainer({ code }) {
  const { paymentId } = useParams();

  return (
    <Fetcher action={fetchPayment.bind(null, paymentId)} stateSelector={state => state.payment}>
      {payment => <PaymentVerify code={code} payment={payment} />}
    </Fetcher>
  );
}

PaymentVerifyContainer.propTypes = {
  code: PropTypes.string.isRequired
};

export default PaymentVerifyContainer;
