Added AutoSuggestion for District state college

Author: Abhishek-kumar09

src/views/pages/ApplicationsView/ApplicationSteps.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
@@ -13,6 +13,8 @@ import {
   SelectValidator
 } from 'react-material-ui-form-validator';
 
+import { getStates, getDistrict, getColleges } from './helper';
+
 // import axios from 'axios';
 
 const useStyles = makeStyles(theme => ({
@@ -75,7 +77,7 @@ function getStepContent(step, setActiveStep, formData, setFormData) {
 
 export function ApplicationSteps() {
   const classes = useStyles();
-  const [activeStep, setActiveStep] = React.useState(2);
+  const [activeStep, setActiveStep] = React.useState(1);
   const [formData, setFormData] = React.useState({
     personal: {},
     education: {},
@@ -213,6 +215,9 @@ function FormPersonalInfo({ setActiveStep, data, setData }) {
 function FormEducationInfo({ setActiveStep, data, setData }) {
   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({
@@ -234,9 +239,40 @@ function FormEducationInfo({ setActiveStep, data, setData }) {
     setActiveStep(2);
   };
 
+  const handleStateFieldChange = event => {
+    updateFormData({
+      ...formData,
+      [event.target.name]: event.target.value
+    });
+    updateDistrictToCollegePair(getDistrict(event.target.value));
+  };
+
+  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 (
     <ValidatorForm onSubmit={handleSubmit}>
@@ -256,7 +292,6 @@ function FormEducationInfo({ setActiveStep, data, setData }) {
           return <MenuItem value={year}>{year}</MenuItem>;
         })}
       </SelectValidator>
-
       <TextValidator
         key="college"
         className={classes.textField}
@@ -269,32 +304,114 @@ function FormEducationInfo({ setActiveStep, data, setData }) {
         validators={['required']}
         errorMessages={['College is a required field']}
       />
+      {notIndia() ? (
+        <TextValidator
+          key="state"
+          className={classes.textField}
+          autoComplete="true"
+          label="State"
+          variant="outlined"
+          value={formData.state}
+          fullWidth
+          name="state"
+          onChange={handleChange}
+          validators={['required']}
+          errorMessages={['State is a required field']}
+        />
+      ) : (
+        <SelectValidator
+          key="state"
+          className={classes.textField}
+          autoComplete="true"
+          label="State"
+          variant="outlined"
+          value={formData.state}
+          fullWidth
+          name="state"
+          onChange={handleStateFieldChange}
+          validators={['required']}
+          errorMessages={['State is a required field']}
+        >
+          {states.sort().map(state => {
+            return <MenuItem value={state}>{state}</MenuItem>;
+          })}
+        </SelectValidator>
+      )}
 
-      <TextValidator
-        key="state"
-        className={classes.textField}
-        label="State"
-        variant="outlined"
-        value={formData.state}
-        fullWidth
-        name="state"
-        onChange={handleChange}
-        validators={['required']}
-        errorMessages={['State is a required field']}
-      />
+      {notIndia() ? (
+        <TextValidator
+          key="district"
+          className={classes.textField}
+          autoComplete="true"
+          label="District"
+          variant="outlined"
+          value={formData.district}
+          fullWidth
+          name="district"
+          onChange={handleChange}
+          validators={['required']}
+          errorMessages={['State is a required field']}
+        />
+      ) : (
+        <SelectValidator
+          key="district"
+          className={classes.textField}
+          autoComplete="true"
+          label="District"
+          variant="outlined"
+          value={formData.district}
+          fullWidth
+          onFocus={handleDistrictFocus}
+          name="district"
+          onChange={handleDistrictFieldChange}
+          validators={['required']}
+          errorMessages={['State is a required field']}
+        >
+          {formData.state === undefined ? (
+            <MenuItem value="undefined">{'Select State'}</MenuItem>
+          ) : (
+            districts.sort().map(dis => {
+              return <MenuItem value={dis}>{dis}</MenuItem>;
+            })
+          )}
+        </SelectValidator>
+      )}
 
-      <TextValidator
-        key="country"
-        className={classes.textField}
-        label="Country"
-        variant="outlined"
-        value={formData.country}
-        fullWidth
-        name="country"
-        onChange={handleChange}
-        validators={['required']}
-        errorMessages={['Country is a required field']}
-      />
+      {notIndia() ? (
+        <TextValidator
+          key="college"
+          className={classes.textField}
+          label="College"
+          variant="outlined"
+          value={formData.college}
+          onChange={handleChange}
+          fullWidth
+          name="college"
+          validators={['required']}
+          errorMessages={['College is a required field']}
+        />
+      ) : (
+        <SelectValidator
+          key="college"
+          className={classes.textField}
+          label="College"
+          variant="outlined"
+          value={formData.college}
+          fullWidth
+          onChange={handleChange}
+          name="college"
+          validators={['required']}
+          errorMessages={['College is a required field']}
+        >
+          {formData.district === undefined ? (
+            <MenuItem value="undefined">{'Select District'}</MenuItem>
+          ) : (
+            collegeList.sort().map(college => {
+              return <MenuItem value={college}>{college}</MenuItem>;
+            })
+          )}
+        </SelectValidator>
+      )}
 
       <Button variant="outlined" onClick={handlePrev} color="secondary">
         Prev

src/views/pages/ApplicationsView/EditApplication.js

@@ -27,7 +27,6 @@ export function EditApplication() {
         </Typography>
       </Grid>
 
-
       <Grid item lg={6} md={6} sm={12} xs={12}>
         <ApplicationSteps />
       </Grid>

src/views/pages/ApplicationsView/helper.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];
+}