address refactoring

2 files changed, 85 insertions, 32 deletions

diff --git a/client/src/pages/Enrollment/Address/Address.jsx b/client/src/pages/Enrollment/Address/Address.jsx
index b6c3809..2e0fc6c 100644
--- a/client/src/pages/Enrollment/Address/Address.jsx
+++ b/client/src/pages/Enrollment/Address/Address.jsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import Header from '../../../components/Header/Header'
 import Input from '../../../components/Input/Input'
 import { Country, State, City } from 'country-state-city'
@@ -8,9 +8,36 @@ 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,
@@ -62,10 +89,10 @@ const Address = ({ formData, setFormData }) => {
                 name="country"
                 label="country"
                 options={updatedCountries}
-                value={formData.country}
+                value={tempData.country}
                 onChange={(e) => {
-                  setFormData({
-                    ...formData,
+                  setTempData({
+                    ...tempData,
                     country: e
                   })
                 }}
@@ -79,11 +106,11 @@ const Address = ({ formData, setFormData }) => {
               <Select
                 id="state"
                 name="state"
-                options={updatedStates(formData.country.isoCode)}
-                value={formData.state}
+                options={updatedStates(tempData.country.isoCode)}
+                value={tempData.state}
                 onChange={(e) => {
-                  setFormData({
-                    ...formData,
+                  setTempData({
+                    ...tempData,
                     state: e
                   })
                 }}
@@ -98,13 +125,13 @@ const Address = ({ formData, setFormData }) => {
                 id="city"
                 name="city"
                 options={updatedCities(
-                  formData.country.isoCode,
-                  formData.state.isoCode
+                  tempData.country.isoCode,
+                  tempData.state.isoCode
                 )}
-                value={formData.district}
+                value={tempData.district}
                 onChange={(e) => {
-                  setFormData({
-                    ...formData,
+                  setTempData({
+                    ...tempData,
                     district: e
                   })
                 }}
@@ -135,7 +162,9 @@ const Address = ({ formData, setFormData }) => {
             onChange={(e) => {
               setFormData({
                 ...formData,
-                houseNo: e.target.value
+                address: {
+                  houseNo: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_YOUR_HOUSE_NUMBER_APARTMENT')}
@@ -148,7 +177,9 @@ const Address = ({ formData, setFormData }) => {
             onChange={(e) => {
               setFormData({
                 ...formData,
-                street: e.target.value
+                address: {
+                  street: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_YOUR_STREET_ROAD')}
@@ -161,7 +192,9 @@ const Address = ({ formData, setFormData }) => {
             onChange={(e) => {
               setFormData({
                 ...formData,
-                locality: e.target.value
+                address: {
+                  locality: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_YOUR_AREA_LOCALITY')}
@@ -174,7 +207,9 @@ const Address = ({ formData, setFormData }) => {
             onChange={(e) => {
               setFormData({
                 ...formData,
-                postOffice: e.target.value
+                address: {
+                  postOffice: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_YOUR_AREA_POST_OFFICE')}
@@ -189,7 +224,9 @@ const Address = ({ formData, setFormData }) => {
             onChange={(e) => {
               setFormData({
                 ...formData,
-                landmark: e.target.value
+                address: {
+                  landmark: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_ANY_NEAREST_LANDMARK')}
@@ -202,7 +239,9 @@ const Address = ({ formData, setFormData }) => {
             onChange={(e) => {
               setFormData({
                 ...formData,
-                pincode: e.target.value
+                address: {
+                  pincode: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_YOUR_AREA_PINCODE')}
diff --git a/client/src/pages/Enrollment/Enrollment.jsx b/client/src/pages/Enrollment/Enrollment.jsx
index 18529a4..1a2aa03 100644
--- a/client/src/pages/Enrollment/Enrollment.jsx
+++ b/client/src/pages/Enrollment/Enrollment.jsx
@@ -33,17 +33,27 @@ const Enrollment = () => {
     dob: new Date().toISOString().slice(0, 10),
     mobile: '',
     email: '',
-    country: '',
-    state: '',
-    district: '',
-    village: '',
-    houseNo: '',
-    street: '',
-    locality: '',
-    postOffice: '',
-    landmark: '',
-    pincode: '',
-    address: '',
+    address: {
+      houseNo: '',
+      street: '',
+      locality: '',
+      landmark: '',
+      village: '',
+      district: {
+        name: '',
+        code: ''
+      },
+      state: {
+        name: '',
+        code: ''
+      },
+      country: {
+        name: '',
+        code: ''
+      },
+      postOffice: '',
+      pincode: ''
+    },
     photo: '',
     documents: {
       POI: '',
@@ -105,7 +115,7 @@ const Enrollment = () => {
       } else {
         setFormData({
           ...formData,
-          address: `${formData.houseNo} ${formData.street}, ${formData.locality}, ${formData.landmark}, ${formData.village}, ${formData.district.label}, ${formData.country.label} ${formData.pincode}`
+          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)
       }
@@ -190,7 +200,11 @@ const Enrollment = () => {
   }
   return (
     <>
-      <ToastContainer autoClose={1000} hideProgressBar={true} theme={'colored'} />
+      <ToastContainer
+        autoClose={1000}
+        hideProgressBar={true}
+        theme={'colored'}
+      />
       {conditionalComponent()}
       {conditionalButton()}
     </>