From 25c213d1f783dfca4ea55b39066a9d19295a07df Mon Sep 17 00:00:00 2001 From: sonika <> Date: Mon, 4 Sep 2023 21:10:31 +0530 Subject: [PATCH] section2 data to main --- .../PatientForm/FamilyFormSection2.tsx | 235 ++++++++++++------ src/Components/PatientForm/PatientForm.tsx | 64 +++-- .../PatientForm/PersonalSection1.tsx | 7 +- 3 files changed, 206 insertions(+), 100 deletions(-) diff --git a/src/Components/PatientForm/FamilyFormSection2.tsx b/src/Components/PatientForm/FamilyFormSection2.tsx index 8804bfe..4af0152 100644 --- a/src/Components/PatientForm/FamilyFormSection2.tsx +++ b/src/Components/PatientForm/FamilyFormSection2.tsx @@ -2,27 +2,26 @@ import { Button, Checkbox, FormControl, FormControlLabel, FormGroup, FormLabel, import { useFormik } from "formik"; import * as yup from "yup"; import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers'; +import React, { useEffect } from 'react'; -interface FormValues { - maritalStatus: string; - numberOfChildren: string; - ages: string; - occupation: string; - hoursPerWeek: number | string; - employer: string; - businessPhone: string; - spouseName: string; - spouseEmployer: string; - spouseBusinessPhone: string; - emergencyContact: string; - relationship: string; - spousePhone: string; +interface Patient { + maritalStatus: string | undefined, + numberOfChildren: string | undefined, + occupation: string | undefined, + hoursPerWeek: number | string | undefined, + employer: string | undefined, + businessPhone: string | undefined, + spouseName: string | undefined, + spouseEmployer: string | undefined, + spouseBusinessPhone: string | undefined, + emergencyContact: string | undefined, + relationship: string | undefined, + spousePhone: string | undefined, } const validationSchema = yup.object({ maritalStatus:yup.string().required("Marital Status is required"), numberOfChildren:yup.string().required("Full name is required"), - ages:yup.string().required("Full name is required"), occupation:yup.string().required("Occupation is required"), // hoursPerWeek: yup.number().required('Required'), // employer:yup.string().required("Full name is required"), @@ -35,31 +34,59 @@ const validationSchema = yup.object({ spousePhone:yup.string().matches(/^\d{10}$/, "Cell phone must be 10 digits"), }); -export default function FamilyFormSection(){ - const formik = useFormik({ - initialValues:{ - maritalStatus:'', - numberOfChildren:'', - ages:'', - occupation:'', - hoursPerWeek:'', - employer:'', - businessPhone:'', - spouseName:'', - spouseEmployer:'', - spouseBusinessPhone:'', - emergencyContact:'', - relationship:'', - spousePhone:'' - }, - validationSchema, - onSubmit:(values)=>{ - console.log(values); - } - }) +type Props = { + handleFormSection2Data:( + maritalStatus: string | undefined, + numberOfChildren: string | undefined, + occupation: string | undefined, + hoursPerWeek: number | string | undefined, + employer: string | undefined, + businessPhone: string | undefined, + spouseName: string | undefined, + spouseEmployer: string | undefined, + spouseBusinessPhone: string | undefined, + emergencyContact: string | undefined, + relationship: string | undefined, + spousePhone: string | undefined, + )=> void + } + + +export default function FamilyFormSection({handleFormSection2Data}:Props){ + const [patient, setPatient] = React.useState({ + maritalStatus:'', + numberOfChildren:'', + occupation:'', + hoursPerWeek:'', + employer:'', + businessPhone:'', + spouseName:'', + spouseEmployer:'', + spouseBusinessPhone:'', + emergencyContact:'', + relationship:'', + spousePhone:'' + }); + + useEffect(()=>{ + handleFormSection2Data( + patient.maritalStatus, + patient.numberOfChildren, + patient.occupation, + patient.hoursPerWeek, + patient.employer, + patient.businessPhone, + patient.spouseName, + patient.spouseEmployer, + patient.spouseBusinessPhone, + patient.emergencyContact, + patient.relationship, + patient.spousePhone, + ) + },[patient]) + return( <> -
@@ -68,9 +95,14 @@ export default function FamilyFormSection(){ aria-labelledby="demo-radio-buttons-group-label" defaultValue="married" name="maritalStatus" - onChange={formik.handleChange} - value={formik.values.maritalStatus} + value={patient.maritalStatus} sx={{display:'flex', flexDirection:'row'}} + onChange={(e)=>{ + setPatient((prevValues:any) => ({ + ...prevValues, + maritalStatus: e.target.value, + })); + }} // error={formik.touched.numberOfChildren && Boolean(formik.errors.maritalStatus)} // helperText={formik.touched.numberOfChildren && formik.errors.maritalStatus} > @@ -93,9 +125,14 @@ export default function FamilyFormSection(){ label="Number of Children/Ages" className='collapsable-form-style' name='numberOfChildren' - onChange={formik.handleChange} - value={formik.values.numberOfChildren} - onBlur={formik.handleBlur} + onChange={(e)=>{ + setPatient((prevValues:any) => ({ + ...prevValues, + numberOfChildren: e.target.value, + })); + }} + value={patient.numberOfChildren} + // onBlur={formik.handleBlur} // error={formik.touched.numberOfChildren && Boolean(formik.errors.numberOfChildren)} // helperText={formik.touched.numberOfChildren && formik.errors.numberOfChildren} /> @@ -107,9 +144,14 @@ export default function FamilyFormSection(){ label="Occupation" className='collapsable-form-style' name='occupation' - onChange={formik.handleChange} - value={formik.values.occupation} - onBlur={formik.handleBlur} + onChange={(e)=>{ + setPatient((prevValues:any) => ({ + ...prevValues, + occupation: e.target.value, + })); + }} + value={patient.occupation} + // onBlur={formik.handleBlur} // error={formik.touched.occupation && Boolean(formik.errors.occupation)} // helperText={formik.touched.occupation && formik.errors.occupation} /> @@ -122,9 +164,14 @@ export default function FamilyFormSection(){ type="number" className='collapsable-form-style' name='hoursPerWeek' - onChange={formik.handleChange} - value={formik.values.hoursPerWeek} - onBlur={formik.handleBlur} + onChange={(e)=>{ + setPatient((prevValues:any) => ({ + ...prevValues, + hoursPerWeek: e.target.value, + })); + }} + value={patient.hoursPerWeek} + // onBlur={formik.handleBlur} /> @@ -134,9 +181,14 @@ export default function FamilyFormSection(){ label="Employer" className='collapsable-form-style' name='employer' - onChange={formik.handleChange} - value={formik.values.employer} - onBlur={formik.handleBlur} + onChange={(e)=>{ + setPatient((prevValues:any) => ({ + ...prevValues, + employer: e.target.value, + })); + }} + value={patient.employer} + // onBlur={formik.handleBlur} /> @@ -146,9 +198,14 @@ export default function FamilyFormSection(){ type="number" className='collapsable-form-style' name='businessPhone' - onChange={formik.handleChange} - value={formik.values.businessPhone} - onBlur={formik.handleBlur} + onChange={(e)=>{ + setPatient((prevValues:any) => ({ + ...prevValues, + businessPhone: e.target.value, + })); + }} + value={patient.businessPhone} + // onBlur={formik.handleBlur} /> @@ -164,9 +221,14 @@ export default function FamilyFormSection(){ label="Spouse's Name" className='collapsable-form-style' name='spouseName' - onChange={formik.handleChange} - value={formik.values.spouseName} - onBlur={formik.handleBlur} + onChange={(e)=>{ + setPatient((prevValues:any) => ({ + ...prevValues, + spouseName: e.target.value, + })); + }} + value={patient.spouseName} + // onBlur={formik.handleBlur} /> @@ -175,9 +237,14 @@ export default function FamilyFormSection(){ label="Spouse's Employer" className='collapsable-form-style' name='spouseEmployer' - onChange={formik.handleChange} - value={formik.values.spouseEmployer} - onBlur={formik.handleBlur} + onChange={(e)=>{ + setPatient((prevValues:any) => ({ + ...prevValues, + spouseEmployer: e.target.value, + })); + }} + value={patient.spouseEmployer} + // onBlur={formik.handleBlur} /> @@ -187,9 +254,14 @@ export default function FamilyFormSection(){ type="number" className='collapsable-form-style' name='spouseBusinessPhone' - onChange={formik.handleChange} - value={formik.values.spouseBusinessPhone} - onBlur={formik.handleBlur} + onChange={(e)=>{ + setPatient((prevValues:any) => ({ + ...prevValues, + spouseBusinessPhone: e.target.value, + })); + }} + value={patient.spouseBusinessPhone} + // onBlur={formik.handleBlur} /> @@ -202,12 +274,16 @@ export default function FamilyFormSection(){ { + setPatient((prevValues:any) => ({ + ...prevValues, + emergencyContact: e.target.value, + })); + }} + value={patient.emergencyContact} + // onBlur={formik.handleBlur} /> @@ -216,9 +292,14 @@ export default function FamilyFormSection(){ label="Relationship" className='collapsable-form-style' name='relationship' - onChange={formik.handleChange} - value={formik.values.relationship} - onBlur={formik.handleBlur} + onChange={(e)=>{ + setPatient((prevValues:any) => ({ + ...prevValues, + relationship: e.target.value, + })); + }} + value={patient.relationship} + // onBlur={formik.handleBlur} /> @@ -228,13 +309,17 @@ export default function FamilyFormSection(){ label="Phone" className='collapsable-form-style' name='spousePhone' - onChange={formik.handleChange} - value={formik.values.spousePhone} - onBlur={formik.handleBlur} + onChange={(e)=>{ + setPatient((prevValues:any) => ({ + ...prevValues, + spousePhone: e.target.value, + })); + }} + value={patient.spousePhone} + // onBlur={formik.handleBlur} /> - ) }; diff --git a/src/Components/PatientForm/PatientForm.tsx b/src/Components/PatientForm/PatientForm.tsx index 64b5875..750e471 100644 --- a/src/Components/PatientForm/PatientForm.tsx +++ b/src/Components/PatientForm/PatientForm.tsx @@ -94,25 +94,51 @@ export default function PatientForm(){ zipCode?: string|undefined, gender?: string|undefined, ) =>{ - setSection1Data({fullName,homePhone,cellPhone,email,age,dateOfBirth,socialSecurityNumber,mailingAddress,city,state,zipCode,gender,}) + setSection1Data({ + fullName, + homePhone, + cellPhone, + email, + age, + dateOfBirth, + socialSecurityNumber, + mailingAddress, + city, + state, + zipCode, + gender, + }) } - // const handleFormSection2Data = ( - // fullName?: string|undefined, - // homePhone?: string|undefined, - // cellPhone?: string|undefined, - // email?: string|undefined, - // age?: number|undefined|string, - // dateOfBirth?: string|undefined, - // socialSecurityNumber?: string|undefined, - // mailingAddress?: string|undefined, - // city?: string|undefined, - // state?: string|undefined, - // zipCode?: string|undefined, - // gender?: string|undefined, - // ) =>{ - // setSection2Data({fullName,homePhone,cellPhone,email,age,dateOfBirth,socialSecurityNumber,mailingAddress,city,state,zipCode,gender,}) - // } + const handleFormSection2Data = ( + maritalStatus: string | undefined, + numberOfChildren: string | undefined, + occupation: string | undefined, + hoursPerWeek: number | string | undefined, + employer: string | undefined, + businessPhone: string | undefined, + spouseName: string | undefined, + spouseEmployer: string | undefined, + spouseBusinessPhone: string | undefined, + emergencyContact: string | undefined, + relationship: string | undefined, + spousePhone: string | undefined, + ) =>{ + setSection2Data({ + maritalStatus, + numberOfChildren, + occupation, + hoursPerWeek, + employer, + businessPhone, + spouseName, + spouseEmployer, + spouseBusinessPhone, + emergencyContact, + relationship, + spousePhone, + }) + } const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); @@ -127,7 +153,7 @@ export default function PatientForm(){ setIsChecked(event.target.checked); }; - console.log(section1Data,"wyeytweevfde") + console.log(section1Data,"wyeytweevfde",section2Data) return( @@ -162,7 +188,7 @@ export default function PatientForm(){ - + diff --git a/src/Components/PatientForm/PersonalSection1.tsx b/src/Components/PatientForm/PersonalSection1.tsx index 37a7360..6ba3eb9 100644 --- a/src/Components/PatientForm/PersonalSection1.tsx +++ b/src/Components/PatientForm/PersonalSection1.tsx @@ -109,12 +109,7 @@ export default function PersonalSection({handleFormSection1Data}:Props){ // // Do something with the patient data // console.log(values,"sdfdsfsd34"); // }, - // }); - - - console.log("sdfdsfsd",patient) - - + // }); return( <>