import React, { useEffect, useCallback, useState } from 'react'; import codeClanApi from '../../../api/apiUtils'; import CustomLoader from '../../common/Spinner/CustomLoader'; import TracksStagesCard from './TracksStagesCard'; import { useStore } from 'react-redux'; function TracksEnrollStages({ id }) { const [trackData, settrackData] = useState(null); const [stageData, setStageData] = useState(null); const store = useStore().getState().tracks; const getTrackStages = useCallback( async id => { try { let res = await codeClanApi.get(`tracks/${id}/stages`); setStageData(res.data); let resData = store.data.items.filter(data => data.id === id); settrackData(resData[0]); } catch (e) { // console.log(e); } }, [store.data.items] ); useEffect(() => { getTrackStages(id); }, [getTrackStages, id]); return ( <div className="tracks-stages-card"> {trackData ? ( <TracksStagesCard trackData={trackData} stageData={stageData} /> ) : ( <CustomLoader /> )} </div> ); } export default TracksEnrollStages;