Added image marker values to json data

src/Components/ImageMarker/ViewPatientImageMarker.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react';
 import ImageMarker, { Marker } from 'react-image-marker';
 
 import humanImage from '../../Assets/human_body_3d.jpg';
-import './PatientImageMarker.css'
+import './PatientImageMarker.css';
 import Rating from './Rating';
 
-type Props = {}
+type Props = {};
 
 const ViewPatientImageMarker = (props: Props) => {
   const saved = JSON.parse(localStorage.getItem('entry') || '{}');
@@ -16,7 +16,12 @@ const ViewPatientImageMarker = (props: Props) => {
         {saved.entries?.map((entry: any, index: number) => (
           <div className='ratingResult' key={index}>
             <span className='image-marker__marker--default'>{entry.index}</span>
-                <Rating index={entry.index} defaultValue={entry.severity} onUpdate={() => {}} disabled/>
+            <Rating
+              index={entry.index}
+              defaultValue={entry.severity}
+              onUpdate={() => {}}
+              disabled
+            />
           </div>
         ))}
       </div>
@@ -24,7 +29,7 @@ const ViewPatientImageMarker = (props: Props) => {
         <ImageMarker src={humanImage} markers={saved.markers ?? []} />
       </div>
     </div>
-  )
+  );
-}
+};
 
 export default ViewPatientImageMarker;

src/Components/PatientForm/PatientForm.tsx

@@ -1,9 +1,20 @@
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import Footer from "../Footer";
+import Footer from '../Footer';
-import Header from "../Header";
+import Header from '../Header';
-import {Button, Checkbox, FormControlLabel, FormGroup, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
+import {
+  Button,
+  Checkbox,
+  FormControlLabel,
+  FormGroup,
+  FormLabel,
+  Grid,
+  Paper,
+  Radio,
+  RadioGroup,
+  TextField,
+} from '@mui/material';
 import PersonalSection from './PersonalSection1';
 import { styled } from '@mui/material/styles';
 import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
@@ -61,7 +72,7 @@ import AlertDialog from '../Helper/AlertDialogBox';
 
 type Props = {
   type: any;
-}
+};
 
 export default function PatientForm({ type }: Props) {
   const [alertProps, setAlertProps] = React.useState<any>({});
@@ -90,7 +101,7 @@ export default function PatientForm({type}:Props){
     city?: string | undefined,
     state?: string | undefined,
     zipCode?: string | undefined,
-      gender?: string|undefined,
+    gender?: string | undefined
   ) => {
     setSection1Data({
       fullName,
@@ -105,8 +116,8 @@ export default function PatientForm({type}:Props){
       state,
       zipCode,
       gender,
-      })
+    });
-    }
+  };
 
   const handleFormSection2Data = (
     maritalStatus: string | undefined,
@@ -120,7 +131,7 @@ export default function PatientForm({type}:Props){
     spouseBusinessPhone: string | undefined,
     emergencyContact: string | undefined,
     relationship: string | undefined,
-      spousePhone: string | undefined,
+    spousePhone: string | undefined
   ) => {
     setSection2Data({
       maritalStatus,
@@ -135,8 +146,8 @@ export default function PatientForm({type}:Props){
       emergencyContact,
       relationship,
       spousePhone,
-      })
+    });
-    }
+  };
 
   const handleFormSection3Data = (
     physicianname: string | undefined,
@@ -149,7 +160,7 @@ export default function PatientForm({type}:Props){
     haveChiropractor: string | undefined,
     reference: string | undefined,
     visitDetails: string | undefined,
-      cellPhoneProvider: string |undefined,
+    cellPhoneProvider: string | undefined
   ) => {
     setSection3Data({
       physicianname,
@@ -163,8 +174,8 @@ export default function PatientForm({type}:Props){
       reference,
       visitDetails,
       cellPhoneProvider,
-      })
+    });
-    }
+  };
 
   const handleFormSection4Data = (
     chiefComplaint: string | undefined,
@@ -176,7 +187,7 @@ export default function PatientForm({type}:Props){
     painDuration: string | undefined,
     currentTreatment: string | undefined,
     treatmentGoal: string | undefined,
-        selfTreatment:string|undefined,
+    selfTreatment: string | undefined
   ) => {
     setSection4Data({
       chiefComplaint,
@@ -189,8 +200,8 @@ export default function PatientForm({type}:Props){
       currentTreatment,
       treatmentGoal,
       selfTreatment,
-      })
+    });
-    }
+  };
 
   const handleFormSection5Data = (
     generalHealth: string | undefined,
@@ -204,7 +215,7 @@ export default function PatientForm({type}:Props){
     ifyesdizzinessFetigue: string | undefined,
     antiColligent: string | undefined,
     injuriesHospitalization: string | undefined,
-      supplementsOrDrugs: string|undefined,
+    supplementsOrDrugs: string | undefined
   ) => {
     setSection5Data({
       generalHealth,
@@ -219,8 +230,8 @@ export default function PatientForm({type}:Props){
       antiColligent,
       injuriesHospitalization,
       supplementsOrDrugs,
-      })
+    });
-    }
+  };
 
   const handleFormSection6Data = (
     eyes: string | undefined,
@@ -239,7 +250,7 @@ export default function PatientForm({type}:Props){
     nerves: string | undefined,
     blood: string | undefined,
     prostate: string | undefined,
-      explanation:string|undefined,
+    explanation: string | undefined
   ) => {
     setSection6Data({
       eyes,
@@ -259,9 +270,8 @@ export default function PatientForm({type}:Props){
       blood,
       prostate,
       explanation,
-      })
+    });
-    }
+  };
-
 
   const handleFormSection7Data = (
     hobbies: string | undefined,
@@ -281,7 +291,7 @@ export default function PatientForm({type}:Props){
     familyLife: string | undefined,
     familyLifeExplanation: string | undefined,
     drugs: string | undefined,
-      drugsExplanation:string|undefined,
+    drugsExplanation: string | undefined
   ) => {
     setSection7Data({
       hobbies,
@@ -302,8 +312,8 @@ export default function PatientForm({type}:Props){
       familyLifeExplanation,
       drugs,
       drugsExplanation,
-      })
+    });
-    }
+  };
 
   const handleFormSection8Data = (
     familyHistory: string | undefined,
@@ -312,7 +322,7 @@ export default function PatientForm({type}:Props){
     orthotics: string | undefined,
     brestExam: any,
     pregnancy: string | undefined,
-      menstralCycle: any,
+    menstralCycle: any
   ) => {
     setSection8Data({
       familyHistory,
@@ -322,10 +332,11 @@ export default function PatientForm({type}:Props){
       brestExam,
       pregnancy,
       menstralCycle,
-      })
+    });
-    }    
+  };
 
   const handleSubmit = () => {
+    const saved = JSON.parse(localStorage.getItem('entry') || '{}');
     const newPatientData = {
       personalInformation: section1Data,
       familyInformation: section2Data,
@@ -335,6 +346,7 @@ export default function PatientForm({type}:Props){
       systemReviewQuestions: section6Data,
       recreationalActivities: section7Data,
       otherDetails: section8Data,
+      injuryPainDetails: saved.entries,
     };
 
     // Create a copy of the existing data array and push the new patient data
@@ -346,11 +358,17 @@ export default function PatientForm({type}:Props){
     localStorage.setItem('patientData', JSON.stringify(newPatientData));
 
     if (
-        section1Data.fullName !== "" && section1Data.cellPhone &&
+      section1Data.fullName !== '' &&
-        /^\d{10}$/.test(section1Data.cellPhone) && section1Data.email &&
+      section1Data.cellPhone &&
-        /^\S+@\S+\.\S+$/.test(section1Data.email) && section1Data.age &&
+      /^\d{10}$/.test(section1Data.cellPhone) &&
-        section1Data.age !== "" && Number(section1Data.age) >= 0 && section1Data.mailingAddress &&
+      section1Data.email &&
-        section1Data.mailingAddress !== "" ){
+      /^\S+@\S+\.\S+$/.test(section1Data.email) &&
+      section1Data.age &&
+      section1Data.age !== '' &&
+      Number(section1Data.age) >= 0 &&
+      section1Data.mailingAddress &&
+      section1Data.mailingAddress !== ''
+    ) {
       TextFile();
     } else {
       setAlertProps({
@@ -363,15 +381,16 @@ export default function PatientForm({type}:Props){
   };
 
   const TextFile = () => {
-    const element = document.createElement("a");
+    const element = document.createElement('a');
     //@ts-ignore
-    const textFile = new Blob([localStorage.getItem('patientData')], {type: 'text/json'});
+    const textFile = new Blob([localStorage.getItem('patientData')], {
+      type: 'text/json',
+    });
     element.href = URL.createObjectURL(textFile);
-    element.download = "patientData.json";
+    element.download = 'patientData.json';
     document.body.appendChild(element);
     element.click();
-  }
+  };
-    
 
   const handleExpandChange =
     (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
@@ -386,10 +405,12 @@ export default function PatientForm({type}:Props){
     setAlertProps({});
   };
 
-  //@ts-ignore
+  const patientData = localStorage.getItem('patientData')
-  const patientData = localStorage.getItem('patientData') ? JSON.parse(localStorage.getItem('patientData')) : [];
+    ? //@ts-ignore
+      JSON.parse(localStorage.getItem('patientData'))
+    : [];
 
-  console.log("dfsdfdsf",patientData)
+  console.log('dfsdfdsf', patientData);
 
   return (
     <>
@@ -410,14 +431,18 @@ export default function PatientForm({type}:Props){
             Confidential Patient Information
           </Typography>
           <Grid>
-                        <Accordion expanded={expanded === 'panel1'} onChange={handleExpandChange('panel1')}>
+            <Accordion
-                            
+              expanded={expanded === 'panel1'}
+              onChange={handleExpandChange('panel1')}
+            >
               <AccordionSummary
                 expandIcon={<ExpandMoreIcon />}
-                                aria-controls="panel1a-content"
+                aria-controls='panel1a-content'
-                                id="panel1a-header"
+                id='panel1a-header'
               >
-                                <Typography sx={{fontSize:18}}>Patient's Personal Information</Typography>
+                <Typography sx={{ fontSize: 18 }}>
+                  Patient's Personal Information
+                </Typography>
               </AccordionSummary>
 
               <AccordionDetails>
@@ -425,15 +450,21 @@ export default function PatientForm({type}:Props){
                   handleFormSection1Data={handleFormSection1Data}
                   patientDataDiplay={patientData.personalInformation}
                   type={type}
-                                  
                 />
               </AccordionDetails>
-                           
             </Accordion>
 
-                        <Accordion expanded={expanded === 'panel2'} onChange={handleExpandChange('panel2')}>
+            <Accordion
-                            <AccordionSummary aria-controls="panel2d-content" id="panel2d-header">
+              expanded={expanded === 'panel2'}
-                                <Typography sx={{fontSize:18}}>Patient's Family Information</Typography>
+              onChange={handleExpandChange('panel2')}
+            >
+              <AccordionSummary
+                aria-controls='panel2d-content'
+                id='panel2d-header'
+              >
+                <Typography sx={{ fontSize: 18 }}>
+                  Patient's Family Information
+                </Typography>
               </AccordionSummary>
 
               <AccordionDetails>
@@ -445,9 +476,17 @@ export default function PatientForm({type}:Props){
               </AccordionDetails>
             </Accordion>
 
-                        <Accordion expanded={expanded === 'panel3'} onChange={handleExpandChange('panel3')}>
+            <Accordion
-                            <AccordionSummary aria-controls="panel3d-content" id="panel3d-header">
+              expanded={expanded === 'panel3'}
-                                <Typography sx={{fontSize:18}}>Patient's Medical History Information</Typography>
+              onChange={handleExpandChange('panel3')}
+            >
+              <AccordionSummary
+                aria-controls='panel3d-content'
+                id='panel3d-header'
+              >
+                <Typography sx={{ fontSize: 18 }}>
+                  Patient's Medical History Information
+                </Typography>
               </AccordionSummary>
 
               <AccordionDetails>
@@ -459,26 +498,39 @@ export default function PatientForm({type}:Props){
               </AccordionDetails>
             </Accordion>
 
-                        <Accordion expanded={expanded === 'panel9'} onChange={handleExpandChange('panel9')}>
+            <Accordion
-                            <AccordionSummary aria-controls="panel9d-content" id="panel9d-header">
+              expanded={expanded === 'panel9'}
-                                <Typography sx={{fontSize:18}}>Patient's Injury Image</Typography>
+              onChange={handleExpandChange('panel9')}
+            >
+              <AccordionSummary
+                aria-controls='panel9d-content'
+                id='panel9d-header'
+              >
+                <Typography sx={{ fontSize: 18 }}>
+                  Patient's Injury Image
+                </Typography>
               </AccordionSummary>
 
               <AccordionDetails>
-                  {
+                {type === 'fill' ? (
-                    type === 'fill' ?
                   <PatientImageMarker />
-                      :
+                ) : (
                   <ViewPatientImageMarker />
-                  }
+                )}
-                                
               </AccordionDetails>
             </Accordion>
 
-
+            <Accordion
-                        <Accordion expanded={expanded === 'panel4'} onChange={handleExpandChange('panel4')}>
+              expanded={expanded === 'panel4'}
-                            <AccordionSummary aria-controls="panel4d-content" id="panel4d-header">
+              onChange={handleExpandChange('panel4')}
-                                <Typography sx={{fontSize:18}}>Patient's Injury Details</Typography>
+            >
+              <AccordionSummary
+                aria-controls='panel4d-content'
+                id='panel4d-header'
+              >
+                <Typography sx={{ fontSize: 18 }}>
+                  Patient's Injury Details
+                </Typography>
               </AccordionSummary>
 
               <AccordionDetails>
@@ -490,22 +542,39 @@ export default function PatientForm({type}:Props){
               </AccordionDetails>
             </Accordion>
 
-                        <Accordion expanded={expanded === 'panel5'} onChange={handleExpandChange('panel5')}>
+            <Accordion
-                            <AccordionSummary aria-controls="panel5d-content" id="panel5d-header">
+              expanded={expanded === 'panel5'}
-                                <Typography sx={{fontSize:18}}>Patient's Past Treatment Details</Typography>
+              onChange={handleExpandChange('panel5')}
+            >
+              <AccordionSummary
+                aria-controls='panel5d-content'
+                id='panel5d-header'
+              >
+                <Typography sx={{ fontSize: 18 }}>
+                  Patient's Past Treatment Details
+                </Typography>
               </AccordionSummary>
 
               <AccordionDetails>
                 <PastTreatment5
                   handleFormSection5Data={handleFormSection5Data}
                   patientDataDiplay={patientData.pastTreatment}
-                                type={type}/>
+                  type={type}
+                />
               </AccordionDetails>
             </Accordion>
 
-                        <Accordion expanded={expanded === 'panel6'} onChange={handleExpandChange('panel6')}>
+            <Accordion
-                            <AccordionSummary aria-controls="panel6d-content" id="panel6d-header">
+              expanded={expanded === 'panel6'}
-                                <Typography sx={{fontSize:18}}>System Review Questions</Typography>
+              onChange={handleExpandChange('panel6')}
+            >
+              <AccordionSummary
+                aria-controls='panel6d-content'
+                id='panel6d-header'
+              >
+                <Typography sx={{ fontSize: 18 }}>
+                  System Review Questions
+                </Typography>
               </AccordionSummary>
 
               <AccordionDetails>
@@ -517,21 +586,36 @@ export default function PatientForm({type}:Props){
               </AccordionDetails>
             </Accordion>
 
-                        <Accordion expanded={expanded === 'panel7'} onChange={handleExpandChange('panel7')}>
+            <Accordion
-                            <AccordionSummary aria-controls="panel7d-content" id="panel7d-header">
+              expanded={expanded === 'panel7'}
-                                <Typography sx={{fontSize:18}}>Recreational Activities/Hobbies Details</Typography>
+              onChange={handleExpandChange('panel7')}
+            >
+              <AccordionSummary
+                aria-controls='panel7d-content'
+                id='panel7d-header'
+              >
+                <Typography sx={{ fontSize: 18 }}>
+                  Recreational Activities/Hobbies Details
+                </Typography>
               </AccordionSummary>
 
               <AccordionDetails>
                 <RecreationalHobbiesSection7
                   handleFormSection7Data={handleFormSection7Data}
                   patientDataDiplay={patientData.recreationalActivities}
-                                type={type}/>
+                  type={type}
+                />
               </AccordionDetails>
             </Accordion>
 
-                        <Accordion expanded={expanded === 'panel8'} onChange={handleExpandChange('panel8')}>
+            <Accordion
-                            <AccordionSummary aria-controls="panel8d-content" id="panel8d-header">
+              expanded={expanded === 'panel8'}
+              onChange={handleExpandChange('panel8')}
+            >
+              <AccordionSummary
+                aria-controls='panel8d-content'
+                id='panel8d-header'
+              >
                 <Typography sx={{ fontSize: 18 }}>Other Details</Typography>
               </AccordionSummary>
 
@@ -539,7 +623,8 @@ export default function PatientForm({type}:Props){
                 <OtherDetails8
                   handleFormSection8Data={handleFormSection8Data}
                   patientDataDiplay={patientData.otherDetails}
-                                type={type}/>
+                  type={type}
+                />
               </AccordionDetails>
             </Accordion>
 
@@ -548,8 +633,13 @@ export default function PatientForm({type}:Props){
                 <FormGroup sx={{ marginTop: 3 }}>
                   <FormControlLabel
                     required
-                              control={<Checkbox checked={isChecked} onChange={handleCheckboxChange} />}
+                    control={
-                              label="I hereby state that all the information I have provided is complete and truthful and that I have fully disclosed my health history."
+                      <Checkbox
+                        checked={type === 'display' ? true : isChecked}
+                        onChange={handleCheckboxChange}
+                      />
+                    }
+                    label='I hereby state that all the information I have provided is complete and truthful and that I have fully disclosed my health history.'
                   />
                 </FormGroup>
               </Grid>
@@ -557,12 +647,12 @@ export default function PatientForm({type}:Props){
               <Grid item xs={6} className='collapsable-form-style'>
                 <TextField
                   disabled={type == 'display'}
-                              variant="outlined"
+                  variant='outlined'
-                              label="SIGNATURE" 
+                  label='SIGNATURE'
                   name='treatmentGoal'
                   placeholder='Please type your name'
                   onChange={(event) => {
-                                setSignature(event.target.value)
+                    setSignature(event.target.value);
                   }}
                 />
               </Grid>
@@ -570,10 +660,12 @@ export default function PatientForm({type}:Props){
             <Grid>
               <Button
                 // type="submit"
-                            variant="contained"
+                variant='contained'
-                            color="primary"
+                color='primary'
                 sx={{ margin: 5, left: '40%', width: '200px' }}
-                            disabled={isChecked==false || signature=='' || type=='display'}
+                disabled={
+                  isChecked == false || signature == '' || type == 'display'
+                }
                 onClick={handleSubmit}
               >
                 Submit
@@ -581,10 +673,9 @@ export default function PatientForm({type}:Props){
             </Grid>
           </Grid>
           {/* </form> */}
-                       
         </Paper>
         <Footer />
       </Paper>
     </>
-    )
+  );
 }