From 6b85ebee8986b982e05d49c8f1a326deb3e08bae Mon Sep 17 00:00:00 2001 From: rohan09-raj Date: Thu, 18 Aug 2022 11:43:03 +0530 Subject: Fixed components --- client/src/components/Gender/Gender.jsx | 6 +- .../LanguageSelect/locales/en/translation.json | 5 +- .../LanguageSelect/locales/hi/translation.json | 5 +- client/src/pages/Enrollment/Address/Address.jsx | 97 +++------- client/src/pages/Enrollment/Enrollment.jsx | 50 +++-- client/src/pages/Update/Address/Address.jsx | 164 +++++++--------- client/src/pages/Update/Agreement/Agreement.jsx | 8 +- .../src/pages/Update/Demographic/Demographic.jsx | 92 +++------ .../Update/DocumentScanner/DocumentScanner.jsx | 206 +++++++++++++++++---- client/src/pages/Update/FormOne/FormOne.jsx | 30 +-- client/src/services/apiservice.js | 5 + 11 files changed, 349 insertions(+), 319 deletions(-) (limited to 'client/src') diff --git a/client/src/components/Gender/Gender.jsx b/client/src/components/Gender/Gender.jsx index 98a1b48..0079fc3 100644 --- a/client/src/components/Gender/Gender.jsx +++ b/client/src/components/Gender/Gender.jsx @@ -17,7 +17,7 @@ const Gender = ({ formData, setFormData }) => { id="male" name="gender" title={t('MALE')} - value={formData.gender} + value={formData?.gender} readOnly={editable} onChange={() => { setFormData({ @@ -30,7 +30,7 @@ const Gender = ({ formData, setFormData }) => { { @@ -44,7 +44,7 @@ const Gender = ({ formData, setFormData }) => { { diff --git a/client/src/components/LanguageSelect/locales/en/translation.json b/client/src/components/LanguageSelect/locales/en/translation.json index bedc763..8603116 100644 --- a/client/src/components/LanguageSelect/locales/en/translation.json +++ b/client/src/components/LanguageSelect/locales/en/translation.json @@ -79,5 +79,8 @@ "FINGERPRINT_SCAN": "Fingerprint Scan", "IRIS_SCAN": "Iris Scan", "DEMOGRAPHIC": "Demographic", - "BIOMETRIC": "Biometric" + "BIOMETRIC": "Biometric", + "PLEASE_TAKE_THE_PICTURE_OF_THE_PROOF_OF_IDENTITY": "Please take the picture of the Proof of Identity", + "PLEASE_TAKE_THE_PICTURE_OF_THE_PROOF_OF_ADDRESS": "Please take the picture of the Proof of Identity", + "PLEASE_TAKE_THE_PICTURE_OF_THE_PROOF_OF_DATE_OF_BIRTH": "Please take the picture of the Proof of Date of Birth" } diff --git a/client/src/components/LanguageSelect/locales/hi/translation.json b/client/src/components/LanguageSelect/locales/hi/translation.json index a5b3080..3c9db8a 100644 --- a/client/src/components/LanguageSelect/locales/hi/translation.json +++ b/client/src/components/LanguageSelect/locales/hi/translation.json @@ -73,5 +73,8 @@ "FINGERPRINT_SCAN": "फिंगरप्रिंट स्कैन", "IRIS_SCAN": "आइरिस स्कैन", "DEMOGRAPHIC": "जनसांख्यिकीय", - "BIOMETRIC": "बायोमेट्रिक" + "BIOMETRIC": "बायोमेट्रिक", + "PLEASE_TAKE_THE_PICTURE_OF_THE_PROOF_OF_IDENTITY": "कृपया पहचान प्रमाण पत्र की तस्वीर लें", + "PLEASE_TAKE_THE_PICTURE_OF_THE_PROOF_OF_ADDRESS": "कृपया पते के प्रमाण की तस्वीर लें", + "PLEASE_TAKE_THE_PICTURE_OF_THE_PROOF_OF_DATE_OF_BIRTH": "कृपया जन्मतिथि के प्रमाण की तस्वीर लें" } diff --git a/client/src/pages/Enrollment/Address/Address.jsx b/client/src/pages/Enrollment/Address/Address.jsx index 2e0fc6c..5324413 100644 --- a/client/src/pages/Enrollment/Address/Address.jsx +++ b/client/src/pages/Enrollment/Address/Address.jsx @@ -1,48 +1,14 @@ -import React, { useState, useEffect } from 'react' +import React from 'react' import Header from '../../../components/Header/Header' import Input from '../../../components/Input/Input' -import { Country, State, City } from 'country-state-city' +import { State, City } from 'country-state-city' import Select from 'react-select' 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, - ...country - })) const updatedStates = (countryId) => State.getStatesOfCountry(countryId).map((state) => ({ @@ -81,37 +47,21 @@ const Address = ({ formData, setFormData }) => {
-
-
- - { - setTempData({ - ...tempData, - state: e + setFormData({ + ...formData, + address: { + ...formData.address, + state: e + } }) }} styles={customStyles} @@ -124,15 +74,15 @@ const Address = ({ formData, setFormData }) => { { - setFormData({ - ...formData, - country: e - }) - }} - styles={customStyles} - /> - -
-
-
@@ -110,14 +67,17 @@ const Address = ({ formData, setFormData }) => { { - setFormData({ - ...formData, - district: e + setUserData({ + ...userData, + address: { + ...userData.address, + district: e + } }) }} styles={customStyles} @@ -161,12 +121,15 @@ const Address = ({ formData, setFormData }) => { { - setFormData({ - ...formData, - village: e.target.value + setUserData({ + ...userData, + address: { + ...userData.address, + village: e.target.value + } }) }} placeholder={t('ENTER_YOUR_VILLAGE_TOWN')} @@ -176,12 +139,15 @@ const Address = ({ formData, setFormData }) => { { - setFormData({ - ...formData, - houseNo: e.target.value + setUserData({ + ...userData, + address: { + ...userData.address, + houseNo: e.target.value + } }) }} placeholder={t('ENTER_YOUR_HOUSE_NUMBER_APARTMENT')} @@ -189,12 +155,15 @@ const Address = ({ formData, setFormData }) => { { - setFormData({ - ...formData, - street: e.target.value + setUserData({ + ...userData, + address: { + ...userData.address, + street: e.target.value + } }) }} placeholder={t('ENTER_YOUR_STREET_ROAD')} @@ -202,12 +171,15 @@ const Address = ({ formData, setFormData }) => { { - setFormData({ - ...formData, - locality: e.target.value + setUserData({ + ...userData, + address: { + ...userData.address, + locality: e.target.value + } }) }} placeholder={t('ENTER_YOUR_AREA_LOCALITY')} @@ -215,12 +187,15 @@ const Address = ({ formData, setFormData }) => { { - setFormData({ - ...formData, - postOffice: e.target.value + setUserData({ + ...userData, + address: { + ...userData.address, + postOffice: e.target.value + } }) }} placeholder={t('ENTER_YOUR_AREA_POST_OFFICE')} @@ -230,12 +205,15 @@ const Address = ({ formData, setFormData }) => { { - setFormData({ - ...formData, - landmark: e.target.value + setUserData({ + ...userData, + address: { + ...userData.address, + landmark: e.target.value + } }) }} placeholder={t('ENTER_ANY_NEAREST_LANDMARK')} @@ -243,16 +221,18 @@ const Address = ({ formData, setFormData }) => { { - setFormData({ - ...formData, - pincode: e.target.value + setUserData({ + ...userData, + address: { + ...userData.address, + pincode: e.target.value + } }) }} placeholder={t('ENTER_YOUR_AREA_PINCODE')} - pattern="[0-9]+" />
diff --git a/client/src/pages/Update/Agreement/Agreement.jsx b/client/src/pages/Update/Agreement/Agreement.jsx index 6452bd8..91dade7 100644 --- a/client/src/pages/Update/Agreement/Agreement.jsx +++ b/client/src/pages/Update/Agreement/Agreement.jsx @@ -7,8 +7,14 @@ import { Grid, Button } from '@mui/material' import { Link } from 'react-router-dom' import SubmitButton from '../../../components/SubmitButton/SubmitButton' import { useTranslation } from 'react-i18next' +import { userContext } from '../../../context/User' +import { useMutation } from 'react-query' +import { updateUser } from '../../../services/apiservice' const Agreement = () => { + const { userData } = userContext() + const updateUse = useMutation(() => updateUser(userData._id, ...userData)) + const { t } = useTranslation() return ( <> @@ -47,7 +53,7 @@ const Agreement = () => { - + updateUse.mutate()} /> ) diff --git a/client/src/pages/Update/Demographic/Demographic.jsx b/client/src/pages/Update/Demographic/Demographic.jsx index 3e95d60..7638f39 100644 --- a/client/src/pages/Update/Demographic/Demographic.jsx +++ b/client/src/pages/Update/Demographic/Demographic.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import React, { useState } from 'react' import { useQuery } from 'react-query' import { getUserByAadhaar } from '../../../services/apiservice' import Address from '../Address/Address' @@ -25,45 +25,6 @@ const Demographic = () => { const isLongEnough = aadhaarNumber?.toString().length > 11 - const [formData, setFormData] = useState({ - name: '', - gender: '', - dob: '', - mobile: '', - email: '', - country: '', - state: '', - district: '', - village: '', - houseNo: '', - street: '', - locality: '', - postOffice: '', - landmark: '', - pincode: '' - // address: userData?.address - }) - - 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, - ...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) { @@ -84,58 +45,49 @@ const Demographic = () => { setUserData(data?.data) } - const address = userData?.address - console.log(address) - - console.log('Form Data: ', formData, userData) - const handleSubmit = () => { if (page === 0) { - if (formData.name === '' || formData.name.length < 1) { + 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 if (formData.mobile === '') { + } else 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 === 1) { - if (formData.country === '') { + if (userData.country === '') { toast.error(t('PLEASE_SELECT_YOUR_COUNTRY')) - } else if (formData.state === '') { + } else if (userData.address.state.name === '') { toast.error(t('PLEASE_SELECT_YOUR_STATE')) - } else if (formData.district === '') { + } else if (userData.address.district.name === '') { toast.error(t('PLEASE_SELECT_YOUR_DISTRICT')) - } else if (formData.village === '') { + } else if (userData.address.village === '') { toast.error(t('PLEASE_ENTER_YOUR_VILLAGE')) - } else if (formData.houseNo === '') { + } else if (userData.address.houseNo === '') { toast.error(t('PLEASE_ENTER_YOUR_HOUSE_NUMBER')) - } else if (formData.street === '') { + } else if (userData.address.street === '') { toast.error(t('PLEASE_ENTER_YOUR_STREET')) - } else if (formData.locality === '') { + } else if (userData.address.locality === '') { toast.error(t('PLEASE_ENTER_YOUR_LOCALITY')) - } else if (formData.postOffice === '') { + } else if (userData.address.postOffice === '') { toast.error(t('PLEASE_ENTER_YOUR_AREA_POST_OFFICE')) - } else if (formData.landmark === '') { + } else if (userData.address.landmark === '') { toast.error(t('PLEASE_ENTER_NEAREST_LANDMARK')) - } else if (formData.pincode === '') { + } else if (userData.address.pincode === '') { toast.error(t('PLEASE_ENTER_YOUR_AREA_PINCODE')) - } else if (!validPincode.test(formData.pincode)) { + } else if (!validPincode.test(userData.address.pincode)) { toast.error(t('PLEASE_ENTER_VALID_PINCODE')) } else { - setFormData({ - ...formData, - address: `${formData.houseNo}, ${formData.street}, ${formData.locality}, ${formData.landmark}, ${formData.village}, ${formData.district.label}, ${formData.country.label}, ${formData.pincode}` - }) setPage(page + 1) } } else if (page === 3) { @@ -146,11 +98,11 @@ const Demographic = () => { const conditionalComponent = () => { switch (page) { case 0: - return + return case 1: - return
+ return
case 2: - return + return default: return } diff --git a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx index ae8846c..14fb769 100644 --- a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx +++ b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx @@ -1,52 +1,180 @@ -import React from 'react' +/* eslint-disable multiline-ternary */ +import React, { useState } from 'react' +import Webcam from 'react-webcam' import Header from '../../../components/Header/Header' -import CardScanner from '../../../components/Card/CardScanner' import styles from './DocumentScanner.module.css' -import { Button, Grid, Typography } from '@mui/material' +import { + Button, + Grid, + Typography, + StepLabel, + Step, + Stepper, + Box +} from '@mui/material' import SubmitButton from '../../../components/SubmitButton/SubmitButton' import { useTranslation } from 'react-i18next' +import { userContext } from '../../../context/User' const DocumentScanner = () => { + const { userData, setUserData } = userContext() const { t } = useTranslation() + const steps = [ + t('PROOF_OF_IDENTITY'), + t('PROOF_OF_ADDRESS'), + t('PROOF_OF_DOB') + ] + const [documents, setDocuments] = useState({ POI: '', POA: '', DOB: '' }) + const [activeStep, setActiveStep] = React.useState(0) + + const [doccu] = useState({ POI: '', POA: '', DOB: '' }) + + console.log(documents) + + const webcamRef = React.useRef(null) + + const capture = React.useCallback((doc) => { + const imageSrc = webcamRef.current.getScreenshot() + doccu[doc] = imageSrc + setDocuments({ + ...documents, + POI: doccu.POI, + POA: doccu.POA, + DOB: doccu.DOB + }) + }) + + const handleNext = () => { + if (activeStep === steps.length - 1) { + setUserData({ ...userData, documents: documents }) + } + setActiveStep((prevActiveStep) => prevActiveStep + 1) + } + + const handleBack = () => { + setActiveStep((prevActiveStep) => prevActiveStep - 1) + } + + const WebcamComponent = ({ doc }) => { + return ( + <> +
+ {documents[doc] === '' ? ( + + ) : ( + + )} +
+ + + + + + + + +

+
+ + + {t('KINDLY_CLICK_THE_PICTURE_OF_YOUR_DOCUMENTS')} + + +
+ + ) + } + return ( <> -
-
- -
- - - - - - - - -

-
- - - {t('KINDLY_CLICK_THE_PICTURE_OF_YOUR_DOCUMENTS')} - - -
+
+ + + {steps.map((label, index) => { + const stepProps = {} + const labelProps = {} + return ( + + {label} + + ) + })} + + {activeStep === steps.length ? ( + + + {t('ALL_STEPS_COMPLETED')} + + + + + + ) : ( + + {activeStep === 0 ? ( + + ) : activeStep === 1 ? ( + + ) : ( + activeStep === 2 && + )} + + + + + + + )} + ) } diff --git a/client/src/pages/Update/FormOne/FormOne.jsx b/client/src/pages/Update/FormOne/FormOne.jsx index 629588d..fafce05 100644 --- a/client/src/pages/Update/FormOne/FormOne.jsx +++ b/client/src/pages/Update/FormOne/FormOne.jsx @@ -5,8 +5,10 @@ import styles from './FormOne.module.css' import EditButton from '../../../components/EditButton/EditButton' import Gender from '../../../components/Gender/Gender' import { useTranslation } from 'react-i18next' +import { userContext } from '../../../context/User' -const FormOne = ({ formData, setFormData }) => { +const FormOne = () => { + const { userData, setUserData } = userContext() const { t } = useTranslation() const [editable, setEditable] = React.useState(true) @@ -23,10 +25,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 }) }} @@ -35,12 +37,12 @@ const FormOne = ({ formData, setFormData }) => { { - setFormData({ - ...formData, + setUserData({ + ...userData, mobile: e.target.value }) }} @@ -55,11 +57,11 @@ const FormOne = ({ formData, setFormData }) => { type="date" id="dob" name="dob" - value={formData.dob} + value={userData?.dob} readOnly={editable} onChange={(e) => { - setFormData({ - ...formData, + setUserData({ + ...userData, dob: e.target.value }) }} @@ -71,19 +73,19 @@ const FormOne = ({ formData, setFormData }) => { { - setFormData({ - ...formData, + setUserData({ + ...userData, email: e.target.value }) }} placeholder={t('ENTER_YOUR_EMAIL_ID')} /> - +
) diff --git a/client/src/services/apiservice.js b/client/src/services/apiservice.js index f6b5f4e..305d557 100644 --- a/client/src/services/apiservice.js +++ b/client/src/services/apiservice.js @@ -13,3 +13,8 @@ export const getUserByAadhaar = async (aadhaarNumber) => { const response = await apiClient.get(`/user/aadhaar/${aadhaarNumber}`) return response } + +export const updateUser = async (id, payload) => { + const response = await apiClient.patch(`/user/${id}`, payload) + return response +} -- cgit