address refactoring

4 files changed, 113 insertions, 53 deletions

diff --git a/client/src/constants/RegEx.js b/client/src/constants/RegEx.js
index fca28f1..6c2ebbc 100644
--- a/client/src/constants/RegEx.js
+++ b/client/src/constants/RegEx.js
@@ -1,4 +1,4 @@
-export const validString = /^[a-zA-Z]+$/
+export const validString = /^[a-zA-Z ?]+$/
 
 export const validMobileNumber = /^[0-9]{10}$/
 
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()}
     </>
diff --git a/client/src/pages/Update/Demographic/Demographic.jsx b/client/src/pages/Update/Demographic/Demographic.jsx
index 6ce06a1..3e95d60 100644
--- a/client/src/pages/Update/Demographic/Demographic.jsx
+++ b/client/src/pages/Update/Demographic/Demographic.jsx
@@ -45,22 +45,32 @@ const Demographic = () => {
   })
 
   useEffect(() => {
+    const address = userData?.address?.split(',')
+    const addressObj = {
+      houseNo: address[0],
+      street: address[1],
+      locality: address[2],
+      landmark: address[3],
+      village: address[4],
+      district: address[5],
+      country: address[6],
+      pincode: address[7]
+    }
+
     setFormData({
       ...formData,
-      ...userData
+      ...userData,
+      ...addressObj
     })
   }, [userData])
 
-// Make api call using the provided aadhaar number and set the user data in the context if the api call is successful. Set form data to the user data if the api call is successful and prevent too many re-renders.
-  const { isLoading, isError, data } = useQuery(
-    'user',
-    async () => {
-      if (isLongEnough) {
-        const response = await getUserByAadhaar(aadhaarNumber)
-        return response
-      }
+  // Make api call using the provided aadhaar number and set the user data in the context if the api call is successful. Set form data to the user data if the api call is successful and prevent too many re-renders.
+  const { isLoading, isError, data } = useQuery('user', async () => {
+    if (isLongEnough) {
+      const response = await getUserByAadhaar(aadhaarNumber)
+      return response
     }
-  )
+  })
 
   if (isLoading) {
     return <div>{t('loading')}</div>
@@ -77,14 +87,7 @@ const Demographic = () => {
   const address = userData?.address
   console.log(address)
 
-  console.log(
-    'Aadhaar: ',
-    aadhaarNumber,
-    'Islong: ',
-    isLongEnough,
-    'User: ',
-    userData
-  )
+  console.log('Form Data: ', formData, userData)
 
   const handleSubmit = () => {
     if (page === 0) {
@@ -131,7 +134,7 @@ const Demographic = () => {
       } 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.country.label}, ${formData.pincode}`
         })
         setPage(page + 1)
       }
@@ -167,7 +170,11 @@ const Demographic = () => {
   }
   return (
     <>
-      <ToastContainer autoClose={1000} hideProgressBar={true} theme={'colored'} />
+      <ToastContainer
+        autoClose={1000}
+        hideProgressBar={true}
+        theme={'colored'}
+      />
       {conditionalComponent()}
       {conditionalButton()}
     </>