diff --git a/src/views/pages/ApplicationsView/ApplicationSteps.js b/src/views/pages/ApplicationsView/ApplicationSteps.js index 03200bd1..7fed7364 100644 --- a/src/views/pages/ApplicationsView/ApplicationSteps.js +++ b/src/views/pages/ApplicationsView/ApplicationSteps.js @@ -17,6 +17,10 @@ import { SelectValidator } from 'react-material-ui-form-validator'; +import { getStates, getDistrict, getColleges } from './educationFormUtil'; + +// import axios from 'axios'; + const useStyles = makeStyles(theme => ({ root: { width: '100%' @@ -93,7 +97,7 @@ export function ApplicationSteps({ applicationId, setCourseTitle }) { const isMountedRef = useIsMountedRef(); const baseUrl = 'https://us-central1-codeforcauseorg.cloudfunctions.net/widgets/applications/request'; - const [activeStep, setActiveStep] = React.useState(-1); + const [activeStep, setActiveStep] = React.useState(1); const [formData, setFormData] = React.useState({ personal: {}, education: {}, @@ -177,7 +181,10 @@ export function ApplicationSteps({ applicationId, setCourseTitle }) { )} {activeStep === steps.length + 1 && ( - Application have been submitted successfully. We will email/call you for further process. + + Application have been submitted successfully. We will email/call you + for further process. + )} @@ -308,6 +315,9 @@ function FormEducationInfo({ }) { const classes = useStyles(); const [formData, updateFormData] = useState(data.education); + const [districtToCollegePair, updateDistrictToCollegePair] = useState({}); + const [districts, updateDistricts] = useState([]); + const [collegeList, updateCollege] = useState([]); const handleChange = event => { updateFormData({ @@ -339,9 +349,42 @@ function FormEducationInfo({ setActiveStep(2); }; + const handleStateFieldChange = event => { + updateFormData({ + ...formData, + [event.target.name]: event.target.value + }); + updateDistrictToCollegePair(getDistrict(event.target.value)); + updateDistricts([]); + updateCollege([]); + }; + + const handleDistrictFieldChange = event => { + updateFormData({ + ...formData, + [event.target.name]: event.target.value + }); + updateCollege(getColleges(districtToCollegePair, event.target.value)); + }; + + const handleDistrictFocus = () => { + if (formData.state !== undefined) { + updateDistricts(Object.keys(districtToCollegePair)); + } + }; + + function notIndia() { + return ( + formData.country === undefined || + formData.country.trim().toLowerCase() !== 'india' + ); + } + const years = Array(25) - .fill(2000) - .map((x, y) => x + y); + .fill(2024) + .map((x, y) => x - y); + + const states = getStates(); return ( @@ -361,33 +404,6 @@ function FormEducationInfo({ return {year}; })} - - - - - + {notIndia() ? ( + + ) : ( + + {states.sort().map(state => { + return {state}; + })} + + )} + + {notIndia() ? ( + + ) : ( + + {districts.length === 0 ? ( + {'Select State'} + ) : ( + districts.sort().map(dis => { + return {dis}; + }) + )} + + )} + + {notIndia() ? ( + + ) : ( + + {collegeList.length === 0 ? ( + {'Select District'} + ) : ( + collegeList.sort().map(college => { + return {college}; + }) + )} + + )} + diff --git a/src/views/pages/ApplicationsView/educationFormUtil.js b/src/views/pages/ApplicationsView/educationFormUtil.js new file mode 100644 index 00000000..93f2f4c3 --- /dev/null +++ b/src/views/pages/ApplicationsView/educationFormUtil.js @@ -0,0 +1,27 @@ +import Data from '../../../data/colleges.json'; + +export function getStates() { + return Object.keys(Data); +} + +export function getDistrict(state) { + const disToC = Object.keys(Data) + .filter(st => st === state) + .reduce((obj, key) => { + obj[key] = Data[key]; + return obj; + }, {}); + + return Object.values(disToC)[0]; +} + +export function getColleges(districtToCollegePair, district) { + const colleges = Object.keys(districtToCollegePair) + .filter(dis => dis === district) + .reduce((obj, key) => { + obj[key] = districtToCollegePair[key]; + return obj; + }, {}); + + return Object.values(colleges)[0]; +}