Fixed components

2 files changed, 49 insertions, 98 deletions

diff --git a/client/src/pages/Enrollment/Address/Address.jsx b/client/src/pages/Enrollment/Address/Address.jsx
index 2e0fc6c..5324413 100644
--- a/client/src/pages/Enrollment/Address/Address.jsx
+++ b/client/src/pages/Enrollment/Address/Address.jsx
@@ -1,48 +1,14 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import Header from '../../../components/Header/Header'
 import Input from '../../../components/Input/Input'
-import { Country, State, City } from 'country-state-city'
+import { State, City } from 'country-state-city'
 import Select from 'react-select'
 
 import styles from './Address.module.css'
 import { useTranslation } from 'react-i18next'
 
 const Address = ({ formData, setFormData }) => {
-  const [tempData, setTempData] = useState({
-    country: '',
-    state: '',
-    district: ''
-  })
   const { t } = useTranslation()
-  const countries = Country.getAllCountries()
-
-  useEffect(() => {
-    setFormData({
-      ...formData,
-      address: {
-        country: {
-          name: tempData.country.label,
-          code: tempData.country.isoCode
-        },
-        state: {
-          name: tempData.state.label,
-          code: tempData.state.isoCode
-        },
-        district: {
-          name: tempData.district.label,
-          code: tempData.district.isoCode
-        }
-      }
-    })
-  }, [tempData])
-
-  console.log('Form Data: ', formData.address)
-
-  const updatedCountries = countries.map((country) => ({
-    label: country.name,
-    value: country.id,
-    ...country
-  }))
 
   const updatedStates = (countryId) =>
     State.getStatesOfCountry(countryId).map((state) => ({
@@ -83,35 +49,19 @@ const Address = ({ formData, setFormData }) => {
         <div className={styles.address__container}>
           <div className={styles.input}>
             <div className={styles.input__container}>
-              <label htmlFor="country">{t('COUNTRY')}</label>
-              <Select
-                id="country"
-                name="country"
-                label="country"
-                options={updatedCountries}
-                value={tempData.country}
-                onChange={(e) => {
-                  setTempData({
-                    ...tempData,
-                    country: e
-                  })
-                }}
-                styles={customStyles}
-              />
-            </div>
-          </div>
-          <div className={styles.input}>
-            <div className={styles.input__container}>
               <label htmlFor="state">{t('STATE')}</label>
               <Select
                 id="state"
                 name="state"
-                options={updatedStates(tempData.country.isoCode)}
-                value={tempData.state}
+                options={updatedStates('IN')}
+                value={formData.address?.state}
                 onChange={(e) => {
-                  setTempData({
-                    ...tempData,
-                    state: e
+                  setFormData({
+                    ...formData,
+                    address: {
+                      ...formData.address,
+                      state: e
+                    }
                   })
                 }}
                 styles={customStyles}
@@ -124,15 +74,15 @@ const Address = ({ formData, setFormData }) => {
               <Select
                 id="city"
                 name="city"
-                options={updatedCities(
-                  tempData.country.isoCode,
-                  tempData.state.isoCode
-                )}
-                value={tempData.district}
+                options={updatedCities('IN', formData.address?.state?.isoCode)}
+                value={formData.address?.district}
                 onChange={(e) => {
-                  setTempData({
-                    ...tempData,
-                    district: e
+                  setFormData({
+                    ...formData,
+                    address: {
+                      ...formData.address,
+                      district: e
+                    }
                   })
                 }}
                 styles={customStyles}
@@ -147,7 +97,10 @@ const Address = ({ formData, setFormData }) => {
             onChange={(e) => {
               setFormData({
                 ...formData,
-                village: e.target.value
+                address: {
+                  ...formData.address,
+                  village: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_YOUR_VILLAGE_TOWN')}
@@ -163,6 +116,7 @@ const Address = ({ formData, setFormData }) => {
               setFormData({
                 ...formData,
                 address: {
+                  ...formData.address,
                   houseNo: e.target.value
                 }
               })
@@ -178,6 +132,7 @@ const Address = ({ formData, setFormData }) => {
               setFormData({
                 ...formData,
                 address: {
+                  ...formData.address,
                   street: e.target.value
                 }
               })
@@ -193,6 +148,7 @@ const Address = ({ formData, setFormData }) => {
               setFormData({
                 ...formData,
                 address: {
+                  ...formData.address,
                   locality: e.target.value
                 }
               })
@@ -208,6 +164,7 @@ const Address = ({ formData, setFormData }) => {
               setFormData({
                 ...formData,
                 address: {
+                  ...formData.address,
                   postOffice: e.target.value
                 }
               })
@@ -225,6 +182,7 @@ const Address = ({ formData, setFormData }) => {
               setFormData({
                 ...formData,
                 address: {
+                  ...formData.address,
                   landmark: e.target.value
                 }
               })
@@ -240,6 +198,7 @@ const Address = ({ formData, setFormData }) => {
               setFormData({
                 ...formData,
                 address: {
+                  ...formData.address,
                   pincode: e.target.value
                 }
               })
diff --git a/client/src/pages/Enrollment/Enrollment.jsx b/client/src/pages/Enrollment/Enrollment.jsx
index 1a2aa03..c4f5b85 100644
--- a/client/src/pages/Enrollment/Enrollment.jsx
+++ b/client/src/pages/Enrollment/Enrollment.jsx
@@ -39,18 +39,8 @@ const Enrollment = () => {
       locality: '',
       landmark: '',
       village: '',
-      district: {
-        name: '',
-        code: ''
-      },
-      state: {
-        name: '',
-        code: ''
-      },
-      country: {
-        name: '',
-        code: ''
-      },
+      district: {},
+      state: {},
       postOffice: '',
       pincode: ''
     },
@@ -90,39 +80,41 @@ const Enrollment = () => {
         setPage(page + 1)
       }
     } else if (page === 2) {
-      if (formData.country === '') {
-        toast.error(t('PLEASE_SELECT_YOUR_COUNTRY'))
-      } else if (formData.state === '') {
+      if (formData.address.state.name === '') {
         toast.error(t('PLEASE_SELECT_YOUR_STATE'))
-      } else if (formData.district === '') {
+      } else if (formData.address.district.name === '') {
         toast.error(t('PLEASE_SELECT_YOUR_DISTRICT'))
-      } else if (formData.village === '') {
+      } else if (formData.address.village === '') {
         toast.error(t('PLEASE_ENTER_YOUR_VILLAGE'))
-      } else if (formData.houseNo === '') {
+      } else if (formData.address.houseNo === '') {
         toast.error(t('PLEASE_ENTER_YOUR_HOUSE_NUMBER'))
-      } else if (formData.street === '') {
+      } else if (formData.address.street === '') {
         toast.error(t('PLEASE_ENTER_YOUR_STREET'))
-      } else if (formData.locality === '') {
+      } else if (formData.address.locality === '') {
         toast.error(t('PLEASE_ENTER_YOUR_LOCALITY'))
-      } else if (formData.postOffice === '') {
+      } else if (formData.address.postOffice === '') {
         toast.error(t('PLEASE_ENTER_YOUR_AREA_POST_OFFICE'))
-      } else if (formData.landmark === '') {
+      } else if (formData.address.landmark === '') {
         toast.error(t('PLEASE_ENTER_NEAREST_LANDMARK'))
-      } else if (formData.pincode === '') {
+      } else if (formData.address.pincode === '') {
         toast.error(t('PLEASE_ENTER_YOUR_AREA_PINCODE'))
-      } else if (!validPincode.test(formData.pincode)) {
+      } else if (!validPincode.test(formData.address.pincode)) {
         toast.error(t('PLEASE_ENTER_VALID_PINCODE'))
       } else {
-        setFormData({
-          ...formData,
-          address: `${formData.houseNo}, ${formData.street}, ${formData.locality}, ${formData.landmark}, ${formData.village}, ${formData.district.label}, ${formData.state.label}, ${formData.country.label}, ${formData.postOffice}, ${formData.pincode}`
-        })
         setPage(page + 1)
       }
     } else if (page === 3) {
       setPage(page + 1)
     } else if (page === 4) {
-      setPage(page + 1)
+      if (formData.documents.POI === '') {
+        toast.error(t('PLEASE_TAKE_THE_PICTURE_OF_THE_PROOF_OF_IDENTITY'))
+      } else if (formData.documents.POA === '') {
+        toast.error(t('PLEASE_TAKE_THE_PICTURE_OF_THE_PROOF_OF_ADDRESS'))
+      } else if (formData.documents.DOB === '') {
+        toast.error(t('PLEASE_TAKE_THE_PICTURE_OF_THE_PROOF_OF_DATE_OF_BIRTH'))
+      } else {
+        setPage(page + 1)
+      }
     } else if (page === 5) {
       setPage(page + 1)
     } else if (page === 6) {