From f2947397f4e99911fe0f8b38c1b1a0c2661dd3e2 Mon Sep 17 00:00:00 2001 From: Blaster4385 Date: Thu, 18 Aug 2022 20:28:10 +0530 Subject: Switch to context api for enrollment form --- client/src/pages/Enrollment/Address/Address.jsx | 78 +++++++------- .../Enrollment/DocumentScanner/DocumentScanner.jsx | 6 +- client/src/pages/Enrollment/Enrollment.jsx | 112 +++++++++------------ client/src/pages/Enrollment/FormOne/FormOne.jsx | 46 +++++---- client/src/pages/Enrollment/FormTwo/FormTwo.jsx | 16 +-- .../pages/Enrollment/PhotoCapture/PhotoCapture.jsx | 13 +-- 6 files changed, 129 insertions(+), 142 deletions(-) (limited to 'client/src') diff --git a/client/src/pages/Enrollment/Address/Address.jsx b/client/src/pages/Enrollment/Address/Address.jsx index 5324413..9ae1857 100644 --- a/client/src/pages/Enrollment/Address/Address.jsx +++ b/client/src/pages/Enrollment/Address/Address.jsx @@ -3,12 +3,14 @@ import Header from '../../../components/Header/Header' import Input from '../../../components/Input/Input' import { State, City } from 'country-state-city' import Select from 'react-select' +import { userContext } from '../../../context/User' import styles from './Address.module.css' import { useTranslation } from 'react-i18next' -const Address = ({ formData, setFormData }) => { +const Address = () => { const { t } = useTranslation() + const { userData, setUserData } = userContext() const updatedStates = (countryId) => State.getStatesOfCountry(countryId).map((state) => ({ @@ -54,12 +56,12 @@ const Address = ({ formData, setFormData }) => { id="state" name="state" options={updatedStates('IN')} - value={formData.address?.state} + value={userData.address?.state} onChange={(e) => { - setFormData({ - ...formData, + setUserData({ + ...userData, address: { - ...formData.address, + ...userData.address, state: e } }) @@ -74,13 +76,13 @@ const Address = ({ formData, setFormData }) => { { - setFormData({ - ...formData, + setUserData({ + ...userData, address: { - ...formData.address, + ...userData.address, village: e.target.value } }) @@ -110,13 +112,13 @@ const Address = ({ formData, setFormData }) => { { - setFormData({ - ...formData, + setUserData({ + ...userData, address: { - ...formData.address, + ...userData.address, houseNo: e.target.value } }) @@ -126,13 +128,13 @@ const Address = ({ formData, setFormData }) => { { - setFormData({ - ...formData, + setUserData({ + ...userData, address: { - ...formData.address, + ...userData.address, street: e.target.value } }) @@ -142,13 +144,13 @@ const Address = ({ formData, setFormData }) => { { - setFormData({ - ...formData, + setUserData({ + ...userData, address: { - ...formData.address, + ...userData.address, locality: e.target.value } }) @@ -158,13 +160,13 @@ const Address = ({ formData, setFormData }) => { { - setFormData({ - ...formData, + setUserData({ + ...userData, address: { - ...formData.address, + ...userData.address, postOffice: e.target.value } }) @@ -176,13 +178,13 @@ const Address = ({ formData, setFormData }) => { { - setFormData({ - ...formData, + setUserData({ + ...userData, address: { - ...formData.address, + ...userData.address, landmark: e.target.value } }) @@ -192,13 +194,13 @@ const Address = ({ formData, setFormData }) => { { - setFormData({ - ...formData, + setUserData({ + ...userData, address: { - ...formData.address, + ...userData.address, pincode: e.target.value } }) diff --git a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx index 043d5b5..f65051e 100644 --- a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx +++ b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx @@ -14,9 +14,11 @@ import { } from '@mui/material' import SubmitButton from '../../../components/SubmitButton/SubmitButton' import { useTranslation } from 'react-i18next' +import { userContext } from '../../../context/User' -const DocumentScanner = ({ formData, setFormData }) => { +const DocumentScanner = () => { const { t } = useTranslation() + const { userData, setUserData } = userContext() const steps = [ t('PROOF_OF_IDENTITY'), t('PROOF_OF_ADDRESS'), @@ -45,7 +47,7 @@ const DocumentScanner = ({ formData, setFormData }) => { const handleNext = () => { if (activeStep === steps.length - 1) { - setFormData({ ...formData, documents: documents }) + setUserData({ ...userData, documents: documents }) } setActiveStep((prevActiveStep) => prevActiveStep + 1) } diff --git a/client/src/pages/Enrollment/Enrollment.jsx b/client/src/pages/Enrollment/Enrollment.jsx index c4f5b85..19f0133 100644 --- a/client/src/pages/Enrollment/Enrollment.jsx +++ b/client/src/pages/Enrollment/Enrollment.jsx @@ -21,84 +21,60 @@ import { createUser } from '../../services/apiservice' import { useTranslation } from 'react-i18next' import { ToastContainer, toast } from 'react-toastify' import 'react-toastify/dist/ReactToastify.css' +import { userContext } from '../../context/User' const Enrollment = () => { const { t } = useTranslation() const [page, setPage] = useState(0) - - const [formData, setFormData] = useState({ - indianResident: '', - name: '', - gender: '', - dob: new Date().toISOString().slice(0, 10), - mobile: '', - email: '', - address: { - houseNo: '', - street: '', - locality: '', - landmark: '', - village: '', - district: {}, - state: {}, - postOffice: '', - pincode: '' - }, - photo: '', - documents: { - POI: '', - POA: '', - DOB: '' - } - }) + const { userData } = userContext() const { mutate } = useMutation((payload) => createUser(payload)) const handleSubmit = () => { if (page === 0) { - if (formData.indianResident === '') { + if (userData.indianResident === '') { toast.error(t('PLEASE_SELECT_YOUR_RESIDENCY')) - } else if (formData.name === '' || formData.name.length < 1) { + } else if (userData.name === '' || userData.name.length < 1) { toast.error(t('PLEASE_ENTER_YOUR_NAME')) - } else if (!validString.test(formData.name)) { + } else if (!validString.test(userData.name)) { toast.error(t('PLEASE_ENTER_VALID_NAME')) - } else if (formData.gender === '') { + } else if (userData.gender === '') { toast.error(t('PLEASE_SELECT_YOUR_GENDER')) } else { setPage(page + 1) } } else if (page === 1) { - if (formData.mobile === '') { + if (userData.mobile === '') { toast.error(t('PLEASE_ENTER_YOUR_MOBILE_NUMBER')) - } else if (!validMobileNumber.test(formData.mobile)) { + } else if (!validMobileNumber.test(userData.mobile)) { toast.error(t('PLEASE_ENTER_VALID_MOBILE_NUMBER')) - } else if (formData.email === '') { + } else if (userData.email === '') { toast.error(t('PLEASE_ENTER_YOUR_EMAIL')) - } else if (!validEmail.test(formData.email)) { + } else if (!validEmail.test(userData.email)) { toast.error(t('PLEASE_ENTER_VALID_EMAIL')) } else { setPage(page + 1) } } else if (page === 2) { - if (formData.address.state.name === '') { + if (userData.address.state.name === '') { toast.error(t('PLEASE_SELECT_YOUR_STATE')) - } else if (formData.address.district.name === '') { + } else if (userData.address.district.name === '') { toast.error(t('PLEASE_SELECT_YOUR_DISTRICT')) - } else if (formData.address.village === '') { + } else if (userData.address.village === '') { toast.error(t('PLEASE_ENTER_YOUR_VILLAGE')) - } else if (formData.address.houseNo === '') { + } else if (userData.address.houseNo === '') { toast.error(t('PLEASE_ENTER_YOUR_HOUSE_NUMBER')) - } else if (formData.address.street === '') { + } else if (userData.address.street === '') { toast.error(t('PLEASE_ENTER_YOUR_STREET')) - } else if (formData.address.locality === '') { + } else if (userData.address.locality === '') { toast.error(t('PLEASE_ENTER_YOUR_LOCALITY')) - } else if (formData.address.postOffice === '') { + } else if (userData.address.postOffice === '') { toast.error(t('PLEASE_ENTER_YOUR_AREA_POST_OFFICE')) - } else if (formData.address.landmark === '') { + } else if (userData.address.landmark === '') { toast.error(t('PLEASE_ENTER_NEAREST_LANDMARK')) - } else if (formData.address.pincode === '') { + } else if (userData.address.pincode === '') { toast.error(t('PLEASE_ENTER_YOUR_AREA_PINCODE')) - } else if (!validPincode.test(formData.address.pincode)) { + } else if (!validPincode.test(userData.address.pincode)) { toast.error(t('PLEASE_ENTER_VALID_PINCODE')) } else { setPage(page + 1) @@ -106,11 +82,11 @@ const Enrollment = () => { } else if (page === 3) { setPage(page + 1) } else if (page === 4) { - if (formData.documents.POI === '') { + if (userData.documents.POI === '') { toast.error(t('PLEASE_TAKE_THE_PICTURE_OF_THE_PROOF_OF_IDENTITY')) - } else if (formData.documents.POA === '') { + } else if (userData.documents.POA === '') { toast.error(t('PLEASE_TAKE_THE_PICTURE_OF_THE_PROOF_OF_ADDRESS')) - } else if (formData.documents.DOB === '') { + } else if (userData.documents.DOB === '') { toast.error(t('PLEASE_TAKE_THE_PICTURE_OF_THE_PROOF_OF_DATE_OF_BIRTH')) } else { setPage(page + 1) @@ -123,44 +99,46 @@ const Enrollment = () => { setPage(page + 1) } else if (page === 8) { mutate({ - indianResident: formData.indianResident, - name: formData.name, - gender: formData.gender, - dob: formData.dob, - mobile: formData.mobile, - email: formData.email, - address: formData.address, - photo: formData.photo, + indianResident: userData.indianResident, + name: userData.name, + gender: userData.gender, + dob: userData.dob, + mobile: userData.mobile, + email: userData.email, + address: userData.address, + photo: userData.photo, documents: { - POI: formData.documents.POI, - POA: formData.documents.POA, - DOB: formData.documents.DOB + POI: userData.documents.POI, + POA: userData.documents.POA, + DOB: userData.documents.DOB } }) setPage(page + 1) } } +console.log(userData) + const conditionalComponent = () => { switch (page) { case 0: - return + return case 1: - return + return case 2: - return
+ return
case 3: - return + return case 4: - return + return case 5: - return + return case 6: - return + return case 7: - return + return case 8: - return + return default: return } diff --git a/client/src/pages/Enrollment/FormOne/FormOne.jsx b/client/src/pages/Enrollment/FormOne/FormOne.jsx index c59621d..2754660 100644 --- a/client/src/pages/Enrollment/FormOne/FormOne.jsx +++ b/client/src/pages/Enrollment/FormOne/FormOne.jsx @@ -4,9 +4,11 @@ import Header from '../../../components/Header/Header' import Input from '../../../components/Input/Input' import LabelCard from '../../../components/LabelCard/LabelCard' import styles from './FormOne.module.css' +import { userContext } from '../../../context/User' -const FormOne = ({ formData, setFormData }) => { +const FormOne = () => { const { t } = useTranslation() + const { userData, setUserData } = userContext() return ( <> @@ -18,10 +20,10 @@ const FormOne = ({ formData, setFormData }) => { type="radio" id="indian" name="resident" - value={formData.indianResident} + value={userData.indianResident} onChange={() => { - setFormData({ - ...formData, + setUserData({ + ...userData, indianResident: true }) }} @@ -34,10 +36,10 @@ const FormOne = ({ formData, setFormData }) => { type="radio" id="indian" name="resident" - value={formData.indianResident} + value={userData.indianResident} onChange={() => { - setFormData({ - ...formData, + setUserData({ + ...userData, indianResident: false }) }} @@ -51,10 +53,10 @@ const FormOne = ({ formData, setFormData }) => { type="text" id="fullName" label={t('FULL_NAME')} - value={formData.name} + value={userData.name} onChange={(e) => { - setFormData({ - ...formData, + setUserData({ + ...userData, name: e.target.value }) }} @@ -66,10 +68,10 @@ const FormOne = ({ formData, setFormData }) => { id="male" name="gender" title={t('MALE')} - value={formData.gender} + value={userData.gender} onChange={() => { - setFormData({ - ...formData, + setUserData({ + ...userData, gender: 'Male' }) }} @@ -78,11 +80,11 @@ const FormOne = ({ formData, setFormData }) => { { - setFormData({ - ...formData, + setUserData({ + ...userData, gender: 'Female' }) }} @@ -91,11 +93,11 @@ const FormOne = ({ formData, setFormData }) => { { - setFormData({ - ...formData, + setUserData({ + ...userData, gender: 'Other' }) }} @@ -110,10 +112,10 @@ const FormOne = ({ formData, setFormData }) => { type="date" id="dob" name="dob" - value={formData.dob} + value={userData.dob} onChange={(e) => { - setFormData({ - ...formData, + setUserData({ + ...userData, dob: e.target.value }) }} diff --git a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx index 205b3d9..05ad075 100644 --- a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx +++ b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx @@ -3,20 +3,22 @@ import Input from '../../../components/Input/Input' import Header from '../../../components/Header/Header' import SubmitButton from '../../../components/SubmitButton/SubmitButton' import { useTranslation } from 'react-i18next' +import { userContext } from '../../../context/User' -const FormTwo = ({ formData, setFormData }) => { +const FormTwo = () => { const { t } = useTranslation() + const { userData, setUserData } = userContext() return (
{ - setFormData({ - ...formData, + setUserData({ + ...userData, mobile: e.target.value }) }} @@ -24,12 +26,12 @@ const FormTwo = ({ formData, setFormData }) => { /> { - setFormData({ - ...formData, + setUserData({ + ...userData, email: e.target.value }) }} diff --git a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx index a54085f..17fe3df 100644 --- a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx +++ b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx @@ -7,22 +7,23 @@ import SubmitButton from '../../../components/SubmitButton/SubmitButton' import styles from './PhotoCapture.module.css' import { Button, Grid, Typography } from '@mui/material' import { t } from 'i18next' +import { userContext } from '../../../context/User' -const PhotoCapture = ({ formData, setFormData }) => { +const PhotoCapture = () => { const navigate = useNavigate() - + const { userData, setUserData } = userContext() const webcamRef = React.useRef(null) const capture = React.useCallback(() => { const imageSrc = webcamRef.current.getScreenshot() - setFormData({ ...formData, photo: imageSrc }) + setUserData({ ...userData, photo: imageSrc }) }) return ( <>
- {formData.photo === '' ? ( + {!userData.photo ? ( { }} /> ) : ( - + )}
@@ -62,7 +63,7 @@ const PhotoCapture = ({ formData, setFormData }) => { variant="contained" onClick={(e) => { e.preventDefault() - setFormData({ ...formData, photo: '' }) + setUserData({ ...userData, photo: '' }) }} > {t('RESET')} -- cgit From 1d0a79ee10a456d9c970713f2952c3319cac4f8a Mon Sep 17 00:00:00 2001 From: Blaster4385 Date: Thu, 18 Aug 2022 20:45:53 +0530 Subject: Clear context and navigate to home on completing enrollment --- client/src/pages/Enrollment/Enrollment.jsx | 43 ++++++++++++++++++------------ 1 file changed, 26 insertions(+), 17 deletions(-) (limited to 'client/src') diff --git a/client/src/pages/Enrollment/Enrollment.jsx b/client/src/pages/Enrollment/Enrollment.jsx index 19f0133..cda04df 100644 --- a/client/src/pages/Enrollment/Enrollment.jsx +++ b/client/src/pages/Enrollment/Enrollment.jsx @@ -22,11 +22,13 @@ import { useTranslation } from 'react-i18next' import { ToastContainer, toast } from 'react-toastify' import 'react-toastify/dist/ReactToastify.css' import { userContext } from '../../context/User' +import { useNavigate } from 'react-router-dom' const Enrollment = () => { const { t } = useTranslation() const [page, setPage] = useState(0) - const { userData } = userContext() + const { userData, setUserData } = userContext() + const navigate = useNavigate() const { mutate } = useMutation((payload) => createUser(payload)) @@ -98,26 +100,33 @@ const Enrollment = () => { } else if (page === 7) { setPage(page + 1) } else if (page === 8) { - mutate({ - indianResident: userData.indianResident, - name: userData.name, - gender: userData.gender, - dob: userData.dob, - mobile: userData.mobile, - email: userData.email, - address: userData.address, - photo: userData.photo, - documents: { - POI: userData.documents.POI, - POA: userData.documents.POA, - DOB: userData.documents.DOB + mutate( + { + indianResident: userData.indianResident, + name: userData.name, + gender: userData.gender, + dob: userData.dob, + mobile: userData.mobile, + email: userData.email, + address: userData.address, + photo: userData.photo, + documents: { + POI: userData.documents.POI, + POA: userData.documents.POA, + DOB: userData.documents.DOB + } + }, + { + onSuccess: () => { + setUserData(null) + navigate('/') + } } - }) - setPage(page + 1) + ) } } -console.log(userData) + console.log(userData) const conditionalComponent = () => { switch (page) { -- cgit From 945a16740a36b616f7f2154ffe544f2d2fdbfabd Mon Sep 17 00:00:00 2001 From: Blaster4385 Date: Thu, 18 Aug 2022 21:05:35 +0530 Subject: This is what happens when you hard code 10+ validators --- client/src/context/User.js | 52 ++++++++++++++++++++++++++++-- client/src/pages/Enrollment/Enrollment.jsx | 4 +-- 2 files changed, 52 insertions(+), 4 deletions(-) (limited to 'client/src') diff --git a/client/src/context/User.js b/client/src/context/User.js index b3b42e5..a3a883e 100644 --- a/client/src/context/User.js +++ b/client/src/context/User.js @@ -4,8 +4,56 @@ export const UserContext = createContext() export const Context = ({ children }) => { const [aadhaarNumber, setAadhaarNumber] = useState(null) - const [userData, setUserData] = useState({}) - const [oriUserData, setOriUserData] = useState({}) + const [userData, setUserData] = useState({ + indianResident: '', + name: '', + gender: '', + dob: new Date().toISOString().slice(0, 10), + mobile: '', + email: '', + address: { + houseNo: '', + street: '', + locality: '', + landmark: '', + village: '', + district: {}, + state: {}, + postOffice: '', + pincode: '' + }, + photo: '', + documents: { + POI: '', + POA: '', + DOB: '' + } + }) + const [oriUserData, setOriUserData] = useState({ + indianResident: '', + name: '', + gender: '', + dob: new Date().toISOString().slice(0, 10), + mobile: '', + email: '', + address: { + houseNo: '', + street: '', + locality: '', + landmark: '', + village: '', + district: {}, + state: {}, + postOffice: '', + pincode: '' + }, + photo: '', + documents: { + POI: '', + POA: '', + DOB: '' + } + }) const initialUser = { aadhaarNumber, diff --git a/client/src/pages/Enrollment/Enrollment.jsx b/client/src/pages/Enrollment/Enrollment.jsx index cda04df..59211f9 100644 --- a/client/src/pages/Enrollment/Enrollment.jsx +++ b/client/src/pages/Enrollment/Enrollment.jsx @@ -58,9 +58,9 @@ const Enrollment = () => { setPage(page + 1) } } else if (page === 2) { - if (userData.address.state.name === '') { + if (!userData.address.state.name) { toast.error(t('PLEASE_SELECT_YOUR_STATE')) - } else if (userData.address.district.name === '') { + } else if (!userData.address.district.name) { toast.error(t('PLEASE_SELECT_YOUR_DISTRICT')) } else if (userData.address.village === '') { toast.error(t('PLEASE_ENTER_YOUR_VILLAGE')) -- cgit From a06eec4ebb81ba77d4a8b03372a6312ffa5b2aa0 Mon Sep 17 00:00:00 2001 From: Blaster4385 Date: Thu, 18 Aug 2022 22:42:29 +0530 Subject: Fix gender input prefilling --- client/src/components/Gender/Gender.jsx | 6 +++--- client/src/pages/Update/FormOne/FormOne.jsx | 7 ++++++- 2 files changed, 9 insertions(+), 4 deletions(-) (limited to 'client/src') diff --git a/client/src/components/Gender/Gender.jsx b/client/src/components/Gender/Gender.jsx index 0079fc3..9b302a2 100644 --- a/client/src/components/Gender/Gender.jsx +++ b/client/src/components/Gender/Gender.jsx @@ -14,7 +14,7 @@ const Gender = ({ formData, setFormData }) => { return (
{ image={`${process.env.PUBLIC_URL}/assets/images/male.svg`} /> { image={`${process.env.PUBLIC_URL}/assets/images/female.svg`} /> { setEditable(!editable) } + useEffect(() => { + console.log(userData.gender) + document.getElementById(`${userData.gender}`).checked = 'checked' + }, [userData.gender]) + return ( <>
-- cgit