diff --git a/src/Components/PatientForm/MedicalHistorySection3.tsx b/src/Components/PatientForm/MedicalHistorySection3.tsx index a9b28a2..c6897bb 100644 --- a/src/Components/PatientForm/MedicalHistorySection3.tsx +++ b/src/Components/PatientForm/MedicalHistorySection3.tsx @@ -2,19 +2,20 @@ import * as React from 'react'; import { Checkbox, FormControlLabel, TextField, FormGroup, Grid, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material'; import { useFormik } from 'formik'; import * as Yup from 'yup'; +import { useEffect } from 'react'; -interface FormValues { - physicianname: string; - physiciancity: string; - physicianstate: string; - physicianphone: string; - chiropractorName: string; - chiropractorState: string; - xray: boolean; - ctScan: boolean; - cdImages: boolean; - visitDetails: string; - cellPhoneProvider: string; +interface Patient { + physicianname: string |undefined; + physiciancity: string |undefined; + physicianstate: string |undefined; + physicianphone: string |undefined; + chiropractorName: string |undefined; + chiropractorState: string |undefined; + xray: string|undefined; + haveChiropractor: string|undefined; + reference: string|undefined; + visitDetails: string |undefined; + cellPhoneProvider: string |undefined; } const validationSchema = Yup.object({ @@ -24,35 +25,61 @@ const validationSchema = Yup.object({ phone: Yup.string().required('Required'), chiropractorName: Yup.string().required('Required'), xray: Yup.boolean().required('Required'), - ctScan: Yup.boolean().required('Required'), - cdImages: Yup.boolean().required('Required'), + haveChiropractor: Yup.boolean().required('Required'), + reference: Yup.boolean().required('Required'), visitDetails: Yup.string().required('Required'), cellPhoneProvider: Yup.string().required('Required'), }); -export default function MedicalHistoryForm(){ - const formik = useFormik({ - initialValues:{ - physicianname: '', - physiciancity: '', - physicianstate: '', - physicianphone: '', - chiropractorName: '', - chiropractorState: '', - xray: false, - ctScan: false, - cdImages: false, - visitDetails: '', - cellPhoneProvider: '', - }, - validationSchema, - onSubmit:(values)=>{ - console.log(values); - } - }) +type Props = { + handleFormSection3Data:( + physicianname?: string |undefined, + physiciancity?: string |undefined, + physicianstate?: string |undefined, + physicianphone?: string |undefined, + chiropractorName?: string |undefined, + chiropractorState?: string |undefined, + xray?: string|undefined, + haveChiropractor?: string|undefined, + reference?: string|undefined, + visitDetails?: string |undefined, + cellPhoneProvider?: string |undefined, + )=> void + } + +export default function MedicalHistoryForm({handleFormSection3Data}:Props){ + + const [patient, setPatient] = React.useState({ + physicianname: '', + physiciancity: '', + physicianstate: '', + physicianphone: '', + chiropractorName: '', + chiropractorState: '', + xray: '', + haveChiropractor: '', + reference: '', + visitDetails: '', + cellPhoneProvider: '', + }); + + useEffect(()=>{ + handleFormSection3Data( + patient.physicianname, + patient.physiciancity, + patient.physicianstate, + patient.physicianphone, + patient.chiropractorName, + patient.chiropractorState, + patient.xray, + patient.haveChiropractor, + patient.reference, + patient.visitDetails, + patient.cellPhoneProvider, + ) + },[patient]) return( <> -
Physician Hisory Information: @@ -63,9 +90,14 @@ export default function MedicalHistoryForm(){ variant="outlined" label="Family physician" name='physicianname' - onChange={formik.handleChange} - value={formik.values.physicianname} - onBlur={formik.handleBlur} + onChange={(e)=>{ + setPatient((prevValues) => ({ + ...prevValues, + physicianname: e.target.value, + })); + }} + value={patient.physicianname} + // onBlur={formik.handleBlur} /> @@ -73,9 +105,14 @@ export default function MedicalHistoryForm(){ variant="outlined" label="City" name='physiciancity' - onChange={formik.handleChange} - value={formik.values.physiciancity} - onBlur={formik.handleBlur} + onChange={(e)=>{ + setPatient((prevValues) => ({ + ...prevValues, + physiciancity: e.target.value, + })); + }} + value={patient.physiciancity} + // onBlur={formik.handleBlur} /> @@ -83,9 +120,14 @@ export default function MedicalHistoryForm(){ variant="outlined" label="State" name='physicianstate' - onChange={formik.handleChange} - value={formik.values.physicianstate} - onBlur={formik.handleBlur} + onChange={(e)=>{ + setPatient((prevValues) => ({ + ...prevValues, + physicianstate: e.target.value, + })); + }} + value={patient.physicianstate} + // onBlur={formik.handleBlur} /> @@ -94,9 +136,14 @@ export default function MedicalHistoryForm(){ label="Phone" type="number" name='physicianphone' - onChange={formik.handleChange} - value={formik.values.physicianphone} - onBlur={formik.handleBlur} + onChange={(e)=>{ + setPatient((prevValues) => ({ + ...prevValues, + physicianphone: e.target.value, + })); + }} + value={patient.physicianphone} + // onBlur={formik.handleBlur} /> @@ -115,7 +162,12 @@ export default function MedicalHistoryForm(){ aria-labelledby="demo-radio-buttons-group-label" // defaultValue="yes" name="radio-buttons-group" - onChange={formik.handleChange} + onChange={(e)=>{ + setPatient((prevValues) => ({ + ...prevValues, + haveChiropractor: e.target.value, + })); + }} sx={{display:'flex', flexDirection:'row'}} > } label="Yes" /> @@ -129,9 +181,14 @@ export default function MedicalHistoryForm(){ variant="outlined" label="Chiropractor's Name" name='chiropractorName' - onChange={formik.handleChange} - value={formik.values.chiropractorName} - onBlur={formik.handleBlur} + onChange={(e)=>{ + setPatient((prevValues) => ({ + ...prevValues, + chiropractorName: e.target.value, + })); + }} + value={patient.chiropractorName} + // onBlur={formik.handleBlur} /> @@ -140,9 +197,14 @@ export default function MedicalHistoryForm(){ variant="outlined" label="City/State" name='chiropractorState' - onChange={formik.handleChange} - value={formik.values.chiropractorState} - onBlur={formik.handleBlur} + onChange={(e)=>{ + setPatient((prevValues) => ({ + ...prevValues, + chiropractorState: e.target.value, + })); + }} + value={patient.chiropractorState} + // onBlur={formik.handleBlur} /> @@ -155,7 +217,12 @@ export default function MedicalHistoryForm(){ aria-labelledby="demo-radio-buttons-group-label" // defaultValue="yes" name="radio-buttons-group" - onChange={formik.handleChange} + onChange={(e)=>{ + setPatient((prevValues) => ({ + ...prevValues, + xray: e.target.value, + })); + }} sx={{display:'flex', flexDirection:'row'}} > } label="Yes" /> @@ -172,7 +239,12 @@ export default function MedicalHistoryForm(){ aria-labelledby="demo-radio-buttons-group-label" // defaultValue="physician" name="radio-buttons-group" - onChange={formik.handleChange} + onChange={(e)=>{ + setPatient((prevValues) => ({ + ...prevValues, + reference: e.target.value, + })); + }} sx={{display:'flex', flexDirection:'row'}} > } label="Friend" /> @@ -193,7 +265,12 @@ export default function MedicalHistoryForm(){ aria-labelledby="demo-radio-buttons-group-label" // defaultValue="email" name="radio-buttons-group" - onChange={formik.handleChange} + onChange={(e)=>{ + setPatient((prevValues) => ({ + ...prevValues, + cellPhoneProvider: e.target.value, + })); + }} sx={{display:'flex', flexDirection:'row'}} > } label="Email" /> @@ -201,7 +278,6 @@ export default function MedicalHistoryForm(){ - )} \ No newline at end of file diff --git a/src/Components/PatientForm/PatientForm.tsx b/src/Components/PatientForm/PatientForm.tsx index 750e471..982a2a0 100644 --- a/src/Components/PatientForm/PatientForm.tsx +++ b/src/Components/PatientForm/PatientForm.tsx @@ -79,6 +79,7 @@ export default function PatientForm(){ const [signature,setSignature]=React.useState(''); const [section1Data, setSection1Data] = React.useState({}); const [section2Data, setSection2Data] = React.useState({}); + const [section3Data, setSection3Data] = React.useState({}); const handleFormSection1Data = ( fullName?: string|undefined, @@ -139,6 +140,34 @@ export default function PatientForm(){ spousePhone, }) } + + const handleFormSection3Data = ( + physicianname: string |undefined, + physiciancity: string |undefined, + physicianstate: string |undefined, + physicianphone: string |undefined, + chiropractorName: string |undefined, + chiropractorState: string |undefined, + xray: string|undefined, + haveChiropractor: string|undefined, + reference: string|undefined, + visitDetails: string |undefined, + cellPhoneProvider: string |undefined, + ) =>{ + setSection3Data({ + physicianname, + physiciancity, + physicianstate, + physicianphone, + chiropractorName, + chiropractorState, + xray, + haveChiropractor, + reference, + visitDetails, + cellPhoneProvider, + }) + } const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); @@ -153,7 +182,7 @@ export default function PatientForm(){ setIsChecked(event.target.checked); }; - console.log(section1Data,"wyeytweevfde",section2Data) + console.log(section3Data,"wyeytweevfde",section2Data) return( @@ -198,7 +227,7 @@ export default function PatientForm(){ - +