added useState and made input functional

6 files changed, 117 insertions, 23 deletions

diff --git a/client/src/components/Input/Input.jsx b/client/src/components/Input/Input.jsx
index ee79f3b..5987e27 100644
--- a/client/src/components/Input/Input.jsx
+++ b/client/src/components/Input/Input.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import styles from './Input.module.css'
 
-const Input = ({ label, id, value, type, name }) => {
+const Input = ({ label, id, value, type, name, onChange, placeholder }) => {
   return (
     <div className={styles.input}>
       <div className={styles.input__container}>
@@ -12,7 +12,9 @@ const Input = ({ label, id, value, type, name }) => {
           id={id}
           name={name}
           value={value}
+          onChange={onChange}
           required
+          placeholder={placeholder}
         />
       </div>
     </div>
diff --git a/client/src/components/LabelCard/LabelCard.jsx b/client/src/components/LabelCard/LabelCard.jsx
index be02f01..42ba7bf 100644
--- a/client/src/components/LabelCard/LabelCard.jsx
+++ b/client/src/components/LabelCard/LabelCard.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import styles from './LabelCard.module.css'
 
-const LabelCard = ({ id, name, value, title, image }) => {
+const LabelCard = ({ id, name, value, title, image, onChange }) => {
   return (
     <div className={styles.labelcard}>
       <label htmlFor={id} className={styles.card}>
@@ -15,6 +15,7 @@ const LabelCard = ({ id, name, value, title, image }) => {
         name={name}
         value={value}
         required
+        onChange={onChange}
       />
     </div>
   )
diff --git a/client/src/pages/Enrollment/Address/Address.jsx b/client/src/pages/Enrollment/Address/Address.jsx
index 6a32bcf..132fba1 100644
--- a/client/src/pages/Enrollment/Address/Address.jsx
+++ b/client/src/pages/Enrollment/Address/Address.jsx
@@ -1,4 +1,5 @@
-import React from 'react'
+import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import Header from '../../../components/Header/Header'
 import Input from '../../../components/Input/Input'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
@@ -6,6 +7,10 @@ import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import styles from './Address.module.css'
 
 const Address = () => {
+  const [address, setAddress] = useState('')
+
+  const navigate = useNavigate()
+
   return (
     <>
       <Header subheading="Enrollment" />
@@ -14,32 +19,73 @@ const Address = () => {
           <Input
             id="houseNo"
             label="House Number/ Apartment"
-            value="house"
+            value={address}
             type="text"
+            onChange={(e) => setAddress(e.target.value)}
+            placeholder="Enter your House Number / Apartment"
           />
           <Input
             id="locality"
             label="Area / Locality"
-            value="locality"
+            value={address}
             type="text"
+            onChange={(e) => setAddress(e.target.value)}
+            placeholder="Enter your Area / Locality"
           />
           <Input id="town" label="Village / Town" value="town" type="text" />
           <Input
             id="postOffice"
             label="Post Office"
-            value="postOffice"
+            value={address}
             type="text"
+            onChange={(e) => setAddress(e.target.value)}
+            placeholder="Enter your Village / Town"
           />
         </div>
         <div className={styles.address__container}>
-          <Input id="street" label="Street / Road" value="street" type="text" />
-          <Input id="landmark" label="Landmark" value="landmark" type="text" />
-          <Input id="district" label="District" value="district" type="text" />
-          <Input id="pincode" label="Pincode" value="pincode" type="text" />
+          <Input
+            id="street"
+            label="Street / Road"
+            value={address}
+            type="text"
+            onChange={(e) => setAddress(e.target.value)}
+            placeholder="Enter the Street / Road"
+          />
+          <Input
+            id="landmark"
+            label="Landmark"
+            value={address}
+            type="text"
+            onChange={(e) => setAddress(e.target.value)}
+            placeholder="Enter the Landmark"
+          />
+          <Input
+            id="district"
+            label="District"
+            value={address}
+            type="text"
+            onChange={(e) => setAddress(e.target.value)}
+            placeholder="Enter your District"
+          />
+          <Input
+            id="pincode"
+            label="Pincode"
+            value={address}
+            type="text"
+            onChange={(e) => setAddress(e.target.value)}
+            placeholder="Enter your area Pincode"
+          />
         </div>
       </div>
-      <Input id="state" label="State" value="state" type="text" />
-      <SubmitButton />
+      <Input
+        id="state"
+        label="State"
+        value={address}
+        type="text"
+        onChange={(e) => setAddress(e.target.value)}
+        placeholder="Enter your State"
+      />
+      <SubmitButton onClick={() => navigate('/enrollment/photo')} />
     </>
   )
 }
diff --git a/client/src/pages/Enrollment/Enrollment.jsx b/client/src/pages/Enrollment/Enrollment.jsx
index b8bbc81..98def04 100644
--- a/client/src/pages/Enrollment/Enrollment.jsx
+++ b/client/src/pages/Enrollment/Enrollment.jsx
@@ -1,14 +1,16 @@
 import React from 'react'
+import { useNavigate } from 'react-router-dom'
 import Header from '../../components/Header/Header'
 import SubmitButton from '../../components/SubmitButton/SubmitButton'
 import FormOne from './FormOne/FormOne'
 
 const Enrollment = () => {
+  const navigate = useNavigate()
   return (
     <>
       <Header subheading="Enrollment" />
       <FormOne />
-      <SubmitButton />
+      <SubmitButton onClick={() => navigate('/enrollment/form2')} />
     </>
   )
 }
diff --git a/client/src/pages/Enrollment/FormOne/FormOne.jsx b/client/src/pages/Enrollment/FormOne/FormOne.jsx
index 4ba274c..ed83a6f 100644
--- a/client/src/pages/Enrollment/FormOne/FormOne.jsx
+++ b/client/src/pages/Enrollment/FormOne/FormOne.jsx
@@ -1,9 +1,18 @@
-import React from 'react'
+import React, { useState } from 'react'
 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)
+  )
+
+  console.log(fullName, indianResident, gender, dateOfBirth)
+
   return (
     <div className={styles.formone}>
       <div className={styles.formone__radio}>
@@ -12,7 +21,8 @@ const FormOne = () => {
             type="radio"
             id="indian"
             name="resident"
-            value="Indian Resident"
+            value={indianResident}
+            onChange={() => setIndianResident(true)}
             required
           />
           <label htmlFor="indian">Indian Resident</label>
@@ -23,33 +33,45 @@ const FormOne = () => {
             id="indian"
             name="resident"
             value="Indian Resident"
+            onChange={() => setIndianResident(false)}
             required
           />
           <label htmlFor="indian">Non-Residential Indian</label>
         </span>
       </div>
 
-      <Input type="text" id="fullName" label="Full Name" value="Full Name" />
+      <Input
+        type="text"
+        id="fullName"
+        label="Full Name"
+        value={fullName}
+        onChange={(e) => setFullName(e.target.value)}
+        placeholder="Enter your full name"
+      />
 
       <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="female"
+          value={gender}
           title="Female"
+          onChange={() => setGender('female')}
           image={`${process.env.PUBLIC_URL}/assets/images/female.svg`}
         />
         <LabelCard
           id="trans"
           name="gender"
-          value="trans"
+          value={gender}
           title="Transgender"
+          onChange={() => setGender('transgender')}
           image={`${process.env.PUBLIC_URL}/assets/images/trans.svg`}
         />
       </div>
@@ -61,7 +83,8 @@ const FormOne = () => {
           type="date"
           id="dob"
           name="dob"
-          value="Date of Birth"
+          value={dateOfBirth}
+          onChange={(e) => setDateOfBirth(e.target.value)}
           required
         />
       </div>
diff --git a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
index 56bcd70..3ea8447 100644
--- a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
+++ b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
@@ -1,15 +1,35 @@
-import React from 'react'
+import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 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()
+
   return (
     <div className="formtwo">
       <Header subheading="Enrollment" />
-      <Input id="mobile" value="Mobile" label="Mobile" type="text" />
-      <Input id="email" value="Email" label="Email" type="email" />
-      <SubmitButton />
+      <Input
+        id="mobile"
+        value={mobileNumber}
+        label="Mobile"
+        type="text"
+        onChange={(e) => setMobileNumber(e.target.value)}
+        placeholder="Enter your Mobile Number"
+      />
+      <Input
+        id="email"
+        value={email}
+        label="Email"
+        type="email"
+        onChange={(e) => setEmail(e.target.value)}
+        placeholder="Enter your Email ID"
+      />
+      <SubmitButton onClick={() => navigate('/enrollment/address')} />
     </div>
   )
 }