From 5f2814fd6e1ae512f77cf16b5c3a8fcd121bd74a Mon Sep 17 00:00:00 2001
From: Abhishek-kumar09 <abhimait1909@gmail.com>
Date: Sun, 20 Sep 2020 22:24:02 +0530
Subject: [PATCH 1/5] Added AutoSuggestion for District state college

---
 .../ApplicationsView/ApplicationSteps.js      | 173 +++++++++++++++---
 src/views/pages/ApplicationsView/helper.js    |  27 +++
 2 files changed, 173 insertions(+), 27 deletions(-)
 create mode 100644 src/views/pages/ApplicationsView/helper.js

diff --git a/src/views/pages/ApplicationsView/ApplicationSteps.js b/src/views/pages/ApplicationsView/ApplicationSteps.js
index 03200bd1..4d27ca3a 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 './helper';
+
+// import axios from 'axios';
+
 const useStyles = makeStyles(theme => ({
   root: {
     width: '100%'
@@ -308,6 +312,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 +346,40 @@ function FormEducationInfo({
     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}>
@@ -361,7 +399,6 @@ function FormEducationInfo({
           return <MenuItem value={year}>{year}</MenuItem>;
         })}
       </SelectValidator>
-
       <TextValidator
         key="college"
         className={classes.textField}
@@ -374,32 +411,114 @@ function FormEducationInfo({
         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
diff --git a/src/views/pages/ApplicationsView/helper.js b/src/views/pages/ApplicationsView/helper.js
new file mode 100644
index 00000000..0628ddee
--- /dev/null
+++ b/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];
+}

From 61a612709a403cb557d10d37ba673a04ad0e97c1 Mon Sep 17 00:00:00 2001
From: Abhishek-kumar09 <abhimait1909@gmail.com>
Date: Sun, 20 Sep 2020 22:24:02 +0530
Subject: [PATCH 2/5] Added AutoSuggestion for District state college

---
 src/views/pages/ApplicationsView/ApplicationSteps.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/views/pages/ApplicationsView/ApplicationSteps.js b/src/views/pages/ApplicationsView/ApplicationSteps.js
index 4d27ca3a..d5cafae8 100644
--- a/src/views/pages/ApplicationsView/ApplicationSteps.js
+++ b/src/views/pages/ApplicationsView/ApplicationSteps.js
@@ -400,16 +400,16 @@ function FormEducationInfo({
         })}
       </SelectValidator>
       <TextValidator
-        key="college"
+        key="country"
         className={classes.textField}
-        label="College"
+        label="Country"
         variant="outlined"
-        value={formData.college}
+        value={formData.country}
         fullWidth
-        name="college"
+        name="country"
         onChange={handleChange}
         validators={['required']}
-        errorMessages={['College is a required field']}
+        errorMessages={['Country is a required field']}
       />
       {notIndia() ? (
         <TextValidator

From e53a1d35c2e851f21711dbb7184db41d94b81643 Mon Sep 17 00:00:00 2001
From: Abhishek-kumar09 <abhimait1909@gmail.com>
Date: Sun, 20 Sep 2020 22:47:44 +0530
Subject: [PATCH 3/5] Resolve Conflicts and set active step to 1

---
 src/views/pages/ApplicationsView/ApplicationSteps.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/pages/ApplicationsView/ApplicationSteps.js b/src/views/pages/ApplicationsView/ApplicationSteps.js
index d5cafae8..45c73529 100644
--- a/src/views/pages/ApplicationsView/ApplicationSteps.js
+++ b/src/views/pages/ApplicationsView/ApplicationSteps.js
@@ -97,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: {},

From 96d2b2347fadaea32cc6eb44f37f8b86f0406b1d Mon Sep 17 00:00:00 2001
From: Abhishek-kumar09 <abhimait1909@gmail.com>
Date: Sun, 20 Sep 2020 22:50:18 +0530
Subject: [PATCH 4/5] resolve netlify errors

---
 src/views/pages/ApplicationsView/ApplicationSteps.js | 2 +-
 src/views/pages/ApplicationsView/helper.js           | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/pages/ApplicationsView/ApplicationSteps.js b/src/views/pages/ApplicationsView/ApplicationSteps.js
index 45c73529..4e3d36ea 100644
--- a/src/views/pages/ApplicationsView/ApplicationSteps.js
+++ b/src/views/pages/ApplicationsView/ApplicationSteps.js
@@ -363,7 +363,7 @@ function FormEducationInfo({
   };
 
   const handleDistrictFocus = () => {
-    if (formData.state != undefined) {
+    if (formData.state !== undefined) {
       updateDistricts(Object.keys(districtToCollegePair));
     }
   };
diff --git a/src/views/pages/ApplicationsView/helper.js b/src/views/pages/ApplicationsView/helper.js
index 0628ddee..93f2f4c3 100644
--- a/src/views/pages/ApplicationsView/helper.js
+++ b/src/views/pages/ApplicationsView/helper.js
@@ -6,7 +6,7 @@ export function getStates() {
 
 export function getDistrict(state) {
   const disToC = Object.keys(Data)
-    .filter(st => st == state)
+    .filter(st => st === state)
     .reduce((obj, key) => {
       obj[key] = Data[key];
       return obj;
@@ -17,7 +17,7 @@ export function getDistrict(state) {
 
 export function getColleges(districtToCollegePair, district) {
   const colleges = Object.keys(districtToCollegePair)
-    .filter(dis => dis == district)
+    .filter(dis => dis === district)
     .reduce((obj, key) => {
       obj[key] = districtToCollegePair[key];
       return obj;

From fbeaace7dd7bf3af131ae76c856a7f31375985af Mon Sep 17 00:00:00 2001
From: Abhishek-kumar09 <abhimait1909@gmail.com>
Date: Mon, 21 Sep 2020 00:35:50 +0530
Subject: [PATCH 5/5] Clear District and College fields on changing state"

---
 .../pages/ApplicationsView/ApplicationSteps.js     | 14 ++++++++++----
 .../{helper.js => educationFormUtil.js}            |  0
 2 files changed, 10 insertions(+), 4 deletions(-)
 rename src/views/pages/ApplicationsView/{helper.js => educationFormUtil.js} (100%)

diff --git a/src/views/pages/ApplicationsView/ApplicationSteps.js b/src/views/pages/ApplicationsView/ApplicationSteps.js
index 4e3d36ea..7fed7364 100644
--- a/src/views/pages/ApplicationsView/ApplicationSteps.js
+++ b/src/views/pages/ApplicationsView/ApplicationSteps.js
@@ -17,7 +17,7 @@ import {
   SelectValidator
 } from 'react-material-ui-form-validator';
 
-import { getStates, getDistrict, getColleges } from './helper';
+import { getStates, getDistrict, getColleges } from './educationFormUtil';
 
 // import axios from 'axios';
 
@@ -181,7 +181,10 @@ export function ApplicationSteps({ applicationId, setCourseTitle }) {
       )}
       {activeStep === steps.length + 1 && (
         <Paper square elevation={0} className={classes.resetContainer}>
-          <Typography>Application have been submitted successfully. We will email/call you for further process.</Typography>
+          <Typography>
+            Application have been submitted successfully. We will email/call you
+            for further process.
+          </Typography>
         </Paper>
       )}
     </div>
@@ -352,6 +355,8 @@ function FormEducationInfo({
       [event.target.name]: event.target.value
     });
     updateDistrictToCollegePair(getDistrict(event.target.value));
+    updateDistricts([]);
+    updateCollege([]);
   };
 
   const handleDistrictFieldChange = event => {
@@ -411,6 +416,7 @@ function FormEducationInfo({
         validators={['required']}
         errorMessages={['Country is a required field']}
       />
+
       {notIndia() ? (
         <TextValidator
           key="state"
@@ -474,7 +480,7 @@ function FormEducationInfo({
           validators={['required']}
           errorMessages={['State is a required field']}
         >
-          {formData.state === undefined ? (
+          {districts.length === 0 ? (
             <MenuItem value="undefined">{'Select State'}</MenuItem>
           ) : (
             districts.sort().map(dis => {
@@ -510,7 +516,7 @@ function FormEducationInfo({
           validators={['required']}
           errorMessages={['College is a required field']}
         >
-          {formData.district === undefined ? (
+          {collegeList.length === 0 ? (
             <MenuItem value="undefined">{'Select District'}</MenuItem>
           ) : (
             collegeList.sort().map(college => {
diff --git a/src/views/pages/ApplicationsView/helper.js b/src/views/pages/ApplicationsView/educationFormUtil.js
similarity index 100%
rename from src/views/pages/ApplicationsView/helper.js
rename to src/views/pages/ApplicationsView/educationFormUtil.js