From 87a343644592e9b425e7fa0805988ad8e7ee8778 Mon Sep 17 00:00:00 2001
From: Blaster4385 <venkateshchaturvedi12@gmail.com>
Date: Fri, 12 Aug 2022 11:23:48 +0530
Subject: Refactor code and switch to a multi-step form setup

---
 client/src/App.js | 179 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 176 insertions(+), 3 deletions(-)

(limited to 'client/src/App.js')

diff --git a/client/src/App.js b/client/src/App.js
index c39f14e..e7ab247 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,10 +1,183 @@
-import React from 'react'
-import Index from './routes'
+import React, { useState } from 'react'
+import Address from './pages/Enrollment/Address/Address'
+import Agreement from './pages/Enrollment/Agreement/Agreement'
+import DocumentScanner from './pages/Enrollment/DocumentScanner/DocumentScanner'
+import FinalSlip from './pages/Enrollment/FinalSlip/FinalSlip'
+import Fingerprint from './pages/Enrollment/Fingerprint/Fingerprint'
+import FormTwo from './pages/Enrollment/FormTwo/FormTwo'
+import IrisScan from './pages/Enrollment/IrisScan/IrisScan'
+import PhotoCapture from './pages/Enrollment/PhotoCapture/PhotoCapture'
+import SubmitButton from './components/SubmitButton/SubmitButton'
+import FormOne from './pages/Enrollment/FormOne/FormOne'
+import { validEmail, validMobileNumber, validPincode } from './components/RegEx/RegEx'
+import Home from './pages/Home/Home'
 
 const App = () => {
+  const [page, setPage] = useState(9)
+
+  const [formData, setFormData] = useState({
+    indianResident: '',
+    name: '',
+    gender: '',
+    dob: new Date().toISOString().slice(0, 10),
+    mobile: '',
+    email: '',
+    country: '',
+    state: '',
+    district: '',
+    village: '',
+    houseNo: '',
+    street: '',
+    locality: '',
+    postOffice: '',
+    landmark: '',
+    pincode: '',
+    address: ''
+  })
+
+  function handleSubmit () {
+    if (page === 0) {
+      if (formData.indianResident === '') {
+        return alert('Please select your residency')
+      } else if (formData.name === '' || formData.name.length < 1) {
+        return alert('Please enter your name')
+      } else if (formData.gender === '') {
+        return alert('Please select your gender')
+      } else {
+        setPage(page + 1)
+      }
+    } else if (page === 1) {
+      if (formData.mobile === '') {
+        return alert('Please enter your mobile number')
+      } else if (!validMobileNumber.test(formData.mobile)) {
+        return alert('Please enter valid mobile number')
+      } else if (formData.email === '') {
+        return alert('Please enter your email')
+      } else if (!validEmail.test(formData.email)) {
+        return alert('Please enter valid email')
+      } else {
+        setPage(page + 1)
+      }
+    } else if (page === 2) {
+      if (formData.country === '') {
+        return alert('Please select your country')
+      } else if (formData.state === '') {
+        return alert('Please select your state')
+      } else if (formData.district === '') {
+        return alert('Please select your district')
+      } else if (formData.village === '') {
+        return alert('Please enter your village')
+      } else if (formData.houseNo === '') {
+        return alert('Please enter your house number')
+      } else if (formData.street === '') {
+        return alert('Please enter your street')
+      } else if (formData.locality === '') {
+        return alert('Please enter your locality')
+      } else if (formData.postOffice === '') {
+        return alert('Please enter your post office')
+      } else if (formData.landmark === '') {
+        return alert('Please enter your landmark')
+      } else if (formData.pincode === '') {
+        return alert('Please enter your pincode')
+      } else if (!validPincode.test(formData.pincode)) {
+        return alert('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) {
+      setPage(page + 1)
+    } else if (page === 4) {
+      setPage(page + 1)
+    } else if (page === 5) {
+      setPage(page + 1)
+    } else if (page === 6) {
+      setPage(page + 1)
+    } else if (page === 7) {
+      setPage(page + 1)
+    } else if (page === 8) {
+      setPage(page + 1)
+    } else if (page === 9) {
+      setPage(page + 1)
+    } else setPage(page + 1)
+  }
+
+  const conditionalComponent = () => {
+    switch (page) {
+      case 0:
+        return <FormOne formData={formData} setFormData={setFormData} />
+      case 1:
+        return <FormTwo formData={formData} setFormData={setFormData} />
+      case 2:
+        return <Address formData={formData} setFormData={setFormData} />
+      case 3:
+        return <DocumentScanner formData={formData} setFormData={setFormData} />
+      case 4:
+        return <PhotoCapture formData={formData} setFormData={setFormData} />
+      case 5:
+        return <IrisScan formData={formData} setFormData={setFormData} />
+      case 6:
+        return <Fingerprint formData={formData} setFormData={setFormData} />
+      case 7:
+        return <Agreement formData={formData} setFormData={setFormData} />
+      case 8:
+        return <FinalSlip formData={formData} setFormData={setFormData} />
+      default:
+        return <Home page={page} setPage={setPage} />
+    }
+  }
+
+  const conditionalButton = () => {
+    switch (page) {
+      case 0:
+        return <SubmitButton onClick={handleSubmit}>
+            Next
+          </SubmitButton>
+      case 1:
+        return <SubmitButton onClick={handleSubmit}>
+            Next
+          </SubmitButton>
+      case 2:
+        return <SubmitButton onClick={handleSubmit}>
+            Next
+          </SubmitButton>
+      case 3:
+        return <SubmitButton onClick={handleSubmit}>
+            Next
+          </SubmitButton>
+      case 4:
+        return <SubmitButton onClick={handleSubmit}>
+            Next
+          </SubmitButton>
+      case 5:
+        return <SubmitButton onClick={handleSubmit}>
+            Next
+          </SubmitButton>
+      case 6:
+        return <SubmitButton onClick={handleSubmit}>
+            Next
+          </SubmitButton>
+      case 7:
+        return <SubmitButton onClick={handleSubmit}>
+            Submit
+          </SubmitButton>
+      case 8:
+        return <SubmitButton onClick={handleSubmit}>
+            Exit
+          </SubmitButton>
+      default:
+        return <SubmitButton onClick={handleSubmit}>
+            Next
+          </SubmitButton>
+    }
+  }
   return (
     <>
-      <Index />
+      {conditionalComponent()}
+      {conditionalButton()}
     </>
   )
 }
-- 
cgit