From 0a1a985de6e9a53896d2ba17e26d042009b3e1b4 Mon Sep 17 00:00:00 2001 From: rohan09-raj Date: Thu, 18 Aug 2022 16:12:35 +0530 Subject: Condtional update handling --- client/src/pages/Update/Address/Address.jsx | 20 +++--- client/src/pages/Update/Biometric/Biometric.jsx | 38 ++++++++++- .../src/pages/Update/Demographic/Demographic.jsx | 26 +------- .../Update/DocumentScanner/DocumentScanner.jsx | 54 ++++++++++++++-- client/src/pages/Update/Otp/Otp.jsx | 73 ++++++++++++++++++++++ client/src/pages/Update/Otp/Otp.module.css | 14 +++++ .../src/pages/Update/PhotoCapture/PhotoCapture.jsx | 26 +++++--- client/src/pages/Update/Update.jsx | 29 ++------- client/src/pages/Update/Update.module.css | 22 +++---- 9 files changed, 218 insertions(+), 84 deletions(-) create mode 100644 client/src/pages/Update/Otp/Otp.jsx create mode 100644 client/src/pages/Update/Otp/Otp.module.css (limited to 'client/src/pages/Update') diff --git a/client/src/pages/Update/Address/Address.jsx b/client/src/pages/Update/Address/Address.jsx index 94e60d0..9159508 100644 --- a/client/src/pages/Update/Address/Address.jsx +++ b/client/src/pages/Update/Address/Address.jsx @@ -55,6 +55,8 @@ const Address = () => { setEditable2(!editable2) } + console.log(userData.address.village) + return ( <>
@@ -68,7 +70,7 @@ const Address = () => { id="state" name="state" options={updatedStates('IN')} - value={userData.address.state} + defaultValue={userData.address.state} isDisabled={editable1} isSearchable={!editable1} onChange={(e) => { @@ -97,7 +99,7 @@ const Address = () => { id="city" name="city" options={updatedCities('IN', userData.address.state.isoCode)} - value={userData.address.district} + defaultValue={userData.address.district} isDisabled={editable2} isSearchable={!editable2} onChange={(e) => { @@ -121,7 +123,7 @@ const Address = () => { { setUserData({ @@ -139,7 +141,7 @@ const Address = () => { { setUserData({ @@ -155,7 +157,7 @@ const Address = () => { { setUserData({ @@ -171,7 +173,7 @@ const Address = () => { { setUserData({ @@ -187,7 +189,7 @@ const Address = () => { { setUserData({ @@ -205,7 +207,7 @@ const Address = () => { { setUserData({ @@ -221,7 +223,7 @@ const Address = () => { { setUserData({ diff --git a/client/src/pages/Update/Biometric/Biometric.jsx b/client/src/pages/Update/Biometric/Biometric.jsx index c105ad8..72aa1b7 100644 --- a/client/src/pages/Update/Biometric/Biometric.jsx +++ b/client/src/pages/Update/Biometric/Biometric.jsx @@ -4,9 +4,12 @@ import PhotoCapture from '../PhotoCapture/PhotoCapture' import Fingerprint from '../Fingerprint/Fingerprint' import IrisScan from '../IrisScan/IrisScan' import BiometricSelect from '../BiometricSelect/BiometricSelect' +import BackButton from '../../../components/BackButton/BackButton' +import { userContext } from '../../../context/User' const Biometric = () => { const [page, setPage] = useState(4) + const { userData, oriUserData, setUserData } = userContext() const [formData, setFormData] = useState({ photo: '', @@ -27,14 +30,43 @@ const Biometric = () => { } } + const handleBack = () => { + if (!userData.photo) { + setUserData({ ...userData, photo: oriUserData.photo }) + } + setPage(page - 1) + } + + const handleSubmit = () => { + if (!userData.photo) { + setUserData({ ...userData, photo: oriUserData.photo }) + } + setPage(page + 1) + } + const conditionalButton = () => { switch (page) { case 0: - return setPage(4)}>Next + return ( + <> + handleSubmit()}> Next + handleBack()} /> + + ) case 1: - return setPage(4)}>Next + return ( + <> + setPage(4)}> Next + setPage(page - 1)} /> + + ) case 2: - return setPage(4)}>Next + return ( + <> + setPage(4)}> Next + setPage(page - 1)} /> + + ) } } return ( diff --git a/client/src/pages/Update/Demographic/Demographic.jsx b/client/src/pages/Update/Demographic/Demographic.jsx index 7638f39..61fe972 100644 --- a/client/src/pages/Update/Demographic/Demographic.jsx +++ b/client/src/pages/Update/Demographic/Demographic.jsx @@ -1,6 +1,4 @@ import React, { useState } from 'react' -import { useQuery } from 'react-query' -import { getUserByAadhaar } from '../../../services/apiservice' import Address from '../Address/Address' import DocumentScanner from '../DocumentScanner/DocumentScanner' import SubmitButton from '../../../components/SubmitButton/SubmitButton' @@ -19,32 +17,10 @@ import 'react-toastify/dist/ReactToastify.css' const Demographic = () => { const { t } = useTranslation() - const { aadhaarNumber, userData, setUserData } = userContext() + const { userData } = userContext() const [page, setPage] = useState(0) - const isLongEnough = aadhaarNumber?.toString().length > 11 - - // 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
{t('loading')}
- } - - if (isError) { - return
{t('error')}
- } - - if (data) { - setUserData(data?.data) - } - const handleSubmit = () => { if (page === 0) { if (userData.name === '' || userData.name.length < 1) { diff --git a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx index 14fb769..f6fe0b5 100644 --- a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx +++ b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx @@ -17,13 +17,55 @@ import { useTranslation } from 'react-i18next' import { userContext } from '../../../context/User' const DocumentScanner = () => { - const { userData, setUserData } = userContext() + const { userData, oriUserData, setUserData } = userContext() const { t } = useTranslation() - const steps = [ - t('PROOF_OF_IDENTITY'), - t('PROOF_OF_ADDRESS'), - t('PROOF_OF_DOB') - ] + + // JSON.stringify(oriUserData?.address) === + let steps + + // use conditional statements to compare userData and oriUserData to determine the steps + // 1st case: if only address is changed, then step=['POA'] + // 2nd case: if only either name or gender is changed, then step=['POI'] + // 3rd case: if only dob is changed, then step=['DOB'] + // 4th case: If only address and name or gender is changed, then step=['POA', 'POI'] + // 5th case: If only address and dob is changed, then step=['POA', 'DOB'] + // 6th case: If only name or gender and dob is changed, then step=['POI', 'DOB'] + // 7th case: If everything is changed, then step=['POA', 'POI', 'DOB'] + if ( + (userData.address !== oriUserData.address && + userData.dob !== oriUserData.dob && + userData.name !== oriUserData.name) || + userData.gender !== oriUserData.gender + ) { + steps = ['POA', 'POI', 'DOB'] + } else { + if (userData.address !== oriUserData.address) { + if ( + userData.name !== oriUserData.name || + userData.gender !== oriUserData.gender + ) { + steps = ['POA', 'POI'] + } else if (userData.dob !== oriUserData.dob) { + steps = ['POA', 'DOB'] + } else { + steps = ['POA'] + } + } else if ( + userData.name !== oriUserData.name || + userData.gender !== oriUserData.gender + ) { + if (userData.dob !== oriUserData.dob) { + steps = ['POI', 'DOB'] + } else { + steps = ['POI'] + } + } else if (userData.dob !== oriUserData.dob) { + steps = ['DOB'] + } else { + steps = [] + } + } + const [documents, setDocuments] = useState({ POI: '', POA: '', DOB: '' }) const [activeStep, setActiveStep] = React.useState(0) diff --git a/client/src/pages/Update/Otp/Otp.jsx b/client/src/pages/Update/Otp/Otp.jsx new file mode 100644 index 0000000..2728ba3 --- /dev/null +++ b/client/src/pages/Update/Otp/Otp.jsx @@ -0,0 +1,73 @@ +import React, { useEffect } from 'react' +import Header from '../../../components/Header/Header' +import Input from '../../../components/Input/Input' +import { Button, Grid } from '@mui/material' +import { useNavigate } from 'react-router-dom' +import { useTranslation } from 'react-i18next' +import { userContext } from '../../../context/User' +import { useQuery } from 'react-query' +import { getUserByAadhaar } from '../../../services/apiservice' +import styles from './Otp.module.css' +import SubmitButton from '../../../components/SubmitButton/SubmitButton' + +const Otp = () => { + const navigate = useNavigate() + const { t } = useTranslation() + const { aadhaarNumber, setUserData, oriUserData, setOriUserData } = + userContext() + + useEffect(() => { + setUserData(oriUserData) + }, [oriUserData]) + + const isLongEnough = aadhaarNumber?.toString().length > 11 + + // 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
{t('loading')}
+ } + + if (isError) { + return
{t('error')}
+ } + + if (data) { + setOriUserData(data?.data) + } + return ( + <> +
+
+

Enter OTP

+ + + + + + +
+ navigate('/update/select-update')} /> + + ) +} + +export default Otp diff --git a/client/src/pages/Update/Otp/Otp.module.css b/client/src/pages/Update/Otp/Otp.module.css new file mode 100644 index 0000000..261d7aa --- /dev/null +++ b/client/src/pages/Update/Otp/Otp.module.css @@ -0,0 +1,14 @@ +.subheading__container { + font-family: 'Barlow'; + display: flex; + flex-direction: column; + align-items: center; + font-weight: bolder; + margin: 20px; + padding: 20px; +} + +.subheading { + font-size: var(--font-medium); + font-weight: 400; +} diff --git a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx index 0c4e9f2..8e483a6 100644 --- a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx +++ b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx @@ -1,5 +1,5 @@ /* eslint-disable multiline-ternary */ -import React, { useState } from 'react' +import React from 'react' import Webcam from 'react-webcam' import { useNavigate } from 'react-router-dom' import Header from '../../../components/Header/Header' @@ -7,10 +7,11 @@ import SubmitButton from '../../../components/SubmitButton/SubmitButton' import styles from './PhotoCapture.module.css' import { Button, Grid, Typography } from '@mui/material' import { useTranslation } from 'react-i18next' +import { userContext } from '../../../context/User' const PhotoCapture = () => { const { t } = useTranslation() - const [photo, setPhoto] = useState() + const { userData, setUserData, oriUserData } = userContext() const navigate = useNavigate() @@ -18,14 +19,25 @@ const PhotoCapture = () => { const capture = React.useCallback(() => { const imageSrc = webcamRef.current.getScreenshot() - setPhoto(imageSrc) + setUserData({ ...userData, photo: imageSrc }) }) + console.log(oriUserData.photo) + + const handleSubmit = () => { + console.log(userData.photo) + if (userData.photo) { + navigate('/enrollment/documents') + } + } + + console.log(userData?.photo) + return ( <>
- {photo === '' ? ( + {userData?.photo === '' ? ( { }} /> ) : ( - + )}
@@ -65,7 +77,7 @@ const PhotoCapture = () => { variant="contained" onClick={(e) => { e.preventDefault() - setPhoto('') + setUserData({ ...userData, photo: '' }) }} > {t('RESET')} @@ -84,7 +96,7 @@ const PhotoCapture = () => { - navigate('/enrollment/documents')} /> + handleSubmit} /> ) } diff --git a/client/src/pages/Update/Update.jsx b/client/src/pages/Update/Update.jsx index eb0aa58..63343f1 100644 --- a/client/src/pages/Update/Update.jsx +++ b/client/src/pages/Update/Update.jsx @@ -1,13 +1,14 @@ import React from 'react' -import { useNavigate } from 'react-router-dom' import Header from '../../components/Header/Header' import styles from './Update.module.css' import Input from '../../components/Input/Input' import { Grid, Button } from '@mui/material' import { userContext } from '../../context/User' +import { useNavigate } from 'react-router-dom' const Update = () => { const { aadhaarNumber, setAadhaarNumber } = userContext() + const navigate = useNavigate() return ( @@ -30,29 +31,11 @@ const Update = () => { size="large" type="submit" variant="contained" + onClick={() => { + navigate('/update/otp') + }} > - Send OTP - - - - -
-

Enter OTP

- - - - diff --git a/client/src/pages/Update/Update.module.css b/client/src/pages/Update/Update.module.css index 421dcfd..261d7aa 100644 --- a/client/src/pages/Update/Update.module.css +++ b/client/src/pages/Update/Update.module.css @@ -1,14 +1,14 @@ .subheading__container { - font-family: 'Barlow'; - display: flex; - flex-direction: column; - align-items: center; - font-weight: bolder; - margin: 20px; - padding: 20px; - } + font-family: 'Barlow'; + display: flex; + flex-direction: column; + align-items: center; + font-weight: bolder; + margin: 20px; + padding: 20px; +} .subheading { - font-size: var(--font-medium); - font-weight: 400; - } \ No newline at end of file + font-size: var(--font-medium); + font-weight: 400; +} -- cgit From d391caf122fcdf7ff4a9e227748b9a10242b15d6 Mon Sep 17 00:00:00 2001 From: rohan09-raj Date: Thu, 18 Aug 2022 19:25:08 +0530 Subject: added assets and modal --- client/public/assets/audios/document-english.mp3 | Bin 0 -> 7008 bytes client/public/assets/audios/document-hindi.mp3 | Bin 0 -> 9792 bytes .../public/assets/audios/fingerprint-english.mp3 | Bin 0 -> 8544 bytes client/public/assets/audios/fingerprint-hindi.mp3 | Bin 0 -> 13632 bytes client/public/assets/audios/iris-english.mp3 | Bin 0 -> 12672 bytes client/public/assets/audios/iris-hindi.mp3 | Bin 0 -> 13824 bytes client/public/assets/audios/photograph-english.mp3 | Bin 0 -> 14400 bytes client/public/assets/audios/photograph-hindi.mp3 | Bin 0 -> 16896 bytes client/src/components/Modal/Modal.jsx | 42 +++++++++++++++++++++ client/src/pages/Home/Home.jsx | 2 + client/src/pages/Update/Agreement/Agreement.jsx | 2 +- 11 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 client/public/assets/audios/document-english.mp3 create mode 100644 client/public/assets/audios/document-hindi.mp3 create mode 100644 client/public/assets/audios/fingerprint-english.mp3 create mode 100644 client/public/assets/audios/fingerprint-hindi.mp3 create mode 100644 client/public/assets/audios/iris-english.mp3 create mode 100644 client/public/assets/audios/iris-hindi.mp3 create mode 100644 client/public/assets/audios/photograph-english.mp3 create mode 100644 client/public/assets/audios/photograph-hindi.mp3 create mode 100644 client/src/components/Modal/Modal.jsx (limited to 'client/src/pages/Update') diff --git a/client/public/assets/audios/document-english.mp3 b/client/public/assets/audios/document-english.mp3 new file mode 100644 index 0000000..7782d06 Binary files /dev/null and b/client/public/assets/audios/document-english.mp3 differ diff --git a/client/public/assets/audios/document-hindi.mp3 b/client/public/assets/audios/document-hindi.mp3 new file mode 100644 index 0000000..74d7631 Binary files /dev/null and b/client/public/assets/audios/document-hindi.mp3 differ diff --git a/client/public/assets/audios/fingerprint-english.mp3 b/client/public/assets/audios/fingerprint-english.mp3 new file mode 100644 index 0000000..4bf56cb Binary files /dev/null and b/client/public/assets/audios/fingerprint-english.mp3 differ diff --git a/client/public/assets/audios/fingerprint-hindi.mp3 b/client/public/assets/audios/fingerprint-hindi.mp3 new file mode 100644 index 0000000..64b3c9e Binary files /dev/null and b/client/public/assets/audios/fingerprint-hindi.mp3 differ diff --git a/client/public/assets/audios/iris-english.mp3 b/client/public/assets/audios/iris-english.mp3 new file mode 100644 index 0000000..a7a9b38 Binary files /dev/null and b/client/public/assets/audios/iris-english.mp3 differ diff --git a/client/public/assets/audios/iris-hindi.mp3 b/client/public/assets/audios/iris-hindi.mp3 new file mode 100644 index 0000000..c8336b8 Binary files /dev/null and b/client/public/assets/audios/iris-hindi.mp3 differ diff --git a/client/public/assets/audios/photograph-english.mp3 b/client/public/assets/audios/photograph-english.mp3 new file mode 100644 index 0000000..a534ddf Binary files /dev/null and b/client/public/assets/audios/photograph-english.mp3 differ diff --git a/client/public/assets/audios/photograph-hindi.mp3 b/client/public/assets/audios/photograph-hindi.mp3 new file mode 100644 index 0000000..378c736 Binary files /dev/null and b/client/public/assets/audios/photograph-hindi.mp3 differ diff --git a/client/src/components/Modal/Modal.jsx b/client/src/components/Modal/Modal.jsx new file mode 100644 index 0000000..312d01e --- /dev/null +++ b/client/src/components/Modal/Modal.jsx @@ -0,0 +1,42 @@ +import React from 'react' +import { Modal, Typography, Box, Button } from '@mui/material' + +const PopUpModal = () => { + const style = { + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: 1000, + bgcolor: 'background.paper', + borderRadius: '10px', + boxShadow: 24, + p: 4 + } + const [open, setOpen] = React.useState(false) + const handleOpen = () => setOpen(true) + const handleClose = () => setOpen(false) + + return ( + <> + + + + + Text in a modal + + + Duis mollis, est non commodo luctus, nisi erat porttitor ligula. + + + + + ) +} + +export default PopUpModal diff --git a/client/src/pages/Home/Home.jsx b/client/src/pages/Home/Home.jsx index 354b2e9..4539120 100644 --- a/client/src/pages/Home/Home.jsx +++ b/client/src/pages/Home/Home.jsx @@ -4,6 +4,7 @@ import { Link } from 'react-router-dom' import Card from '../../components/Card/Card' import Header from '../../components/Header/Header' import LanguageSelect from '../../components/LanguageSelect/LanguageSelect' +import PopUpModal from '../../components/Modal/Modal' import styles from './Home.module.css' const Home = ({ page, setPage }) => { @@ -11,6 +12,7 @@ const Home = ({ page, setPage }) => { return ( <>
+
diff --git a/client/src/pages/Update/Agreement/Agreement.jsx b/client/src/pages/Update/Agreement/Agreement.jsx index 91dade7..804561b 100644 --- a/client/src/pages/Update/Agreement/Agreement.jsx +++ b/client/src/pages/Update/Agreement/Agreement.jsx @@ -13,7 +13,7 @@ import { updateUser } from '../../../services/apiservice' const Agreement = () => { const { userData } = userContext() - const updateUse = useMutation(() => updateUser(userData._id, ...userData)) + const updateUse = useMutation(() => updateUser(userData._id, { ...userData })) const { t } = useTranslation() return ( -- cgit