From 0a1a985de6e9a53896d2ba17e26d042009b3e1b4 Mon Sep 17 00:00:00 2001
From: rohan09-raj <rajrohan1914@gmail.com>
Date: Thu, 18 Aug 2022 16:12:35 +0530
Subject: Condtional update handling

---
 client/src/pages/Update/Otp/Otp.jsx        | 73 ++++++++++++++++++++++++++++++
 client/src/pages/Update/Otp/Otp.module.css | 14 ++++++
 2 files changed, 87 insertions(+)
 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/Otp')

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 <div>{t('loading')}</div>
+  }
+
+  if (isError) {
+    return <div>{t('error')}</div>
+  }
+
+  if (data) {
+    setOriUserData(data?.data)
+  }
+  return (
+    <>
+      <Header subheading="Update" />
+      <div className={styles.subheading__container}>
+        <h3 className={styles.subheading}> Enter OTP </h3>
+        <Input
+          type="text"
+          id="aadhaarNumber"
+          placeholder="Enter One Time Password"
+        />
+        <Grid container columnSpacing={10} justifyContent="center">
+          <Grid item>
+            <Button
+              color="primary"
+              size="large"
+              type="submit"
+              variant="contained"
+              onClick={() => {}}
+            >
+              Verify OTP
+            </Button>
+          </Grid>
+        </Grid>
+      </div>
+      <SubmitButton onClick={() => 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;
+}
-- 
cgit