Switch to context api for enrollment form

6 files changed, 129 insertions, 142 deletions

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 }) => {
               <Select
                 id="city"
                 name="city"
-                options={updatedCities('IN', formData.address?.state?.isoCode)}
-                value={formData.address?.district}
+                options={updatedCities('IN', userData.address?.state?.isoCode)}
+                value={userData.address?.district}
                 onChange={(e) => {
-                  setFormData({
-                    ...formData,
+                  setUserData({
+                    ...userData,
                     address: {
-                      ...formData.address,
+                      ...userData.address,
                       district: e
                     }
                   })
@@ -92,13 +94,13 @@ const Address = ({ formData, setFormData }) => {
           <Input
             id="town"
             label={t('VILLAGE_TOWN')}
-            value={formData.village}
+            value={userData.village}
             type="text"
             onChange={(e) => {
-              setFormData({
-                ...formData,
+              setUserData({
+                ...userData,
                 address: {
-                  ...formData.address,
+                  ...userData.address,
                   village: e.target.value
                 }
               })
@@ -110,13 +112,13 @@ const Address = ({ formData, setFormData }) => {
           <Input
             id="houseNo"
             label={t('HOUSE_NUMBER_APARTMENT')}
-            value={formData.houseNo}
+            value={userData.houseNo}
             type="text"
             onChange={(e) => {
-              setFormData({
-                ...formData,
+              setUserData({
+                ...userData,
                 address: {
-                  ...formData.address,
+                  ...userData.address,
                   houseNo: e.target.value
                 }
               })
@@ -126,13 +128,13 @@ const Address = ({ formData, setFormData }) => {
           <Input
             id="street"
             label={t('STREET_ROAD')}
-            value={formData.street}
+            value={userData.street}
             type="text"
             onChange={(e) => {
-              setFormData({
-                ...formData,
+              setUserData({
+                ...userData,
                 address: {
-                  ...formData.address,
+                  ...userData.address,
                   street: e.target.value
                 }
               })
@@ -142,13 +144,13 @@ const Address = ({ formData, setFormData }) => {
           <Input
             id="locality"
             label={t('AREA_LOCALITY')}
-            value={formData.locality}
+            value={userData.locality}
             type="text"
             onChange={(e) => {
-              setFormData({
-                ...formData,
+              setUserData({
+                ...userData,
                 address: {
-                  ...formData.address,
+                  ...userData.address,
                   locality: e.target.value
                 }
               })
@@ -158,13 +160,13 @@ const Address = ({ formData, setFormData }) => {
           <Input
             id="postOffice"
             label={t('POST_OFFICE')}
-            value={formData.postOffice}
+            value={userData.postOffice}
             type="text"
             onChange={(e) => {
-              setFormData({
-                ...formData,
+              setUserData({
+                ...userData,
                 address: {
-                  ...formData.address,
+                  ...userData.address,
                   postOffice: e.target.value
                 }
               })
@@ -176,13 +178,13 @@ const Address = ({ formData, setFormData }) => {
           <Input
             id="landmark"
             label={t('LANDMARK')}
-            value={formData.landmark}
+            value={userData.landmark}
             type="text"
             onChange={(e) => {
-              setFormData({
-                ...formData,
+              setUserData({
+                ...userData,
                 address: {
-                  ...formData.address,
+                  ...userData.address,
                   landmark: e.target.value
                 }
               })
@@ -192,13 +194,13 @@ const Address = ({ formData, setFormData }) => {
           <Input
             id="pincode"
             label={t('PINCODE')}
-            value={formData.pincode}
+            value={userData.pincode}
             type="text"
             onChange={(e) => {
-              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 <FormOne formData={formData} setFormData={setFormData} />
+        return <FormOne />
       case 1:
-        return <FormTwo formData={formData} setFormData={setFormData} />
+        return <FormTwo />
       case 2:
-        return <Address formData={formData} setFormData={setFormData} />
+        return <Address />
       case 3:
-        return <PhotoCapture formData={formData} setFormData={setFormData} />
+        return <PhotoCapture />
       case 4:
-        return <DocumentScanner formData={formData} setFormData={setFormData} />
+        return <DocumentScanner />
       case 5:
-        return <IrisScan formData={formData} setFormData={setFormData} />
+        return <IrisScan />
       case 6:
-        return <Fingerprint formData={formData} setFormData={setFormData} />
+        return <Fingerprint />
       case 7:
-        return <Agreement formData={formData} setFormData={setFormData} />
+        return <Agreement />
       case 8:
-        return <FinalSlip formData={formData} setFormData={setFormData} />
+        return <FinalSlip />
       default:
         return <Home />
     }
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 }) => {
           <LabelCard
             id="female"
             name="gender"
-            value={formData.gender}
+            value={userData.gender}
             title={t('FEMALE')}
             onChange={() => {
-              setFormData({
-                ...formData,
+              setUserData({
+                ...userData,
                 gender: 'Female'
               })
             }}
@@ -91,11 +93,11 @@ const FormOne = ({ formData, setFormData }) => {
           <LabelCard
             id="trans"
             name="gender"
-            value={formData.gender}
+            value={userData.gender}
             title={t('OTHER')}
             onChange={() => {
-              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 (
     <div className="formtwo">
       <Header subheading={t('ENROLLMENT')} />
       <Input
         id="mobile"
-        value={formData.mobile}
+        value={userData.mobile}
         label={t('MOBILE')}
         type="text"
         onChange={(e) => {
-          setFormData({
-            ...formData,
+          setUserData({
+            ...userData,
             mobile: e.target.value
           })
         }}
@@ -24,12 +26,12 @@ const FormTwo = ({ formData, setFormData }) => {
       />
       <Input
         id="email"
-        value={formData.email}
+        value={userData.email}
         label={t('EMAIL')}
         type="email"
         onChange={(e) => {
-          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 (
     <>
       <Header subheading={t('ENROLLMENT')} />
       <div className={styles.card__container}>
-        {formData.photo === '' ? (
+        {!userData.photo ? (
           <Webcam
             audio={false}
             height={400}
@@ -36,7 +37,7 @@ const PhotoCapture = ({ formData, setFormData }) => {
             }}
           />
         ) : (
-          <img src={formData.photo} />
+          <img src={userData.photo} />
         )}
       </div>
       <Grid container columnSpacing={10} justifyContent="center">
@@ -62,7 +63,7 @@ const PhotoCapture = ({ formData, setFormData }) => {
             variant="contained"
             onClick={(e) => {
               e.preventDefault()
-              setFormData({ ...formData, photo: '' })
+              setUserData({ ...userData, photo: '' })
             }}
           >
             {t('RESET')}