From ab27164ed8f1f54a99ecfc3b44bf98acd525e960 Mon Sep 17 00:00:00 2001 From: sonika <> Date: Mon, 4 Sep 2023 20:35:18 +0530 Subject: [PATCH] section 1 data to the main page --- src/Components/PatientForm/PatientForm.tsx | 59 +++-- .../PatientForm/PersonalSection1.tsx | 250 ++++++++++++------ 2 files changed, 207 insertions(+), 102 deletions(-) diff --git a/src/Components/PatientForm/PatientForm.tsx b/src/Components/PatientForm/PatientForm.tsx index e258f90..64b5875 100644 --- a/src/Components/PatientForm/PatientForm.tsx +++ b/src/Components/PatientForm/PatientForm.tsx @@ -33,7 +33,6 @@ interface Patient { state: string; zipCode: string; gender: string; - maritalStatus: string; } const Accordion = styled((props: AccordionProps) => ( @@ -72,26 +71,48 @@ interface Patient { borderTop: '1px solid rgba(0, 0, 0, .125)', })); + + export default function PatientForm(){ const [expanded, setExpanded] = React.useState('panel1'); const [isChecked, setIsChecked] = React.useState(false); const [signature,setSignature]=React.useState(''); - - const [patient, setPatient] = React.useState({ - fullName: "", - homePhone: "", - cellPhone: "", - email: "", - age: 0, - dateOfBirth: "", - socialSecurityNumber: "", - mailingAddress: "", - city: "", - state: "", - zipCode: "", - gender: "", - maritalStatus: "", - }); + const [section1Data, setSection1Data] = React.useState({}); + const [section2Data, setSection2Data] = React.useState({}); + + const handleFormSection1Data = ( + 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, + ) =>{ + 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 handleSubmit = (event: React.FormEvent) => { event.preventDefault(); @@ -105,6 +126,8 @@ export default function PatientForm(){ const handleCheckboxChange = (event:any) => { setIsChecked(event.target.checked); }; + + console.log(section1Data,"wyeytweevfde") return( @@ -128,7 +151,7 @@ export default function PatientForm(){ - + diff --git a/src/Components/PatientForm/PersonalSection1.tsx b/src/Components/PatientForm/PersonalSection1.tsx index 595aeca..37a7360 100644 --- a/src/Components/PatientForm/PersonalSection1.tsx +++ b/src/Components/PatientForm/PersonalSection1.tsx @@ -4,6 +4,7 @@ import { useFormik } from "formik"; import * as yup from "yup"; import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { useEffect } from 'react'; interface Patient { fullName: string; @@ -18,7 +19,6 @@ interface Patient { state: string; zipCode: string; gender: string; - maritalStatus: string; } const validationSchema = yup.object({ @@ -35,57 +35,86 @@ interface Patient { zipCode: yup.string().matches(/^\d{6}$/, "Zip code must be 6 digits").required("Zip code is required") }); -export default function PersonalSection(){ + type Props = { + handleFormSection1Data:( + 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, + )=> void + } + + +export default function PersonalSection({handleFormSection1Data}:Props){ const [startDateValue, setStartDateValue] = React.useState(); - const [emailValue, setEmailValue]= React.useState(''); const [patient, setPatient] = React.useState({ fullName: "", homePhone: "", cellPhone: "", email: "", age: 0, - dateOfBirth: "", + dateOfBirth: startDateValue, socialSecurityNumber: "", mailingAddress:"", city: "", state: "", zipCode: "", gender: "male", - maritalStatus: "", }); - const formik = useFormik({ - initialValues: { - fullName: "", - homePhone: "", - cellPhone: "", - email: "", - age: "", - dateOfBirth: "", - socialSecurityNumber: "", - mailingAddress:"", - city: "", - state: "", - zipCode: "", - gender: "male", - maritalStatus: "", - }, - validationSchema, - onSubmit: (values) => { - // Do something with the patient data - console.log(values); - }, - }); - - const handleChange = (event: React.ChangeEvent) => { - console.log("dsfsdfsdf",event.target.value) - const { name, value } = event.target; - setPatient((prevPatient) => ({ - ...prevPatient, - [name]: value, - })); - }; + + useEffect(()=>{ + handleFormSection1Data( + patient.fullName, + patient.homePhone, + patient.cellPhone, + patient.email, + patient.age, + startDateValue, + patient.socialSecurityNumber, + patient.mailingAddress, + patient.city, + patient.state, + patient.zipCode, + patient.gender, + ) + },[patient]) + + // const formik = useFormik({ + // initialValues: { + // fullName: "", + // homePhone: "", + // cellPhone: "", + // email: "", + // age: "", + // dateOfBirth: "", + // socialSecurityNumber: "", + // mailingAddress: "", + // city: "", + // state: "", + // zipCode: "", + // gender: "male", + // }, + // validationSchema, + // onSubmit: (values) => { + // // Do something with the patient data + // console.log(values,"sdfdsfsd34"); + // }, + // }); + + + console.log("sdfdsfsd",patient) + + return( <> @@ -96,11 +125,16 @@ export default function PersonalSection(){ label="Patient's Full Name" name="fullName" placeholder='Please enter your name' - value={formik.values.fullName} - onChange={formik.handleChange} - onBlur={formik.handleBlur} - error={formik.touched.fullName && Boolean(formik.errors.fullName)} - helperText={formik.touched.fullName && formik.errors.fullName} + value={patient.fullName} + onChange={(e)=>{ + setPatient((prevValues) => ({ + ...prevValues, + fullName: e.target.value, + })); + }} + // onBlur={formik.handleBlur} + // error={formik.touched.fullName && Boolean(formik.errors.fullName)} + // helperText={formik.touched.fullName && formik.errors.fullName} required /> @@ -112,11 +146,16 @@ export default function PersonalSection(){ label="Phone Number" name="cellPhone" placeholder='Please enter your cell Phone number' - value={formik.values.cellPhone} - onChange={formik.handleChange} - onBlur={formik.handleBlur} - error={formik.touched.cellPhone && Boolean(formik.errors.cellPhone)} - helperText={formik.touched.cellPhone && formik.errors.cellPhone} + value={patient.cellPhone} + onChange={(e)=>{ + setPatient((prevValues) => ({ + ...prevValues, + cellPhone: e.target.value, + })); + }} + // onBlur={formik.handleBlur} + // error={formik.touched.cellPhone && Boolean(formik.errors.cellPhone)} + // helperText={formik.touched.cellPhone && formik.errors.cellPhone} /> @@ -126,11 +165,16 @@ export default function PersonalSection(){ label="Home Phone Number" name="homePhone" placeholder='Please enter your home phone' - value={formik.values.homePhone} - onChange={formik.handleChange} - onBlur={formik.handleBlur} - error={formik.touched.homePhone && Boolean(formik.errors.homePhone)} - helperText={formik.touched.homePhone && formik.errors.homePhone} + value={patient.homePhone} + onChange={(e)=>{ + setPatient((prevValues) => ({ + ...prevValues, + homePhone: e.target.value, + })); + }} + // onBlur={formik.handleBlur} + // error={formik.touched.homePhone && Boolean(formik.errors.homePhone)} + // helperText={formik.touched.homePhone && formik.errors.homePhone} /> @@ -140,11 +184,14 @@ export default function PersonalSection(){ label="Email" name="email" placeholder='Please enter your email' - value={emailValue} + value={patient.email} onChange={(e)=>{ - setEmailValue(e.target.value) + setPatient((prevValues) => ({ + ...prevValues, + email: e.target.value, + })); }} - onBlur={formik.handleBlur} + // onBlur={formik.handleBlur} // error={formik.touched.email && Boolean(formik.errors.email)} // helperText={formik.touched.email && formik.errors.email} /> @@ -157,11 +204,16 @@ export default function PersonalSection(){ name="age" type="number" placeholder='Please enter your age' - value={formik.values.age} - onChange={formik.handleChange} - onBlur={formik.handleBlur} - error={formik.touched.age && Boolean(formik.errors.age)} - helperText={formik.touched.age && formik.errors.age} + value={patient.age} + onChange={(e)=>{ + setPatient((prevValues) => ({ + ...prevValues, + age: e.target.value, + })); + }} + // onBlur={formik.handleBlur} + // error={formik.touched.age && Boolean(formik.errors.age)} + // helperText={formik.touched.age && formik.errors.age} /> @@ -185,11 +237,16 @@ export default function PersonalSection(){ variant="outlined" label="Social Security Number" name="socialSecurityNumber" - value={formik.values.socialSecurityNumber} - onChange={formik.handleChange} - onBlur={formik.handleBlur} - error={formik.touched.socialSecurityNumber && Boolean(formik.errors.socialSecurityNumber)} - helperText={formik.touched.socialSecurityNumber && formik.errors.socialSecurityNumber} + value={patient.socialSecurityNumber} + onChange={(e)=>{ + setPatient((prevValues) => ({ + ...prevValues, + socialSecurityNumber: e.target.value, + })); + }} + // onBlur={formik.handleBlur} + // error={formik.touched.socialSecurityNumber && Boolean(formik.errors.socialSecurityNumber)} + // helperText={formik.touched.socialSecurityNumber && formik.errors.socialSecurityNumber} /> @@ -199,11 +256,16 @@ export default function PersonalSection(){ variant="outlined" label="Mailing Address" name="mailingAddress" - value={formik.values.mailingAddress} - onChange={formik.handleChange} - onBlur={formik.handleBlur} - error={formik.touched.mailingAddress && Boolean(formik.errors.mailingAddress)} - helperText={formik.touched.mailingAddress && formik.errors.mailingAddress} + value={patient.mailingAddress} + onChange={(e)=>{ + setPatient((prevValues) => ({ + ...prevValues, + mailingAddress: e.target.value, + })); + }} + // onBlur={formik.handleBlur} + // error={formik.touched.mailingAddress && Boolean(formik.errors.mailingAddress)} + // helperText={formik.touched.mailingAddress && formik.errors.mailingAddress} /> @@ -212,9 +274,14 @@ export default function PersonalSection(){ variant="outlined" label="State" name="state" - value={formik.values.state} - onChange={formik.handleChange} - onBlur={formik.handleBlur} + value={patient.state} + onChange={(e)=>{ + setPatient((prevValues) => ({ + ...prevValues, + state: e.target.value, + })); + }} + // onBlur={formik.handleBlur} // error={formik.touched.state && Boolean(formik.errors.state)} // helperText={formik.touched.state && formik.errors.state} /> @@ -226,11 +293,16 @@ export default function PersonalSection(){ variant="outlined" label="City" name="city" - value={formik.values.city} - onChange={formik.handleChange} - onBlur={formik.handleBlur} - error={formik.touched.city && Boolean(formik.errors.city)} - helperText={formik.touched.city && formik.errors.city} + value={patient.city} + onChange={(e)=>{ + setPatient((prevValues) => ({ + ...prevValues, + city: e.target.value, + })); + }} + // onBlur={formik.handleBlur} + // error={formik.touched.city && Boolean(formik.errors.city)} + // helperText={formik.touched.city && formik.errors.city} /> @@ -239,11 +311,16 @@ export default function PersonalSection(){ variant="outlined" label="Zip Code" name="zipCode" - value={formik.values.zipCode} - onChange={formik.handleChange} - onBlur={formik.handleBlur} - error={formik.touched.zipCode && Boolean(formik.errors.zipCode)} - helperText={formik.touched.zipCode && formik.errors.zipCode} + value={patient.zipCode} + onChange={(e)=>{ + setPatient((prevValues) => ({ + ...prevValues, + zipCode: e.target.value, + })); + }} + // onBlur={formik.handleBlur} + // error={formik.touched.zipCode && Boolean(formik.errors.zipCode)} + // helperText={formik.touched.zipCode && formik.errors.zipCode} /> @@ -252,9 +329,14 @@ export default function PersonalSection(){ Gender { + setPatient((prevValues) => ({ + ...prevValues, + gender: e.target.value, + })); + }} sx={{display:'flex', flexDirection:'row'}} > } label="Male" />