import { useParams } from 'react-router-dom';
import Fetcher from '../shared/fetches/fetcher';
import TopStudentScore from './top-student-score';
import { fetchTopStudentScores } from '../../redux/actions/student-score';

function TopStudentScoresContainer() {
  const { rankType, number } = useParams();

  return (
    <Fetcher
      action={fetchTopStudentScores.bind(null, rankType, number)}
      stateSelector={state => state.topStudentScores}
    >
      {studentScores => (
        <TopStudentScore
          rankType={rankType}
          number={parseInt(number, 10)}
          studentScores={studentScores}
        />
      )}
    </Fetcher>
  );
}

export default TopStudentScoresContainer;
