address refactoring
This commit is contained in:
parent
fba27fbc54
commit
12792757b9
5 changed files with 115 additions and 55 deletions
|
|
@ -1,4 +1,4 @@
|
|||
export const validString = /^[a-zA-Z]+$/
|
||||
export const validString = /^[a-zA-Z ?]+$/
|
||||
|
||||
export const validMobileNumber = /^[0-9]{10}$/
|
||||
|
||||
|
|
|
|||
|
|
@ -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')}
|
||||
|
|
|
|||
|
|
@ -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()}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -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()}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@ const userSchema = mongoose.Schema({
|
|||
dob: {type: String, required: true},
|
||||
mobile: {type: String, required: true},
|
||||
email: {type: String, required: true},
|
||||
address: {type: String, required: true},
|
||||
address: {type: Object, required: true},
|
||||
photo: {type: String, required: true},
|
||||
documents: {type: Object, required: true},
|
||||
biometrics: {type: Object, required: false},
|
||||
biometrics: {type: Object, required: false}, // Need to be true
|
||||
createdAt: {type: Date, default: new Date()},
|
||||
verified: {type: Boolean, default: false},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue