diff options
Diffstat (limited to 'client/src/pages/Enrollment')
| -rw-r--r-- | client/src/pages/Enrollment/Address/Address.jsx | 128 | ||||
| -rw-r--r-- | client/src/pages/Enrollment/FormOne/FormOne.jsx | 189 | ||||
| -rw-r--r-- | client/src/pages/Enrollment/FormTwo/FormTwo.jsx | 52 |
3 files changed, 204 insertions, 165 deletions
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> ) } |