section4 data to main

src/Components/PatientForm/PainAnalysisSection4.tsx

@@ -2,51 +2,122 @@ 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 path from 'path';
+import { useEffect } from 'react';
 
-interface FormValues {
+interface Patient {
     chiefComplaint:string;
+    painWorse: string[];
+    painBetter: string[];
     painQuality: string[];
+    painWorstTime: string[];
+    currentComplaintIssues: string[];
     painDuration: string;
     currentTreatment: string;
-    treatmentResults: string;
     treatmentGoal: string;
+    selfTreatment:string;
   }
 
-  const validationSchema = Yup.object({
+  type Props = {
-    chiefComplaint:Yup.array().required('Required'),
+    handleFormSection4Data:(
-    painQuality: Yup.array().required('Required'),
+        chiefComplaint:string|undefined,
-    painDuration: Yup.string().required('Required'),
+        painWorse: any,
-    currentTreatment: Yup.string().required('Required'),
+        painBetter: any,
-    treatmentResults: Yup.string().required('Required'),
+        painQuality: any,
-    treatmentGoal: Yup.string().required('Required'),
+        painWorstTime: any,
-  });
+        currentComplaintIssues: any,
+        painDuration: string|undefined,
+        currentTreatment: string|undefined,
+        treatmentGoal: string|undefined,
+        selfTreatment:string|undefined,
+    )=> void
+  }
   
-export default function PainAnalysisSection4(){
+
-    const formik = useFormik<FormValues>({
+export default function PainAnalysisSection4({handleFormSection4Data}:Props){
-        initialValues:{
+    const [patient, setPatient] = React.useState<Patient>({
-            chiefComplaint:'',
+        chiefComplaint:'',
-            painQuality:[],
+        painWorse:[],
-            painDuration:'',
+        painBetter:[],
-            currentTreatment:'',
+        painQuality:[],
-            treatmentResults:'',
+        painWorstTime:[],
-            treatmentGoal:'',
+        currentComplaintIssues:[],
-        },
+        painDuration:'',
-        validationSchema,
+        currentTreatment:'',
-        onSubmit:(values)=>{
+        treatmentGoal:'',
-            console.log(values);
+        selfTreatment:'',
-        }
+      });
-    })
+
-    const handlePainQualityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      useEffect(()=>{
-        if (event.target.checked) {
+        handleFormSection4Data(
-          formik.setFieldValue('painQuality', [...formik.values.painQuality, event.target.value]);
+            patient.chiefComplaint,
-        } else {
+            patient.painWorse,
-          formik.setFieldValue('painQuality', formik.values.painQuality.filter((item) => item !== event.target.value));
+            patient.painBetter,
-        }
+            patient.painQuality,
-    };
+            patient.painWorstTime,
+            patient.currentComplaintIssues,
+            patient.painDuration,
+            patient.currentTreatment,
+            patient.treatmentGoal,
+            patient.selfTreatment,
+        )
+      },[patient])
+   
+      const handlePainWorseChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, checked } = event.target;
+        setPatient((prevValues) => ({
+          ...prevValues,
+          painWorse: checked
+            ? [...prevValues.painWorse, name]
+            : prevValues.painWorse.filter((item) => item !== name),
+        }));
+      };
+
+      const handlePainBetterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, checked } = event.target;
+        setPatient((prevValues) => ({
+          ...prevValues,
+          painBetter: checked
+            ? [...prevValues.painBetter, name]
+            : prevValues.painBetter.filter((item) => item !== name),
+        }));
+      };
+
+      const handlePainQualityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, checked } = event.target;
+        setPatient((prevValues) => ({
+          ...prevValues,
+          painQuality: checked
+            ? [...prevValues.painQuality, name]
+            : prevValues.painQuality.filter((item) => item !== name),
+        }));
+      };
+
+      const handlePainWorstTimeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, checked } = event.target;
+        setPatient((prevValues) => ({
+          ...prevValues,
+          painWorstTime: checked
+            ? [...prevValues.painWorstTime, name]
+            : prevValues.painWorstTime.filter((item) => item !== name),
+        }));
+      };
+
+      const handleCurrentComplaintIssuesTimeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, checked } = event.target;
+        setPatient((prevValues) => ({
+          ...prevValues,
+          currentComplaintIssues: checked
+            ? [...prevValues.currentComplaintIssues, name]
+            : prevValues.currentComplaintIssues.filter((item) => item !== name),
+        }));
+      };
+
+
+      console.log("dskjjfdsgvd",patient)
 
     return(
         <>
-        <form onSubmit={formik.handleSubmit}>
         <Grid item xs={12} className='collapsable-form-style '> 
             <FormLabel sx={{fontWeight:600}}>Issue Details:</FormLabel>
         </Grid>
@@ -56,9 +127,13 @@ export default function PainAnalysisSection4(){
                 variant="outlined"
                 label="How did your Chief complaint start?(ex-fell on ice)" 
                 name='chiefComplaint'
-                onChange={formik.handleChange}
+                onChange={(e)=>{
-                value={formik.values.chiefComplaint}
+                    setPatient((prevValues) => ({
-                onBlur={formik.handleBlur}
+                        ...prevValues,
+                        chiefComplaint: e.target.value,
+                      }));
+                }}
+                value={patient.chiefComplaint}
                 />
             </Grid>
 
@@ -67,29 +142,27 @@ export default function PainAnalysisSection4(){
                     <FormLabel>What makes your pain worse?</FormLabel>
                     <FormGroup sx={{display:'flex', flexDirection:'row'}}>
                         <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
+                            control={<Checkbox onChange={handlePainWorseChange} name="Bending" />}
                             label="Bending"
                         />
                         <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
+                            control={<Checkbox onChange={handlePainWorseChange} name="Standing" />}
                             label="Standing"
                         />
                         <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
+                            control={<Checkbox onChange={handlePainWorseChange} name="Sitting" />}
                             label="Sitting"
                         />
                         <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
+                            control={<Checkbox onChange={handlePainWorseChange} name="Walking" />}
                             label="Walking"
                         />
                         <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
+                            control={<Checkbox onChange={handlePainWorseChange} name="Others" />}
                             label="Others"
                         />
                     </FormGroup>
-                    {formik.touched.painQuality && formik.errors.painQuality ? (
+                   
-                        <div>{formik.errors.painQuality}</div>
-                    ) : null}
                 </FormControl>
             </Grid>
 
@@ -98,23 +171,23 @@ export default function PainAnalysisSection4(){
                     <FormLabel>What makes your pain better?</FormLabel>
                     <FormGroup sx={{display:'flex', flexDirection:'row'}}>
                         <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
+                            control={<Checkbox onChange={handlePainBetterChange} name="laying down" />}
                             label="laying down"
                         />
                         <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
+                            control={<Checkbox onChange={handlePainBetterChange} name="Standing" />}
                             label="Standing"
                         />
                         <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
+                            control={<Checkbox onChange={handlePainBetterChange} name="Sitting" />}
                             label="Sitting"
                         />
                         <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
+                            control={<Checkbox onChange={handlePainBetterChange} name="Walking" />}
                             label="Walking"
                         />
                         <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
+                            control={<Checkbox onChange={handlePainBetterChange} name="Others" />}
                             label="Others"
                         />
                     </FormGroup>
@@ -130,25 +203,22 @@ export default function PainAnalysisSection4(){
                             label="Sharp"
                         />
                         <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
+                            control={<Checkbox onChange={handlePainQualityChange} name="Dull/Ache" />}
                             label="Dull/Ache"
                         />
                         <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
+                            control={<Checkbox onChange={handlePainQualityChange} name="Throbbing" />}
                             label="Throbbing"
                         />
                         <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
+                            control={<Checkbox onChange={handlePainQualityChange} name="Tingling/Numbness/Burning" />}
                             label="Tingling/Numbness/Burning"
                         />
                         <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
+                            control={<Checkbox onChange={handlePainQualityChange} name="Others" />}
                             label="Others"
                         />
                     </FormGroup>
-                    {formik.touched.painQuality && formik.errors.painQuality ? (
-                        <div>{formik.errors.painQuality}</div>
-                    ) : null}
                 </FormControl>
             </Grid>
 
@@ -157,29 +227,26 @@ export default function PainAnalysisSection4(){
                     <FormLabel>What is the worst time for your pain?</FormLabel>
                     <FormGroup sx={{display:'flex', flexDirection:'row'}}>
                         <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
+                            control={<Checkbox onChange={handlePainWorstTimeChange} name="Morning" />}
                             label="Morning"
                         />
                         <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
+                            control={<Checkbox onChange={handlePainWorstTimeChange} name="During day" />}
                             label="During day"
                         />
                         <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
+                            control={<Checkbox onChange={handlePainWorstTimeChange} name="Evening" />}
                             label="Evening"
                         />
                         <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
+                            control={<Checkbox onChange={handlePainWorstTimeChange} name="Lying in bed" />}
                             label="Lying in bed"
                         />
                         <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
+                            control={<Checkbox onChange={handlePainWorstTimeChange} name="Others" />}
                             label="Others"
                         />
                     </FormGroup>
-                    {formik.touched.painQuality && formik.errors.painQuality ? (
-                        <div>{formik.errors.painQuality}</div>
-                    ) : null}
                 </FormControl>
             </Grid>
             
@@ -188,8 +255,13 @@ export default function PainAnalysisSection4(){
                     <FormLabel>How much of the day do you experience your chief complaint?</FormLabel>
                     <RadioGroup
                         name="painDuration"
-                        onChange={formik.handleChange}
+                        onChange={(e)=>{
-                        value={formik.values.painDuration}
+                            setPatient((prevValues) => ({
+                                ...prevValues,
+                                painDuration: e.target.value,
+                              }));
+                        }}
+                        value={patient.painDuration}
                         sx={{display:'flex', flexDirection:'row'}}
                         >
                         <FormControlLabel value="0-25%" control={<Radio />} label="0-25%" />
@@ -205,19 +277,19 @@ export default function PainAnalysisSection4(){
                     <FormLabel>Has your current complaint caused any of the following?</FormLabel>
                     <FormGroup sx={{display:'flex', flexDirection:'row'}}>
                         <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
+                            control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Muscle weakness" />}
                             label="Muscle weakness"
                         />
                         <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
+                            control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Bowel/Bladder problem" />}
                             label="Bowel/Bladder problem"
                         />
                         <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
+                            control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Digestion" />}
                             label="Digestion"
                         />
                         <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
+                            control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Cardiac/Respiratory" />}
                             label="Cardiac/Respiratory"
                         />
                        
@@ -230,16 +302,18 @@ export default function PainAnalysisSection4(){
                     <FormLabel>Have you tried any self treatment (ex-ice, heat, excercise) or taken any medication(over the counter or prescription)?</FormLabel>
                     <RadioGroup
                         name="painDuration"
-                        onChange={formik.handleChange}
+                        onChange={(e)=>{
-                        value={formik.values.painDuration}
+                            setPatient((prevValues) => ({
+                                ...prevValues,
+                                selfTreatment: e.target.value,
+                              }));
+                        }}
+                        value={patient.selfTreatment}
                         sx={{display:'flex', flexDirection:'row'}}
                         >
                         <FormControlLabel value="yes" control={<Radio />} label="Yes" />
                         <FormControlLabel value="no" control={<Radio />} label="No" />
                     </RadioGroup>
-                    {formik.touched.painDuration && formik.errors.painDuration ? (
-                        <div>{formik.errors.painDuration}</div>
-                    ) : null}
                 </FormControl>
             </Grid>
 
@@ -252,14 +326,17 @@ export default function PainAnalysisSection4(){
                 variant="outlined"
                 label="What is your goal from treatment?(ex-play golf without pain)" 
                 name='treatmentGoal'
-                onChange={formik.handleChange}
+                onChange={(e)=>{
-                value={formik.values.treatmentGoal}
+                    setPatient((prevValues) => ({
-                onBlur={formik.handleBlur}
+                        ...prevValues,
+                        treatmentGoal: e.target.value,
+                      }));
+                }}
+                value={patient.treatmentGoal}
                 />
             </Grid>
           
         </Grid>
-        </form>
 
         </>
     )}

src/Components/PatientForm/PatientForm.tsx

@@ -80,6 +80,7 @@ export default function PatientForm(){
     const [section1Data, setSection1Data] = React.useState<any>({});
     const [section2Data, setSection2Data] = React.useState<any>({});
     const [section3Data, setSection3Data] = React.useState<any>({});
+    const [section4Data, setSection4Data] = React.useState<any>({});
 
     const handleFormSection1Data = (
       fullName?: string|undefined,
@@ -169,6 +170,32 @@ export default function PatientForm(){
       })
     }
 
+    const handleFormSection4Data = (
+        chiefComplaint:string|undefined,
+        painWorse: any,
+        painBetter: any,
+        painQuality: any,
+        painWorstTime: any,
+        currentComplaintIssues: any,
+        painDuration: string|undefined,
+        currentTreatment: string|undefined,
+        treatmentGoal: string|undefined,
+        selfTreatment:string|undefined,
+    ) =>{
+      setSection4Data({
+        chiefComplaint,
+        painWorse,
+        painBetter,
+        painQuality,
+        painWorstTime,
+        currentComplaintIssues, 
+        painDuration,
+        currentTreatment,
+        treatmentGoal,
+        selfTreatment,
+      })
+    }
+    
       const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
       };
@@ -182,7 +209,7 @@ export default function PatientForm(){
         setIsChecked(event.target.checked);
       };
 
-      console.log(section3Data,"wyeytweevfde",section2Data)
+      console.log("wyeytweevfde",section4Data)
     
 
     return(
@@ -237,7 +264,7 @@ export default function PatientForm(){
                             </AccordionSummary>
                             
                             <AccordionDetails>
-                                <PainAnalysisSection4/>
+                                <PainAnalysisSection4 handleFormSection4Data={handleFormSection4Data}/>
                             </AccordionDetails>
                         </Accordion>