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/Address/Address.jsx | 128 +++++++++-------
 client/src/pages/Enrollment/FormOne/FormOne.jsx | 189 ++++++++++++++----------
 client/src/pages/Enrollment/FormTwo/FormTwo.jsx |  52 +++----
 3 files changed, 204 insertions(+), 165 deletions(-)

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

diff --git a/client/src/pages/Enrollment/Address/Address.jsx b/client/src/pages/Enrollment/Address/Address.jsx
index 4acd0e6..d4ffe81 100644
--- a/client/src/pages/Enrollment/Address/Address.jsx
+++ b/client/src/pages/Enrollment/Address/Address.jsx
@@ -1,35 +1,12 @@
-import React, { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import React from 'react'
 import Header from '../../../components/Header/Header'
 import Input from '../../../components/Input/Input'
-import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import { Country, State, City } from 'country-state-city'
 import Select from 'react-select'
 
 import styles from './Address.module.css'
 
-const Address = () => {
-  const [address, setAddress] = useState('')
-  const [houseNo, setHouseNo] = useState('')
-  const [locality, setLocality] = useState('')
-  const [postOffice, setPostOffice] = useState('')
-  const [street, setStreet] = useState('')
-  const [landmark, setLandmark] = useState('')
-  const [town, setTown] = useState('')
-  const [pincode, setPincode] = useState('')
-  const [state, setState] = useState('')
-  const [country, setCountry] = useState('')
-  const [city, setCity] = useState('')
-
-  const navigate = useNavigate()
-
-  const handleSubmit = () => {
-    navigate('/enrollment/photo')
-    const add = `${houseNo} ${locality} ${postOffice} ${street} ${landmark} ${town} ${city} ${state} ${countries} ${pincode}`
-    setAddress({ add })
-    console.log(address)
-  }
-
+const Address = ({ formData, setFormData }) => {
   const countries = Country.getAllCountries()
 
   const updatedCountries = countries.map((country) => ({
@@ -67,10 +44,12 @@ const Address = () => {
         })
       }
 
+      console.log(formData.country, formData.state, formData.district, formData.village)
+
   return (
     <>
       <Header subheading="Enrollment" />
-      <form onSubmit={() => handleSubmit()} className={styles.address}>
+      <div className={styles.address}>
         <div className={styles.address__container}>
       <div className={styles.input}>
       <div className={styles.input__container}>
@@ -80,8 +59,13 @@ const Address = () => {
           name="country"
           label="country"
           options={updatedCountries}
-          value={country}
-          onChange={setCountry}
+          value={formData.country}
+          onChange={e => {
+            setFormData({
+              ...formData,
+              country: e
+            })
+          }}
           styles={customStyles}
         />
       </div>
@@ -92,9 +76,14 @@ const Address = () => {
       <Select
           id="state"
           name="state"
-          options={updatedStates(country.isoCode)}
-          value={state}
-          onChange={setState}
+          options={updatedStates(formData.country.isoCode)}
+          value={formData.state}
+          onChange={e => {
+            setFormData({
+              ...formData,
+              state: e
+            })
+          }}
           styles={customStyles}
         />
       </div>
@@ -105,9 +94,14 @@ const Address = () => {
       <Select
           id="city"
           name="city"
-          options={updatedCities(country.isoCode, state.isoCode)}
-          value={city}
-          onChange={setCity}
+          options={updatedCities(formData.country.isoCode, formData.state.isoCode)}
+          value={formData.district}
+          onChange={e => {
+            setFormData({
+              ...formData,
+              district: e
+            })
+          }}
           styles={customStyles}
         />
       </div>
@@ -115,9 +109,14 @@ const Address = () => {
     <Input
       id="town"
       label="Village / Town"
-      value={town}
+      value={formData.village}
       type="text"
-      onChange={(e) => setTown(e.target.value)}
+      onChange={(e) => {
+        setFormData({
+          ...formData,
+          village: e.target.value
+        })
+      }}
       placeholder="Enter your Village / Town"
       />
             </div>
@@ -125,33 +124,53 @@ const Address = () => {
           <Input
             id="houseNo"
             label="House Number/ Apartment"
-            value={houseNo}
+            value={formData.houseNo}
             type="text"
-            onChange={(e) => setHouseNo(e.target.value)}
+            onChange={(e) => {
+              setFormData({
+                ...formData,
+                houseNo: e.target.value
+              })
+            }}
             placeholder="Enter your House Number / Apartment"
           />
           <Input
             id="street"
             label="Street / Road"
-            value={street}
+            value={formData.street}
             type="text"
-            onChange={(e) => setStreet(e.target.value)}
+            onChange={(e) => {
+              setFormData({
+                ...formData,
+                street: e.target.value
+              })
+            }}
             placeholder="Enter the Street / Road"
           />
           <Input
             id="locality"
             label="Area / Locality"
-            value={locality}
+            value={formData.locality}
             type="text"
-            onChange={(e) => setLocality(e.target.value)}
+            onChange={(e) => {
+              setFormData({
+                ...formData,
+                locality: e.target.value
+              })
+            }}
             placeholder="Enter your Area / Locality"
           />
           <Input
             id="postOffice"
             label="Post Office"
-            value={postOffice}
+            value={formData.postOffice}
             type="text"
-            onChange={(e) => setPostOffice(e.target.value)}
+            onChange={(e) => {
+              setFormData({
+                ...formData,
+                postOffice: e.target.value
+              })
+            }}
             placeholder="Enter your Village / Town"
           />
           </div>
@@ -159,23 +178,32 @@ const Address = () => {
           <Input
             id="landmark"
             label="Landmark"
-            value={landmark}
+            value={formData.landmark}
             type="text"
-            onChange={(e) => setLandmark(e.target.value)}
+            onChange={(e) => {
+              setFormData({
+                ...formData,
+                landmark: e.target.value
+              })
+            }}
             placeholder="Enter the Landmark"
           />
           <Input
             id="pincode"
             label="Pincode"
-            value={pincode}
+            value={formData.pincode}
             type="text"
-            onChange={(e) => setPincode(e.target.value)}
+            onChange={(e) => {
+              setFormData({
+                ...formData,
+                pincode: e.target.value
+              })
+            }}
             placeholder="Enter your area Pincode"
             pattern="[0-9]+"
           />
         </div>
-        <SubmitButton />
-      </form>
+      </div>
     </>
   )
 }
diff --git a/client/src/pages/Enrollment/FormOne/FormOne.jsx b/client/src/pages/Enrollment/FormOne/FormOne.jsx
index e9bff62..d245faf 100644
--- a/client/src/pages/Enrollment/FormOne/FormOne.jsx
+++ b/client/src/pages/Enrollment/FormOne/FormOne.jsx
@@ -1,95 +1,122 @@
-import React, { useState } from 'react'
+import React from 'react'
+import Header from '../../../components/Header/Header'
 import Input from '../../../components/Input/Input'
 import LabelCard from '../../../components/LabelCard/LabelCard'
 import styles from './FormOne.module.css'
 
-const FormOne = () => {
-  const [indianResident, setIndianResident] = useState(true)
-  const [fullName, setFullName] = useState('')
-  const [gender, setGender] = useState('')
-  const [dateOfBirth, setDateOfBirth] = useState(
-    new Date().toISOString().slice(0, 10)
-  )
+const FormOne = ({ formData, setFormData }) => {
+  console.log(formData.indianResident, formData.name, formData.dob, formData.gender)
 
-  console.log(fullName, indianResident, gender, dateOfBirth)
+  const handleSubmit = () => {
+  }
 
   return (
-    <div className={styles.formone}>
-      <div className={styles.formone__radio}>
-        <span className={styles.formone__resident}>
-          <input
-            type="radio"
-            id="indian"
-            name="resident"
-            value={indianResident}
-            onChange={() => setIndianResident(true)}
-            required
-          />
-          <label htmlFor="indian">Indian Resident</label>
-        </span>
-        <span className={styles.formone__resident}>
-          <input
-            type="radio"
-            id="indian"
-            name="resident"
-            value="Indian Resident"
-            onChange={() => setIndianResident(false)}
-            required
-          />
-          <label htmlFor="indian">Non-Residential Indian</label>
-        </span>
-      </div>
+    <><Header subheading="Enrollment" /><form onSubmit={() => handleSubmit()}>
+      <div className={styles.formone}>
+        <div className={styles.formone__radio}>
+          <span className={styles.formone__resident}>
+            <input
+              type="radio"
+              id="indian"
+              name="resident"
+              value={formData.indianResident}
+              onChange={() => {
+                setFormData({
+                  ...formData,
+                  indianResident: true
+                })
+              }}
+              required />
+            <label htmlFor="indian">Indian Resident</label>
+          </span>
+          <span className={styles.formone__resident}>
+            <input
+              type="radio"
+              id="indian"
+              name="resident"
+              value={formData.indianResident}
+              onChange={() => {
+                setFormData({
+                  ...formData,
+                  indianResident: false
+                })
+              }}
+              required />
+            <label htmlFor="indian">Non-Residential Indian</label>
+          </span>
+        </div>
 
-      <Input
-        type="text"
-        id="fullName"
-        label="Full Name"
-        value={fullName}
-        onChange={(e) => setFullName(e.target.value)}
-        placeholder="Enter your full name"
-        pattern="[a-zA-z]+"
-      />
+        <Input
+          type="text"
+          id="fullName"
+          label="Full Name"
+          value={formData.name}
+          onChange={(e) => {
+            setFormData({
+              ...formData,
+              name: e.target.value
+            })
+          }}
+          placeholder="Enter your full name"
+          pattern="[a-zA-z]+" />
 
-      <div className={styles.formone__gender}>
-        <LabelCard
-          id="male"
-          name="gender"
-          title="Male"
-          value={gender}
-          onChange={() => setGender('male')}
-          image={`${process.env.PUBLIC_URL}/assets/images/male.svg`}
-        />
-        <LabelCard
-          id="female"
-          name="gender"
-          value={gender}
-          title="Female"
-          onChange={() => setGender('female')}
-          image={`${process.env.PUBLIC_URL}/assets/images/female.svg`}
-        />
-        <LabelCard
-          id="trans"
-          name="gender"
-          value={gender}
-          title="Transgender"
-          onChange={() => setGender('transgender')}
-          image={`${process.env.PUBLIC_URL}/assets/images/trans.svg`}
-        />
-      </div>
+        <div className={styles.formone__gender}>
+          <LabelCard
+            id="male"
+            name="gender"
+            title="Male"
+            value={formData.gender}
+            onChange={() => {
+              setFormData({
+                ...formData,
+                gender: 'Male'
+              })
+            }}
+            image={`${process.env.PUBLIC_URL}/assets/images/male.svg`} />
+          <LabelCard
+            id="female"
+            name="gender"
+            value={formData.gender}
+            title="Female"
+            onChange={() => {
+              setFormData({
+                ...formData,
+                gender: 'Female'
+              })
+            }}
+            image={`${process.env.PUBLIC_URL}/assets/images/female.svg`} />
+          <LabelCard
+            id="trans"
+            name="gender"
+            value={formData.gender}
+            title="Transgender"
+            onChange={() => {
+              setFormData({
+                ...formData,
+                gender: 'Transgender'
+              })
+            }}
+            image={`${process.env.PUBLIC_URL}/assets/images/trans.svg`} />
+        </div>
 
-      <div className={styles.formone__dob}>
-        <label htmlFor="dob">Date of Birth</label>
-        <input
-          className={styles.formone__dob_input}
-          type="date"
-          id="dob"
-          name="dob"
-          value={dateOfBirth}
-          onChange={(e) => setDateOfBirth(e.target.value)}
-          required
-        />
+        <div className={styles.formone__dob}>
+          <label htmlFor="dob">Date of Birth</label>
+          <input
+            className={styles.formone__dob_input}
+            type="date"
+            id="dob"
+            name="dob"
+            value={formData.dob}
+            onChange={(e) => {
+              setFormData({
+                ...formData,
+                dob: e.target.value
+              })
+            }}
+            required />
+        </div>
       </div>
-    </div>
+    </form></>
   )
 }
 
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