From 3e7f5cbd876b29c92fc1cda58aa54a9c591ef026 Mon Sep 17 00:00:00 2001 From: rohan09-raj Date: Wed, 17 Aug 2022 16:37:42 +0530 Subject: lol --- .../src/pages/Update/Demographic/Demographic.jsx | 48 ++++++++++++++++++++-- 1 file changed, 45 insertions(+), 3 deletions(-) (limited to 'client/src/pages/Update/Demographic') diff --git a/client/src/pages/Update/Demographic/Demographic.jsx b/client/src/pages/Update/Demographic/Demographic.jsx index 27a162a..5be3e3b 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 { 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,43 @@ import { } from '../../../components/RegEx/RegEx' import UpdateSelect from '../UpdateSelect/UpdateSelect' import { useTranslation } from 'react-i18next' +import { userContext } from '../../../context/User' const Demographic = () => { const { t } = useTranslation() + const { aadhaarNumber, userData, setUserData } = userContext() + const [page, setPage] = useState(0) + const isLongEnough = aadhaarNumber?.toString().length > 11 + + const { data } = useQuery( + ['user', aadhaarNumber], + () => getUserByAadhaar(aadhaarNumber), + { + enabled: isLongEnough, + retry: 1, + onSuccess: () => { + while (!data?.data?.name) { + console.log(formData.name) + console.log('success') + setUserData(data?.data) + console.log(data?.data) + console.log(userData?.name) + console.log(data?.data?.name) + setFormData({ + ...formData, + name: userData?.name + }) + } + } + } + ) + const [formData, setFormData] = useState({ name: '', gender: '', - dob: new Date().toISOString().slice(0, 10), + dob: '', mobile: '', email: '', country: '', @@ -31,10 +61,22 @@ const Demographic = () => { locality: '', postOffice: '', landmark: '', - pincode: '', - address: '' + pincode: '' + // address: userData?.address }) + 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) { -- cgit From a6489c671275fc9bf21ec6bdd7db4cb47da86f2c Mon Sep 17 00:00:00 2001 From: Blaster4385 Date: Tue, 16 Aug 2022 16:35:00 +0530 Subject: Mega random super bullshit --- client/public/assets/images/background.png | Bin 0 -> 93110 bytes client/public/assets/images/next_icon.svg | 1 + client/src/components/Header/Header.jsx | 4 +--- client/src/components/Header/Header.module.css | 5 ----- client/src/components/RadioSelect/RadioSelect.jsx | 0 .../src/components/RadioSelect/RadioSelect.module.css | 0 client/src/components/RegEx/RegEx.jsx | 11 ----------- client/src/components/SubmitButton/SubmitButton.jsx | 2 +- client/src/constants/RegEx.js | 11 +++++++++++ client/src/index.css | 5 +++++ client/src/pages/Enrollment/Address/Address.jsx | 1 - client/src/pages/Enrollment/Enrollment.jsx | 2 +- client/src/pages/Enrollment/FormOne/FormOne.jsx | 1 - client/src/pages/Enrollment/FormTwo/FormTwo.jsx | 4 ---- client/src/pages/Update/Demographic/Demographic.jsx | 2 +- 15 files changed, 21 insertions(+), 28 deletions(-) create mode 100644 client/public/assets/images/background.png create mode 100644 client/public/assets/images/next_icon.svg delete mode 100644 client/src/components/RadioSelect/RadioSelect.jsx delete mode 100644 client/src/components/RadioSelect/RadioSelect.module.css delete mode 100644 client/src/components/RegEx/RegEx.jsx create mode 100644 client/src/constants/RegEx.js (limited to 'client/src/pages/Update/Demographic') diff --git a/client/public/assets/images/background.png b/client/public/assets/images/background.png new file mode 100644 index 0000000..acf96a3 Binary files /dev/null and b/client/public/assets/images/background.png differ diff --git a/client/public/assets/images/next_icon.svg b/client/public/assets/images/next_icon.svg new file mode 100644 index 0000000..4e5714a --- /dev/null +++ b/client/public/assets/images/next_icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/components/Header/Header.jsx b/client/src/components/Header/Header.jsx index 1116312..d5e08c4 100644 --- a/client/src/components/Header/Header.jsx +++ b/client/src/components/Header/Header.jsx @@ -1,12 +1,10 @@ import React from 'react' -import { useTranslation } from 'react-i18next' import styles from './Header.module.css' const Header = ({ subheading }) => { - const { t } = useTranslation() return (
-

{t('AADHAAR')}

+

{subheading}

) diff --git a/client/src/components/Header/Header.module.css b/client/src/components/Header/Header.module.css index 8e6084f..2214f1b 100644 --- a/client/src/components/Header/Header.module.css +++ b/client/src/components/Header/Header.module.css @@ -9,11 +9,6 @@ padding: 20px; } -.header__heading { - font-size: var(--font-large); - font-weight: 400; -} - .header__subheading { font-size: var(--font-medium); font-weight: 400; diff --git a/client/src/components/RadioSelect/RadioSelect.jsx b/client/src/components/RadioSelect/RadioSelect.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/client/src/components/RadioSelect/RadioSelect.module.css b/client/src/components/RadioSelect/RadioSelect.module.css deleted file mode 100644 index e69de29..0000000 diff --git a/client/src/components/RegEx/RegEx.jsx b/client/src/components/RegEx/RegEx.jsx deleted file mode 100644 index fca28f1..0000000 --- a/client/src/components/RegEx/RegEx.jsx +++ /dev/null @@ -1,11 +0,0 @@ -export const validString = /^[a-zA-Z]+$/ - -export const validMobileNumber = /^[0-9]{10}$/ - -export const validAadhaar = /^[0-9]{12}$/ - -export const validNumber = /^[0-9]+$/ - -export const validPincode = /^[0-9]{6}$/ - -export const validEmail = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/ diff --git a/client/src/components/SubmitButton/SubmitButton.jsx b/client/src/components/SubmitButton/SubmitButton.jsx index 6098f3c..bcf3543 100644 --- a/client/src/components/SubmitButton/SubmitButton.jsx +++ b/client/src/components/SubmitButton/SubmitButton.jsx @@ -7,7 +7,7 @@ const SubmitButton = ({ onClick, onChange }) => { diff --git a/client/src/constants/RegEx.js b/client/src/constants/RegEx.js new file mode 100644 index 0000000..fca28f1 --- /dev/null +++ b/client/src/constants/RegEx.js @@ -0,0 +1,11 @@ +export const validString = /^[a-zA-Z]+$/ + +export const validMobileNumber = /^[0-9]{10}$/ + +export const validAadhaar = /^[0-9]{12}$/ + +export const validNumber = /^[0-9]+$/ + +export const validPincode = /^[0-9]{6}$/ + +export const validEmail = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/ diff --git a/client/src/index.css b/client/src/index.css index 89ba707..27bb2c9 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -12,6 +12,11 @@ body { -moz-osx-font-smoothing: grayscale; height: 100%; width: 100%; + background: url('../public/assets/images/background.png') no-repeat center center fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; } code { diff --git a/client/src/pages/Enrollment/Address/Address.jsx b/client/src/pages/Enrollment/Address/Address.jsx index 571d7ad..b6c3809 100644 --- a/client/src/pages/Enrollment/Address/Address.jsx +++ b/client/src/pages/Enrollment/Address/Address.jsx @@ -206,7 +206,6 @@ const Address = ({ formData, setFormData }) => { }) }} placeholder={t('ENTER_YOUR_AREA_PINCODE')} - pattern="[0-9]+" /> diff --git a/client/src/pages/Enrollment/Enrollment.jsx b/client/src/pages/Enrollment/Enrollment.jsx index 76461d2..d4b0a2a 100644 --- a/client/src/pages/Enrollment/Enrollment.jsx +++ b/client/src/pages/Enrollment/Enrollment.jsx @@ -16,7 +16,7 @@ import { validMobileNumber, validPincode, validString -} from '../../components/RegEx/RegEx' +} from '../../constants/RegEx' import { createUser } from '../../services/apiservice' import { useTranslation } from 'react-i18next' diff --git a/client/src/pages/Enrollment/FormOne/FormOne.jsx b/client/src/pages/Enrollment/FormOne/FormOne.jsx index dd336d8..c59621d 100644 --- a/client/src/pages/Enrollment/FormOne/FormOne.jsx +++ b/client/src/pages/Enrollment/FormOne/FormOne.jsx @@ -59,7 +59,6 @@ const FormOne = ({ formData, setFormData }) => { }) }} placeholder={t('ENTER_YOUR_FULL_NAME')} - pattern="[a-zA-z]+" />
diff --git a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx index 6bc6223..205b3d9 100644 --- a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx +++ b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx @@ -21,9 +21,6 @@ const FormTwo = ({ formData, setFormData }) => { }) }} placeholder={t('ENTER_YOUR_MOBILE_NUMBER')} - pattern="[0-9]+" - maxLength="10" - minLength="10" /> { }) }} placeholder={t('ENTER_YOUR_EMAIL_ID')} - pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />
diff --git a/client/src/pages/Update/Demographic/Demographic.jsx b/client/src/pages/Update/Demographic/Demographic.jsx index 5be3e3b..6640cd3 100644 --- a/client/src/pages/Update/Demographic/Demographic.jsx +++ b/client/src/pages/Update/Demographic/Demographic.jsx @@ -10,7 +10,7 @@ import { validMobileNumber, validPincode, validString -} from '../../../components/RegEx/RegEx' +} from '../../../constants/RegEx' import UpdateSelect from '../UpdateSelect/UpdateSelect' import { useTranslation } from 'react-i18next' import { userContext } from '../../../context/User' -- cgit From 045bcc1af6579e1a6023f199fbb6e9ca725bd497 Mon Sep 17 00:00:00 2001 From: Blaster4385 Date: Wed, 17 Aug 2022 09:27:12 +0530 Subject: Replace alerts with toasts and fix header image size --- client/package.json | 1 + client/src/components/Header/Header.jsx | 2 +- client/src/components/Header/Header.module.css | 5 +++ client/src/pages/Enrollment/Enrollment.jsx | 41 ++++++++++++---------- .../src/pages/Update/Demographic/Demographic.jsx | 39 ++++++++++---------- 5 files changed, 50 insertions(+), 38 deletions(-) (limited to 'client/src/pages/Update/Demographic') diff --git a/client/package.json b/client/package.json index 9769511..3a75fec 100644 --- a/client/package.json +++ b/client/package.json @@ -25,6 +25,7 @@ "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", "react-select": "^5.4.0", + "react-toastify": "^9.0.8", "react-webcam": "^7.0.1", "web-vitals": "^2.1.4" }, 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 (
- +

{subheading}

) 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/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 ( <> + {conditionalComponent()} {conditionalButton()} diff --git a/client/src/pages/Update/Demographic/Demographic.jsx b/client/src/pages/Update/Demographic/Demographic.jsx index 6640cd3..8853678 100644 --- a/client/src/pages/Update/Demographic/Demographic.jsx +++ b/client/src/pages/Update/Demographic/Demographic.jsx @@ -14,6 +14,8 @@ import { 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() @@ -80,45 +82,45 @@ const Demographic = () => { 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, @@ -158,6 +160,7 @@ const Demographic = () => { } return ( <> + {conditionalComponent()} {conditionalButton()} -- cgit From 1af97096f8b7c71967279694c3f5271061d633ad Mon Sep 17 00:00:00 2001 From: Blaster4385 Date: Wed, 17 Aug 2022 17:03:22 +0530 Subject: Fix this shit --- .../src/pages/Update/Demographic/Demographic.jsx | 55 ++++++++++++---------- 1 file changed, 31 insertions(+), 24 deletions(-) (limited to 'client/src/pages/Update/Demographic') diff --git a/client/src/pages/Update/Demographic/Demographic.jsx b/client/src/pages/Update/Demographic/Demographic.jsx index 8853678..6ce06a1 100644 --- a/client/src/pages/Update/Demographic/Demographic.jsx +++ b/client/src/pages/Update/Demographic/Demographic.jsx @@ -1,4 +1,4 @@ -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' @@ -25,29 +25,6 @@ const Demographic = () => { const isLongEnough = aadhaarNumber?.toString().length > 11 - const { data } = useQuery( - ['user', aadhaarNumber], - () => getUserByAadhaar(aadhaarNumber), - { - enabled: isLongEnough, - retry: 1, - onSuccess: () => { - while (!data?.data?.name) { - console.log(formData.name) - console.log('success') - setUserData(data?.data) - console.log(data?.data) - console.log(userData?.name) - console.log(data?.data?.name) - setFormData({ - ...formData, - name: userData?.name - }) - } - } - } - ) - const [formData, setFormData] = useState({ name: '', gender: '', @@ -67,6 +44,36 @@ const Demographic = () => { // 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
{t('loading')}
+ } + + if (isError) { + return
{t('error')}
+ } + + if (data) { + setUserData(data?.data) + } + const address = userData?.address console.log(address) -- cgit