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/pages/Enrollment/FormTwo/FormTwo.jsx | 52 +++++++++----------------
 1 file changed, 18 insertions(+), 34 deletions(-)

(limited to 'client/src/pages/Enrollment/FormTwo')

diff --git a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
index a0aebcf..91d8f6b 100644
--- a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
+++ b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
@@ -1,44 +1,23 @@
-import React, { useState, useEffect } from 'react'
-import { useNavigate } from 'react-router-dom'
+import React from 'react'
 import Input from '../../../components/Input/Input'
 import Header from '../../../components/Header/Header'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 
-const FormTwo = () => {
-  const [mobileNumber, setMobileNumber] = useState('')
-  const [email, setEmail] = useState('')
-
-  const navigate = useNavigate()
-
-  const handleSubmit = () => {
-    navigate('/enrollment/address')
-  }
-
-  useEffect(() => {
-    const eMail = document.getElementById('email')
-    function emailValidator () {
-      if (eMail.validity.patternMismatch) {
-        eMail.setCustomValidity('Email must contain @')
-      } else {
-        eMail.setCustomValidity('')
-      }
-    }
-    console.log(eMail)
-    eMail.addEventListener('input', emailValidator)
-    return () => {
-      eMail.removeEventListener('input', emailValidator)
-    }
-  }, [])
-
+const FormTwo = ({ formData, setFormData }) => {
   return (
-    <form onSubmit={() => handleSubmit()} className="formtwo">
+    <div className="formtwo">
       <Header subheading="Enrollment" />
       <Input
         id="mobile"
-        value={mobileNumber}
+        value={formData.mobile}
         label="Mobile"
         type="text"
-        onChange={(e) => setMobileNumber(e.target.value)}
+        onChange={(e) => {
+          setFormData({
+            ...formData,
+            mobile: e.target.value
+          })
+        }}
         placeholder="Enter your Mobile Number"
         pattern="[0-9]+"
         maxLength="10"
@@ -46,15 +25,20 @@ const FormTwo = () => {
       />
       <Input
         id="email"
-        value={email}
+        value={formData.email}
         label="Email"
         type="email"
-        onChange={(e) => setEmail(e.target.value)}
+        onChange={(e) => {
+          setFormData({
+            ...formData,
+            email: e.target.value
+          })
+        }}
         placeholder="Enter your Email ID"
         pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
       />
       <SubmitButton />
-    </form>
+    </div>
   )
 }
 
-- 
cgit