import { useLocation } from 'react-router-dom';
import StudentDecks from './student-decks';
import Fetcher from '../shared/fetches/fetcher';
import NoDeck from './no-deck';
import { fetchStudentDecks } from '../../redux/actions/student-deck';

function DecksContainer() {
  const location = useLocation();
  const searchPrams = new URLSearchParams(location.search);
  const priority = searchPrams.get('priority');
  const rateType = searchPrams.get('rate-type');
  const minRate = rateType ? { starred: 1, active: 0 }[rateType] : -1;

  return (
    <Fetcher
      action={() => fetchStudentDecks(priority, minRate)}
      stateSelector={state => state.studentDecks}
      renderEmpty={() => <NoDeck />}
    >
      {studentDecks => (
        <StudentDecks priority={priority} rateType={rateType} studentDecks={studentDecks} />
      )}
    </Fetcher>
  );
}

export default DecksContainer;
