import { useParams } from 'react-router-dom';
import RankingTab from './tab';
import Table from './table';
import UpdateNickNameForm from './update-nickname-form';
import Fetcher from '../shared/fetches/fetcher';
import { fetchStudent } from '../../redux/actions/student';
import { fetchRanking } from '../../redux/actions/ranking';

function RankingContainer() {
  const { rankType } = useParams();

  return (
    <Fetcher action={fetchStudent} stateSelector={state => state.student}>
      {student =>
        !student.nickName || student.nickName.includes('***') ? (
          <UpdateNickNameForm />
        ) : (
          <div className='px-2'>
            <RankingTab />
            <Fetcher
              action={fetchRanking.bind(null, rankType)}
              stateSelector={state => state.ranking}
            >
              {rankingData => <Table rankingData={rankingData} currentStudentId={student.id} />}
            </Fetcher>
          </div>
        )
      }
    </Fetcher>
  );
}

export default RankingContainer;
