diff options
author | Rohan Raj Gupta <78433013+rohan09-raj@users.noreply.github.com> | 2022-08-17 17:58:38 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-08-17 17:58:38 +0530 |
commit | fba27fbc54a39820fdf3cded36dbf0e40e882a42 (patch) | |
tree | b377e7b9c3e2e8507bed3f4a0c4f85a553d45b0b | |
parent | 90324f212b14b98096d10dfee8ea64eb0ef4bab6 (diff) | |
parent | 7a4411027293842b84c186ec737721572698c7d0 (diff) |
Merge pull request #6 from Blaster4385/develop
Fix this shit
-rw-r--r-- | client/package.json | 10 | ||||
-rw-r--r-- | client/src/components/Header/Header.jsx | 2 | ||||
-rw-r--r-- | client/src/components/Header/Header.module.css | 5 | ||||
-rw-r--r-- | client/src/components/LanguageSelect/locales/hi/translation.json | 75 | ||||
-rw-r--r-- | client/src/context/User.js | 28 | ||||
-rw-r--r-- | client/src/index.js | 5 | ||||
-rw-r--r-- | client/src/pages/Enrollment/Enrollment.jsx | 41 | ||||
-rw-r--r-- | client/src/pages/Update/Demographic/Demographic.jsx | 96 | ||||
-rw-r--r-- | client/src/pages/Update/Update.jsx | 15 |
9 files changed, 213 insertions, 64 deletions
diff --git a/client/package.json b/client/package.json index 9769511..61c54c5 100644 --- a/client/package.json +++ b/client/package.json @@ -7,26 +7,20 @@ "@emotion/styled": "^11.9.3", "@mui/icons-material": "^5.8.4", "@mui/material": "^5.9.1", - "@testing-library/jest-dom": "^5.16.4", - "@testing-library/react": "^13.3.0", - "@testing-library/user-event": "^13.5.0", "axios": "^0.27.2", "country-state-city": "^3.0.1", "i18next": "^21.9.0", "i18next-browser-languagedetector": "^6.1.5", - "i18next-http-backend": "^1.4.1", "i18next-xhr-backend": "^3.2.2", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-form-with-constraints": "^0.19.1", - "react-hook-form": "^7.34.0", "react-i18next": "^11.18.4", "react-query": "^3.39.2", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", "react-select": "^5.4.0", - "react-webcam": "^7.0.1", - "web-vitals": "^2.1.4" + "react-toastify": "^9.0.8", + "react-webcam": "^7.0.1" }, "scripts": { "start": "react-scripts start", diff --git a/client/src/components/Header/Header.jsx b/client/src/components/Header/Header.jsx index d5e08c4..a6e8523 100644 --- a/client/src/components/Header/Header.jsx +++ b/client/src/components/Header/Header.jsx @@ -4,7 +4,7 @@ import styles from './Header.module.css' const Header = ({ subheading }) => { return ( <header className={styles.header}> - <img src={`${process.env.PUBLIC_URL}/favicon.ico`} /> + <img src={`${process.env.PUBLIC_URL}/favicon.ico`} className={styles.header__image}/> <h3 className={styles.header__subheading}>{subheading}</h3> </header> ) diff --git a/client/src/components/Header/Header.module.css b/client/src/components/Header/Header.module.css index 2214f1b..c67df95 100644 --- a/client/src/components/Header/Header.module.css +++ b/client/src/components/Header/Header.module.css @@ -13,3 +13,8 @@ font-size: var(--font-medium); font-weight: 400; } + +.header__image { + width: 150px; + height: 150px; +} diff --git a/client/src/components/LanguageSelect/locales/hi/translation.json b/client/src/components/LanguageSelect/locales/hi/translation.json index 3b0eadd..a5b3080 100644 --- a/client/src/components/LanguageSelect/locales/hi/translation.json +++ b/client/src/components/LanguageSelect/locales/hi/translation.json @@ -1,4 +1,77 @@ { + "AADHAAR": "आधार", + "MERA_AADHAAR_MERI_PEHCHAN": "मेरा आधार मेरी पहचान", "ENROLLMENT": "उपस्थिति पंजी", - "UPDATE": "अद्यतन" + "UPDATE": "अद्यतन", + "INDIAN_RESIDENT": "भारतीय निवासी", + "NON_RESIDENTIAL_INDIAN": "गैर-आवासीय भारतीय", + "FULL_NAME": "पूरा नाम", + "ENTER_YOUR_FULL_NAME": "अपना पूरा नाम भरें", + "MALE": "पुरुष", + "FEMALE": "मादा", + "OTHER": "अन्य", + "DATE_OF_BIRTH": "जन्म की तारीख", + "MOBILE": "मोबाइल", + "ENTER_YOUR_MOBILE_NUMBER": "अपना मोबाइल नंबर दर्ज करें", + "EMAIL": "ईमेल", + "ENTER_YOUR_EMAIL_ID": "अपना ईमेल आईडी दर्ज करें", + "COUNTRY": "देश", + "STATE": "राज्य", + "DISTRICT": "जिला", + "VILLAGE_TOWN": "गाँव / नगर", + "ENTER_YOUR_VILLAGE_TOWN": "अपना गांव / कस्बा दर्ज करें", + "HOUSE_NUMBER_APARTMENT": "हाउस नंबर / अपार्टमेंट", + "ENTER_YOUR_HOUSE_NUMBER_APARTMENT": "अपना घर नंबर/अपार्टमेंट दर्ज करें", + "STREET_ROAD": "सड़क / सड़क", + "ENTER_YOUR_STREET_ROAD": "अपनी गली / सड़क दर्ज करें", + "AREA_LOCALITY": "क्षेत्र / इलाका", + "ENTER_YOUR_AREA_LOCALITY": "अपना क्षेत्र / इलाका दर्ज करें", + "POST_OFFICE": "डाकघर", + "ENTER_YOUR_AREA_POST_OFFICE": "अपना क्षेत्र डाकघर दर्ज करें", + "LANDMARK": "लैंडमार्क", + "ENTER_ANY_NEAREST_LANDMARK": "कोई भी निकटतम लैंडमार्क दर्ज करें", + "PINCODE": "पिनकोड", + "ENTER_YOUR_AREA_PINCODE": "अपना क्षेत्र पिनकोड दर्ज करें", + "CAPTURE": "कैप्चर", + "RESET": "रीसेट", + "PLEASE_LOOK_INTO_THE_CAMERA": "कृपया कैमरे में देखें", + "CLICK_CAPTURE_TO_CAPTURE_THE_PHOTO": "फ़ोटो कैप्चर करने के लिए कैप्चर करें क्लिक करें", + "CLICK_RESET_TO_REMOVE_THE_CAPTURED_PHOTO": "कैप्चर की गई फ़ोटो को निकालने के लिए रीसेट करें क्लिक करें", + "PROOF_OF_IDENTITY": "पहचान का प्रमाण", + "PROOF_OF_ADDRESS": "पते का प्रमाण", + "PROOF_OF_DOB": "जन्म तिथि का प्रमाण", + "SCAN": "स्कैन", + "KINDLY_CLICK_THE_PICTURE_OF_YOUR_DOCUMENTS": "कृपया अपने दस्तावेज़ों की तस्वीर क्लिक करें", + "ALL_STEPS_COMPLETED": "सभी चरण पूरे हुए - आपका काम पूरा हो गया", + "BACK": "पीछे", + "FINISH": "फिनिश", + "NEXT": "अगला", + "PLEASE_PUT_YOUR_EYES_INSIDE_THE_IRIS_SCANNER": "कृपया अपनी आंखें आईरिस स्कैनर के अंदर रखें।.", + "WAIT_FOR_PROMPT_AND_BEEP_SOUND_TO_REMOVE_YOUR_EYES": "अपनी आंखों को हटाने के लिए संकेत और बीप ध्वनि की प्रतीक्षा करें", + "THANK_YOU_FOR_YOUR_TIME": "आपके समय के लिए धन्यवाद", + "ENSURE_THAT_RECIEVED_A_CONFIRMATION_MESSAGE": "कृपया सुनिश्चित करें कि आपको जाने से पहले एक पुष्टिकरण संदेश प्राप्त हुआ है", + "PLEASE_PUT_YOUR_FINGERS_ON_THE_FINGERPRINT_SCANNER": "कृपया अपनी उंगलियों को एक-एक करके फ़िंगरप्रिंट स्कैनर पर रखें", + "WAIT_FOR_PROMPT_AND_BEEP_SOUND_TO_REMOVE_YOUR_FINGERS": "अपनी उंगलियों को हटाने के लिए संकेत और बीप ध्वनि की प्रतीक्षा करें", + "PLEASE_VERIFY_YOUR_IDENTITY": "कृपया अपने पंजीकृत मोबाइल नंबर xxxxxxxx15 पर ओटीपी प्राप्त करके अपनी पहचान सत्यापित करें", + "SEND_OTP": "ओटीपी भेजें", + "RESEND": "फिर से भेजें", + "PLEASE_SELECT_YOUR_RESIDENCY": "कृपया अपना निवास चुनें", + "PLEASE_ENTER_VALID_EMAIL": "कृपया मान्य ईमेल दर्ज करें", + "PLEASE_SELECT_YOUR_COUNTRY": "कृपया अपना देश चुनें", + "PLEASE_SELECT_YOUR_STATE": "कृपया अपना राज्य चुनें", + "PLEASE_SELECT_YOUR_DISTRICT": "कृपया अपना जिला चुनें", + "PLEASE_ENTER_YOUR_VILLAGE": "कृपया अपने गांव में प्रवेश करें", + "PLEASE_ENTER_YOUR_HOUSE_NUMBER": "कृपया अपने घर का नंबर दर्ज करें", + "PLEASE_ENTER_YOUR_STREET": "कृपया अपनी गली में प्रवेश करें", + "PLEASE_ENTER_YOUR_LOCALITY": "कृपया अपना इलाका दर्ज करें", + "PLEASE_ENTER_YOUR_AREA_POST_OFFICE": "कृपया अपने क्षेत्र के डाकघर में प्रवेश करें", + "PLEASE_ENTER_NEAREST_LANDMARK": "कृपया निकटतम लैंडमार्क दर्ज करें", + "PLEASE_ENTER_YOUR_AREA_PINCODE": "कृपया अपने क्षेत्र का पिनकोड दर्ज करें", + "PLEASE_ENTER_VALID_PINCODE": "कृपया मान्य पिनकोड दर्ज करें", + "I_HEREBY_CONFIRM_THE_IDENTITY_AND_ADDRESS": "मैं ___________ की पहचान और पते को सत्य, सही और सटीक होने की पुष्टि करता हूं", + "PHOTOGRAPH": "फोटोग्राफ", + "FINGERPRINT_SCAN": "फिंगरप्रिंट स्कैन", + "IRIS_SCAN": "आइरिस स्कैन", + "DEMOGRAPHIC": "जनसांख्यिकीय", + "BIOMETRIC": "बायोमेट्रिक" } diff --git a/client/src/context/User.js b/client/src/context/User.js new file mode 100644 index 0000000..fce7eda --- /dev/null +++ b/client/src/context/User.js @@ -0,0 +1,28 @@ +import React, { createContext, useState, useContext } from 'react' + +export const UserContext = createContext() + +export const Context = ({ children }) => { + const [aadhaarNumber, setAadhaarNumber] = useState(null) + const [userData, setUserData] = useState({}) + + const initialUser = { + aadhaarNumber, + setAadhaarNumber, + userData, + setUserData + } + + return ( + <UserContext.Provider value={initialUser}>{children}</UserContext.Provider> + ) +} + +export const userContext = () => { + const context = useContext(UserContext) + if (!context) { + throw new Error(`userContext context can only + be used in a component wrapped with UserContext`) + } + return context +} diff --git a/client/src/index.js b/client/src/index.js index 652a231..0f8c576 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -5,6 +5,7 @@ import { QueryClient, QueryClientProvider } from 'react-query' import './index.css' import App from './App' import './i18nextInit' +import { Context } from './context/User' const queryClient = new QueryClient() @@ -13,7 +14,9 @@ root.render( <React.StrictMode> <BrowserRouter> <QueryClientProvider client={queryClient}> - <App /> + <Context> + <App /> + </Context> </QueryClientProvider> </BrowserRouter> </React.StrictMode> diff --git a/client/src/pages/Enrollment/Enrollment.jsx b/client/src/pages/Enrollment/Enrollment.jsx index d4b0a2a..18529a4 100644 --- a/client/src/pages/Enrollment/Enrollment.jsx +++ b/client/src/pages/Enrollment/Enrollment.jsx @@ -19,6 +19,8 @@ import { } from '../../constants/RegEx' import { createUser } from '../../services/apiservice' import { useTranslation } from 'react-i18next' +import { ToastContainer, toast } from 'react-toastify' +import 'react-toastify/dist/ReactToastify.css' const Enrollment = () => { const { t } = useTranslation() @@ -55,51 +57,51 @@ const Enrollment = () => { const handleSubmit = () => { if (page === 0) { if (formData.indianResident === '') { - return alert(t('PLEASE_SELECT_YOUR_RESIDENCY')) + toast.error(t('PLEASE_SELECT_YOUR_RESIDENCY')) } else if (formData.name === '' || formData.name.length < 1) { - return alert(t('PLEASE_ENTER_YOUR_NAME')) + toast.error(t('PLEASE_ENTER_YOUR_NAME')) } else if (!validString.test(formData.name)) { - return alert(t('PLEASE_ENTER_VALID_NAME')) + toast.error(t('PLEASE_ENTER_VALID_NAME')) } else if (formData.gender === '') { - return alert(t('PLEASE_SELECT_YOUR_GENDER')) + toast.error(t('PLEASE_SELECT_YOUR_GENDER')) } else { setPage(page + 1) } } else if (page === 1) { if (formData.mobile === '') { - return alert(t('PLEASE_ENTER_YOUR_MOBILE_NUMBER')) + toast.error(t('PLEASE_ENTER_YOUR_MOBILE_NUMBER')) } else if (!validMobileNumber.test(formData.mobile)) { - return alert(t('PLEASE_ENTER_VALID_MOBILE_NUMBER')) + toast.error(t('PLEASE_ENTER_VALID_MOBILE_NUMBER')) } else if (formData.email === '') { - return alert(t('PLEASE_ENTER_YOUR_EMAIL')) + toast.error(t('PLEASE_ENTER_YOUR_EMAIL')) } else if (!validEmail.test(formData.email)) { - return alert(t('PLEASE_ENTER_VALID_EMAIL')) + toast.error(t('PLEASE_ENTER_VALID_EMAIL')) } else { setPage(page + 1) } } else if (page === 2) { if (formData.country === '') { - return alert(t('PLEASE_SELECT_YOUR_COUNTRY')) + toast.error(t('PLEASE_SELECT_YOUR_COUNTRY')) } else if (formData.state === '') { - return alert(t('PLEASE_SELECT_YOUR_STATE')) + toast.error(t('PLEASE_SELECT_YOUR_STATE')) } else if (formData.district === '') { - return alert(t('PLEASE_SELECT_YOUR_DISTRICT')) + toast.error(t('PLEASE_SELECT_YOUR_DISTRICT')) } else if (formData.village === '') { - return alert(t('PLEASE_ENTER_YOUR_VILLAGE')) + toast.error(t('PLEASE_ENTER_YOUR_VILLAGE')) } else if (formData.houseNo === '') { - return alert(t('PLEASE_ENTER_YOUR_HOUSE_NUMBER')) + toast.error(t('PLEASE_ENTER_YOUR_HOUSE_NUMBER')) } else if (formData.street === '') { - return alert(t('PLEASE_ENTER_YOUR_STREET')) + toast.error(t('PLEASE_ENTER_YOUR_STREET')) } else if (formData.locality === '') { - return alert(t('PLEASE_ENTER_YOUR_LOCALITY')) + toast.error(t('PLEASE_ENTER_YOUR_LOCALITY')) } else if (formData.postOffice === '') { - return alert(t('PLEASE_ENTER_YOUR_AREA_POST_OFFICE')) + toast.error(t('PLEASE_ENTER_YOUR_AREA_POST_OFFICE')) } else if (formData.landmark === '') { - return alert(t('PLEASE_ENTER_NEAREST_LANDMARK')) + toast.error(t('PLEASE_ENTER_NEAREST_LANDMARK')) } else if (formData.pincode === '') { - return alert(t('PLEASE_ENTER_YOUR_AREA_PINCODE')) + toast.error(t('PLEASE_ENTER_YOUR_AREA_PINCODE')) } else if (!validPincode.test(formData.pincode)) { - return alert(t('PLEASE_ENTER_VALID_PINCODE')) + toast.error(t('PLEASE_ENTER_VALID_PINCODE')) } else { setFormData({ ...formData, @@ -188,6 +190,7 @@ const Enrollment = () => { } return ( <> + <ToastContainer autoClose={1000} hideProgressBar={true} theme={'colored'} /> {conditionalComponent()} {conditionalButton()} </> diff --git a/client/src/pages/Update/Demographic/Demographic.jsx b/client/src/pages/Update/Demographic/Demographic.jsx index 771ada5..6ce06a1 100644 --- a/client/src/pages/Update/Demographic/Demographic.jsx +++ b/client/src/pages/Update/Demographic/Demographic.jsx @@ -1,4 +1,6 @@ -import React, { useState } from 'react' +import React, { useEffect, 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' @@ -11,15 +13,22 @@ import { } from '../../../constants/RegEx' import UpdateSelect from '../UpdateSelect/UpdateSelect' import { useTranslation } from 'react-i18next' +import { userContext } from '../../../context/User' +import { ToastContainer, toast } from 'react-toastify' +import 'react-toastify/dist/ReactToastify.css' const Demographic = () => { const { t } = useTranslation() + const { aadhaarNumber, userData, setUserData } = userContext() + const [page, setPage] = useState(0) + const isLongEnough = aadhaarNumber?.toString().length > 11 + const [formData, setFormData] = useState({ name: '', gender: '', - dob: new Date().toISOString().slice(0, 10), + dob: '', mobile: '', email: '', country: '', @@ -31,52 +40,94 @@ const Demographic = () => { locality: '', postOffice: '', landmark: '', - pincode: '', - address: '' + pincode: '' + // address: userData?.address }) + useEffect(() => { + setFormData({ + ...formData, + ...userData + }) + }, [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 + } + } + ) + + if (isLoading) { + return <div>{t('loading')}</div> + } + + if (isError) { + return <div>{t('error')}</div> + } + + if (data) { + setUserData(data?.data) + } + + const address = userData?.address + console.log(address) + + console.log( + 'Aadhaar: ', + aadhaarNumber, + 'Islong: ', + isLongEnough, + 'User: ', + userData + ) + const handleSubmit = () => { if (page === 0) { if (formData.name === '' || formData.name.length < 1) { - return alert(t('PLEASE_ENTER_YOUR_NAME')) + toast.error(t('PLEASE_ENTER_YOUR_NAME')) } else if (!validString.test(formData.name)) { - return alert(t('PLEASE_ENTER_VALID_NAME')) + toast.error(t('PLEASE_ENTER_VALID_NAME')) } else if (formData.gender === '') { - return alert(t('PLEASE_SELECT_YOUR_GENDER')) + toast.error(t('PLEASE_SELECT_YOUR_GENDER')) } else if (formData.mobile === '') { - return alert(t('PLEASE_ENTER_YOUR_MOBILE_NUMBER')) + toast.error(t('PLEASE_ENTER_YOUR_MOBILE_NUMBER')) } else if (!validMobileNumber.test(formData.mobile)) { - return alert(t('PLEASE_ENTER_VALID_MOBILE_NUMBER')) + toast.error(t('PLEASE_ENTER_VALID_MOBILE_NUMBER')) } else if (formData.email === '') { - return alert(t('PLEASE_ENTER_YOUR_EMAIL')) + toast.error(t('PLEASE_ENTER_YOUR_EMAIL')) } else if (!validEmail.test(formData.email)) { - return alert(t('PLEASE_ENTER_VALID_EMAIL')) + toast.error(t('PLEASE_ENTER_VALID_EMAIL')) } else { setPage(page + 1) } } else if (page === 1) { if (formData.country === '') { - return alert(t('PLEASE_SELECT_YOUR_COUNTRY')) + toast.error(t('PLEASE_SELECT_YOUR_COUNTRY')) } else if (formData.state === '') { - return alert(t('PLEASE_SELECT_YOUR_STATE')) + toast.error(t('PLEASE_SELECT_YOUR_STATE')) } else if (formData.district === '') { - return alert(t('PLEASE_SELECT_YOUR_DISTRICT')) + toast.error(t('PLEASE_SELECT_YOUR_DISTRICT')) } else if (formData.village === '') { - return alert(t('PLEASE_ENTER_YOUR_VILLAGE')) + toast.error(t('PLEASE_ENTER_YOUR_VILLAGE')) } else if (formData.houseNo === '') { - return alert(t('PLEASE_ENTER_YOUR_HOUSE_NUMBER')) + toast.error(t('PLEASE_ENTER_YOUR_HOUSE_NUMBER')) } else if (formData.street === '') { - return alert(t('PLEASE_ENTER_YOUR_STREET')) + toast.error(t('PLEASE_ENTER_YOUR_STREET')) } else if (formData.locality === '') { - return alert(t('PLEASE_ENTER_YOUR_LOCALITY')) + toast.error(t('PLEASE_ENTER_YOUR_LOCALITY')) } else if (formData.postOffice === '') { - return alert(t('PLEASE_ENTER_YOUR_AREA_POST_OFFICE')) + toast.error(t('PLEASE_ENTER_YOUR_AREA_POST_OFFICE')) } else if (formData.landmark === '') { - return alert(t('PLEASE_ENTER_NEAREST_LANDMARK')) + toast.error(t('PLEASE_ENTER_NEAREST_LANDMARK')) } else if (formData.pincode === '') { - return alert(t('PLEASE_ENTER_YOUR_AREA_PINCODE')) + toast.error(t('PLEASE_ENTER_YOUR_AREA_PINCODE')) } else if (!validPincode.test(formData.pincode)) { - return alert(t('PLEASE_ENTER_VALID_PINCODE')) + toast.error(t('PLEASE_ENTER_VALID_PINCODE')) } else { setFormData({ ...formData, @@ -116,6 +167,7 @@ const Demographic = () => { } return ( <> + <ToastContainer autoClose={1000} hideProgressBar={true} theme={'colored'} /> {conditionalComponent()} {conditionalButton()} </> diff --git a/client/src/pages/Update/Update.jsx b/client/src/pages/Update/Update.jsx index afa3bbd..eb0aa58 100644 --- a/client/src/pages/Update/Update.jsx +++ b/client/src/pages/Update/Update.jsx @@ -1,24 +1,15 @@ -import React, { useState } from 'react' +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 { useQuery } from 'react-query' import { Grid, Button } from '@mui/material' -// import { getUserByAadhaar } from '../../services/apiservice' -// import { validAadhaar } from '../../components/RegEx/RegEx' +import { userContext } from '../../context/User' const Update = () => { - const [aadhaarNumber, setAadhaarNumber] = useState() + const { aadhaarNumber, setAadhaarNumber } = userContext() const navigate = useNavigate() - // console.log(aadhaarNumber) - // const user = useQuery(['user', aadhaarNumber], () => - // getUserByAadhaar(aadhaarNumber) - // ) - - // console.log(user.data.data) - return ( <> <Header subheading="Update" /> |