Fixed components

1 files changed, 72 insertions, 92 deletions

diff --git a/client/src/pages/Update/Address/Address.jsx b/client/src/pages/Update/Address/Address.jsx
index 29f0f40..94e60d0 100644
--- a/client/src/pages/Update/Address/Address.jsx
+++ b/client/src/pages/Update/Address/Address.jsx
@@ -1,22 +1,17 @@
 import React from 'react'
 import Header from '../../../components/Header/Header'
-import { Country, State, City } from 'country-state-city'
+import UpdateInput from '../../../components/UpdateInput/UpdateInput'
+import { State, City } from 'country-state-city'
+import EditButton from '../../../components/EditButton/EditButton'
 import Select from 'react-select'
 
 import styles from './Address.module.css'
-import UpdateInput from '../../../components/UpdateInput/UpdateInput'
-import EditButton from '../../../components/EditButton/EditButton'
 import { useTranslation } from 'react-i18next'
+import { userContext } from '../../../context/User'
 
-const Address = ({ formData, setFormData }) => {
+const Address = () => {
+  const { userData, setUserData } = userContext()
   const { t } = useTranslation()
-  const countries = Country.getAllCountries()
-
-  const updatedCountries = countries.map((country) => ({
-    label: country.name,
-    value: country.id,
-    ...country
-  }))
 
   const updatedStates = (countryId) =>
     State.getStatesOfCountry(countryId).map((state) => ({
@@ -50,13 +45,9 @@ const Address = ({ formData, setFormData }) => {
     })
   }
 
-  const [editable, setEditable] = React.useState(true)
   const [editable1, setEditable1] = React.useState(true)
   const [editable2, setEditable2] = React.useState(true)
 
-  const handleEdit = () => {
-    setEditable(!editable)
-  }
   const handleEdit1 = () => {
     setEditable1(!editable1)
   }
@@ -64,60 +55,29 @@ const Address = ({ formData, setFormData }) => {
     setEditable2(!editable2)
   }
 
-  console.log(
-    formData.country,
-    formData.state,
-    formData.district,
-    formData.village
-  )
-
   return (
     <>
-      <Header subheading={t('UPDATE')} />
+      <Header subheading={t('ENROLLMENT')} />
       <div className={styles.address}>
         <div className={styles.address__container}>
           <div className={styles.input}>
             <div className={styles.input__container}>
-              <label htmlFor="country">{t('COUNTRY')}</label>
-              <div className={styles.input__edit}>
-                <Select
-                  id="country"
-                  name="country"
-                  label="country"
-                  options={updatedCountries}
-                  value={formData.country}
-                  isDisabled={editable}
-                  isSearchable={!editable}
-                  onChange={(e) => {
-                    setFormData({
-                      ...formData,
-                      country: e
-                    })
-                  }}
-                  styles={customStyles}
-                />
-                <EditButton
-                  onClick={handleEdit}
-                  enabled={!editable ? '1' : '0'}
-                />
-              </div>
-            </div>
-          </div>
-          <div className={styles.input}>
-            <div className={styles.input__container}>
               <label htmlFor="state">{t('STATE')}</label>
               <div className={styles.input__edit}>
                 <Select
                   id="state"
                   name="state"
-                  options={updatedStates(formData.country.isoCode)}
-                  value={formData.state}
+                  options={updatedStates('IN')}
+                  value={userData.address.state}
                   isDisabled={editable1}
                   isSearchable={!editable1}
                   onChange={(e) => {
-                    setFormData({
-                      ...formData,
-                      state: e
+                    setUserData({
+                      ...userData,
+                      address: {
+                        ...userData.address,
+                        state: e
+                      }
                     })
                   }}
                   styles={customStyles}
@@ -136,17 +96,17 @@ const Address = ({ formData, setFormData }) => {
                 <Select
                   id="city"
                   name="city"
-                  options={updatedCities(
-                    formData.country.isoCode,
-                    formData.state.isoCode
-                  )}
-                  value={formData.district}
+                  options={updatedCities('IN', userData.address.state.isoCode)}
+                  value={userData.address.district}
                   isDisabled={editable2}
                   isSearchable={!editable2}
                   onChange={(e) => {
-                    setFormData({
-                      ...formData,
-                      district: e
+                    setUserData({
+                      ...userData,
+                      address: {
+                        ...userData.address,
+                        district: e
+                      }
                     })
                   }}
                   styles={customStyles}
@@ -161,12 +121,15 @@ const Address = ({ formData, setFormData }) => {
           <UpdateInput
             id="town"
             label={t('VILLAGE_TOWN')}
-            value={formData.village}
+            value={userData.address.village}
             type="text"
             onChange={(e) => {
-              setFormData({
-                ...formData,
-                village: e.target.value
+              setUserData({
+                ...userData,
+                address: {
+                  ...userData.address,
+                  village: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_YOUR_VILLAGE_TOWN')}
@@ -176,12 +139,15 @@ const Address = ({ formData, setFormData }) => {
           <UpdateInput
             id="houseNo"
             label={t('HOUSE_NUMBER_APARTMENT')}
-            value={formData.houseNo}
+            value={userData.address.houseNo}
             type="text"
             onChange={(e) => {
-              setFormData({
-                ...formData,
-                houseNo: e.target.value
+              setUserData({
+                ...userData,
+                address: {
+                  ...userData.address,
+                  houseNo: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_YOUR_HOUSE_NUMBER_APARTMENT')}
@@ -189,12 +155,15 @@ const Address = ({ formData, setFormData }) => {
           <UpdateInput
             id="street"
             label={t('STREET_ROAD')}
-            value={formData.street}
+            value={userData.address.street}
             type="text"
             onChange={(e) => {
-              setFormData({
-                ...formData,
-                street: e.target.value
+              setUserData({
+                ...userData,
+                address: {
+                  ...userData.address,
+                  street: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_YOUR_STREET_ROAD')}
@@ -202,12 +171,15 @@ const Address = ({ formData, setFormData }) => {
           <UpdateInput
             id="locality"
             label={t('AREA_LOCALITY')}
-            value={formData.locality}
+            value={userData.address.locality}
             type="text"
             onChange={(e) => {
-              setFormData({
-                ...formData,
-                locality: e.target.value
+              setUserData({
+                ...userData,
+                address: {
+                  ...userData.address,
+                  locality: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_YOUR_AREA_LOCALITY')}
@@ -215,12 +187,15 @@ const Address = ({ formData, setFormData }) => {
           <UpdateInput
             id="postOffice"
             label={t('POST_OFFICE')}
-            value={formData.postOffice}
+            value={userData.address.postOffice}
             type="text"
             onChange={(e) => {
-              setFormData({
-                ...formData,
-                postOffice: e.target.value
+              setUserData({
+                ...userData,
+                address: {
+                  ...userData.address,
+                  postOffice: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_YOUR_AREA_POST_OFFICE')}
@@ -230,12 +205,15 @@ const Address = ({ formData, setFormData }) => {
           <UpdateInput
             id="landmark"
             label={t('LANDMARK')}
-            value={formData.landmark}
+            value={userData.address.landmark}
             type="text"
             onChange={(e) => {
-              setFormData({
-                ...formData,
-                landmark: e.target.value
+              setUserData({
+                ...userData,
+                address: {
+                  ...userData.address,
+                  landmark: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_ANY_NEAREST_LANDMARK')}
@@ -243,16 +221,18 @@ const Address = ({ formData, setFormData }) => {
           <UpdateInput
             id="pincode"
             label={t('PINCODE')}
-            value={formData.pincode}
+            value={userData.address.pincode}
             type="text"
             onChange={(e) => {
-              setFormData({
-                ...formData,
-                pincode: e.target.value
+              setUserData({
+                ...userData,
+                address: {
+                  ...userData.address,
+                  pincode: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_YOUR_AREA_PINCODE')}
-            pattern="[0-9]+"
           />
         </div>
       </div>