Refactor code and switch to a multi-step form setup

1 files changed, 108 insertions, 81 deletions

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></>
   )
 }