From 30a7a079b16e1d17e8cc920d2fb3338f79767432 Mon Sep 17 00:00:00 2001
From: Blaster4385 <venkateshchaturvedi12@gmail.com>
Date: Fri, 12 Aug 2022 08:44:33 +0530
Subject: Add form validators and country api

---
 client/src/pages/Enrollment/Address/Address.jsx    | 158 ++++++++++++++++-----
 .../pages/Enrollment/Address/Address.module.css    |  20 +++
 client/src/pages/Enrollment/FormOne/FormOne.jsx    |   1 +
 client/src/pages/Enrollment/FormTwo/FormTwo.jsx    |  32 ++++-
 4 files changed, 171 insertions(+), 40 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 713c8d9..4acd0e6 100644
--- a/client/src/pages/Enrollment/Address/Address.jsx
+++ b/client/src/pages/Enrollment/Address/Address.jsx
@@ -3,91 +3,177 @@ import { useNavigate } from 'react-router-dom'
 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 countries = Country.getAllCountries()
+
+  const updatedCountries = countries.map((country) => ({
+    label: country.name,
+    value: country.id,
+    ...country
+  }))
+
+  const updatedStates = (countryId) =>
+  State
+      .getStatesOfCountry(countryId)
+      .map((state) => ({ label: state.name, value: state.id, ...state }))
+  const updatedCities = (countryID, stateId) =>
+    City
+      .getCitiesOfState(countryID, stateId)
+      .map((city) => ({ label: city.name, value: city.id, ...city }))
+
+      const customStyles = {
+        control: (base, state) => ({
+          ...base,
+          width: '330px',
+          height: '60px',
+          margin: '10px 0px',
+          // padding: '20px 10px',
+          border: '3px solid',
+          borderRadius: '10px !important'
+        }),
+        input: (base, state) => ({
+          ...base,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          padding: '0px',
+          margin: '0px'
+        })
+      }
+
   return (
     <>
       <Header subheading="Enrollment" />
       <form onSubmit={() => handleSubmit()} className={styles.address}>
         <div className={styles.address__container}>
+      <div className={styles.input}>
+      <div className={styles.input__container}>
+      <label htmlFor='country'>Country</label>
+        <Select
+          id="country"
+          name="country"
+          label="country"
+          options={updatedCountries}
+          value={country}
+          onChange={setCountry}
+          styles={customStyles}
+        />
+      </div>
+    </div>
+    <div className={styles.input}>
+      <div className={styles.input__container}>
+      <label htmlFor='state'>State</label>
+      <Select
+          id="state"
+          name="state"
+          options={updatedStates(country.isoCode)}
+          value={state}
+          onChange={setState}
+          styles={customStyles}
+        />
+      </div>
+    </div>
+    <div className={styles.input}>
+      <div className={styles.input__container}>
+      <label htmlFor='city'>District</label>
+      <Select
+          id="city"
+          name="city"
+          options={updatedCities(country.isoCode, state.isoCode)}
+          value={city}
+          onChange={setCity}
+          styles={customStyles}
+        />
+      </div>
+    </div>
+    <Input
+      id="town"
+      label="Village / Town"
+      value={town}
+      type="text"
+      onChange={(e) => setTown(e.target.value)}
+      placeholder="Enter your Village / Town"
+      />
+            </div>
+            <div className={styles.address__container}>
           <Input
             id="houseNo"
             label="House Number/ Apartment"
-            value={address}
+            value={houseNo}
             type="text"
-            onChange={(e) => setAddress(e.target.value)}
+            onChange={(e) => setHouseNo(e.target.value)}
             placeholder="Enter your House Number / Apartment"
           />
+          <Input
+            id="street"
+            label="Street / Road"
+            value={street}
+            type="text"
+            onChange={(e) => setStreet(e.target.value)}
+            placeholder="Enter the Street / Road"
+          />
           <Input
             id="locality"
             label="Area / Locality"
-            value={address}
+            value={locality}
             type="text"
-            onChange={(e) => setAddress(e.target.value)}
+            onChange={(e) => setLocality(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={address}
+            value={postOffice}
             type="text"
-            onChange={(e) => setAddress(e.target.value)}
+            onChange={(e) => setPostOffice(e.target.value)}
             placeholder="Enter your Village / Town"
           />
-        </div>
+          </div>
         <div className={styles.address__container}>
-          <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}
+            value={landmark}
             type="text"
-            onChange={(e) => setAddress(e.target.value)}
+            onChange={(e) => setLandmark(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}
+            value={pincode}
             type="text"
-            onChange={(e) => setAddress(e.target.value)}
+            onChange={(e) => setPincode(e.target.value)}
             placeholder="Enter your area Pincode"
+            pattern="[0-9]+"
           />
         </div>
-        <Input
-          id="state"
-          label="State"
-          value={address}
-          type="text"
-          onChange={(e) => setAddress(e.target.value)}
-          placeholder="Enter your State"
-        />
         <SubmitButton />
       </form>
     </>
diff --git a/client/src/pages/Enrollment/Address/Address.module.css b/client/src/pages/Enrollment/Address/Address.module.css
index 60958ba..26ca909 100644
--- a/client/src/pages/Enrollment/Address/Address.module.css
+++ b/client/src/pages/Enrollment/Address/Address.module.css
@@ -6,3 +6,23 @@
 .address__container {
   margin: 0px 20px;
 }
+
+.input {
+  display: flex;
+  justify-content: center;
+  font-family: 'Barlow';
+  font-size: var(--font-medium-s);
+}
+
+.input__container {
+  display: flex;
+  flex-direction: column;
+}
+
+.input__field {
+  width: 300px;
+  margin: 10px 0px;
+  padding: 20px 10px;
+  border: 3px solid;
+  border-radius: 10px;
+}
diff --git a/client/src/pages/Enrollment/FormOne/FormOne.jsx b/client/src/pages/Enrollment/FormOne/FormOne.jsx
index ed83a6f..e9bff62 100644
--- a/client/src/pages/Enrollment/FormOne/FormOne.jsx
+++ b/client/src/pages/Enrollment/FormOne/FormOne.jsx
@@ -47,6 +47,7 @@ const FormOne = () => {
         value={fullName}
         onChange={(e) => setFullName(e.target.value)}
         placeholder="Enter your full name"
+        pattern="[a-zA-z]+"
       />
 
       <div className={styles.formone__gender}>
diff --git a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
index 3ea8447..a0aebcf 100644
--- a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
+++ b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import Input from '../../../components/Input/Input'
 import Header from '../../../components/Header/Header'
@@ -10,8 +10,28 @@ const FormTwo = () => {
 
   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)
+    }
+  }, [])
+
   return (
-    <div className="formtwo">
+    <form onSubmit={() => handleSubmit()} className="formtwo">
       <Header subheading="Enrollment" />
       <Input
         id="mobile"
@@ -20,6 +40,9 @@ const FormTwo = () => {
         type="text"
         onChange={(e) => setMobileNumber(e.target.value)}
         placeholder="Enter your Mobile Number"
+        pattern="[0-9]+"
+        maxLength="10"
+        minLength="10"
       />
       <Input
         id="email"
@@ -28,9 +51,10 @@ const FormTwo = () => {
         type="email"
         onChange={(e) => setEmail(e.target.value)}
         placeholder="Enter your Email ID"
+        pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
       />
-      <SubmitButton onClick={() => navigate('/enrollment/address')} />
-    </div>
+      <SubmitButton />
+    </form>
   )
 }
 
-- 
cgit