section2 data to main

2023-09-04 21:10:31 +05:30 · 2023-09-04 21:10:31 +05:30 · 25c213d1f7
commit 25c213d1f7
parent ab27164ed8
3 changed files with 206 additions and 100 deletions
--- 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<FormValues>({
-        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<Patient>({
+        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(
        <>
-        <form onSubmit={formik.handleSubmit}>
        <Grid container direction="row">
            <Grid item xs={8} className='collapsable-form-style-radioButtons'>
            <FormControl>
@ -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}
                 />
                 
            </Grid>
@ -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}
                />
            </Grid>
            <Grid item xs={4} className='collapsable-form-style '>
@ -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}
                />
            </Grid>

@ -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}
                 />
            </Grid>
            <Grid item xs={4} className='collapsable-form-style '>
@ -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}
                 />
            </Grid>
            <Grid item xs={4} className='collapsable-form-style '>
@ -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}
                  />
            </Grid>
            
@ -202,12 +274,16 @@ export default function FamilyFormSection(){
                   <TextField 
                   variant="outlined" 
                   label="Emergency Contact" 
-                   type="number"
                   className='collapsable-form-style'
                   name='emergencyContact'
-                   onChange={formik.handleChange}
-                   value={formik.values.emergencyContact}
-                   onBlur={formik.handleBlur}
+                   onChange={(e)=>{
+                    setPatient((prevValues:any) => ({
+                        ...prevValues,
+                        emergencyContact: e.target.value,
+                      }));
+                }}
+                   value={patient.emergencyContact}
+                //    onBlur={formik.handleBlur}
                   />
            </Grid>
            <Grid item xs={4} className='collapsable-form-style '>
@ -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}
                    />
            </Grid>
            <Grid item xs={4} className='collapsable-form-style '>
@ -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}
                     />
            </Grid>
        </Grid>
-        </form>
        </>
    )
 };
--- 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<HTMLFormElement>) => {
        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(){
                            </AccordionSummary>

                            <AccordionDetails>
-                                <FamilyFormSection/>
+                                <FamilyFormSection handleFormSection2Data={handleFormSection2Data}/>
                            </AccordionDetails>
                        </Accordion>

--- a/src/Components/PatientForm/PersonalSection1.tsx
+++ b/src/Components/PatientForm/PersonalSection1.tsx
@ -111,11 +111,6 @@ export default function PersonalSection({handleFormSection1Data}:Props){
    //     },
    //   });      
    
-
-      console.log("sdfdsfsd",patient)
-
-      
-    
    return(
        <>
        <Grid container direction="row" className='section1-test-class'>