import { Fragment } from 'react';
import { useParams } from 'react-router-dom';
import Card from './card';
import Fetcher from '../shared/fetches/fetcher';
import { fetchCard } from '../../redux/actions/card';
import Footer from './footer';

function CardsContainer() {
  const { cardId } = useParams();
  return (
    <Fragment>
      <Fetcher action={fetchCard.bind(null, cardId)} stateSelector={state => state.card}>
        {card => <Card card={card} />}
      </Fetcher>
      <Footer />
    </Fragment>
  );
}

export default CardsContainer;
