allData writeto file

package-lock.json

@@ -28,7 +28,9 @@
         "chartjs-adapter-moment": "^1.0.1",
         "d3-shape": "^3.2.0",
         "dayjs": "^1.11.9",
+        "file-saver": "^2.0.5",
         "formik": "^2.4.3",
+        "fs": "^0.0.1-security",
         "leaflet": "^1.9.4",
         "react": "^18.2.0",
         "react-chartjs-2": "^5.2.0",
@@ -49,6 +51,7 @@
       "devDependencies": {
         "@babel/plugin-proposal-private-property-in-object": "7.21.11",
         "@types/chart.js": "^2.9.37",
+        "@types/file-saver": "^2.0.5",
         "@types/leaflet": "^1.9.3",
         "@types/react-date-range": "^1.4.4",
         "@types/react-gauge-chart": "^0.4.0",
@@ -4810,6 +4813,12 @@
         "@types/send": "*"
       }
     },
+    "node_modules/@types/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==",
+      "dev": true
+    },
     "node_modules/@types/geojson": {
       "version": "7946.0.10",
       "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
@@ -9266,6 +9275,11 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "node_modules/filelist": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
@@ -9650,6 +9664,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/fs": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
+      "integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w=="
+    },
     "node_modules/fs-extra": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",

package.json

@@ -24,7 +24,9 @@
     "chartjs-adapter-moment": "^1.0.1",
     "d3-shape": "^3.2.0",
     "dayjs": "^1.11.9",
+    "file-saver": "^2.0.5",
     "formik": "^2.4.3",
+    "fs": "^0.0.1-security",
     "leaflet": "^1.9.4",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
@@ -69,6 +71,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "7.21.11",
     "@types/chart.js": "^2.9.37",
+    "@types/file-saver": "^2.0.5",
     "@types/leaflet": "^1.9.3",
     "@types/react-date-range": "^1.4.4",
     "@types/react-gauge-chart": "^0.4.0",

src/Components/PatientForm/PatientForm.tsx

@@ -19,6 +19,7 @@ import PastTreatment5 from './PastTreatment5';
 import SystemReviewSection6 from './SyestemReviewSection6';
 import RecreationalHobbiesSection7 from './RecreationalHobbiesSection7';
 import OtherDetails8 from './OtherDetails8';
+import * as fs from 'fs';
 
   const Accordion = styled((props: AccordionProps) => (
     <MuiAccordion disableGutters elevation={0} square {...props} />
@@ -338,6 +339,12 @@ export default function PatientForm(){
       // Update the state with the new array
       setAllPatientData(updatedAllPatientData);
 
+      // Save allPatientData to a JSON file
+      fs.writeFile('allPatientData.json', JSON.stringify(updatedAllPatientData), (err:any) => {
+        if (err) throw err;
+        console.log('The file has been saved!');
+      });
+
       console.log("UpdatedallPatientData:", updatedAllPatientData);
     };
         

src/Components/PatientForm/PersonalSection1.tsx

@@ -115,23 +115,22 @@ export default function PersonalSection({handleFormSection1Data}:Props){
         <>
         <Grid container direction="row" className='section1-test-class'>
             <Grid item xs={4} className='collapsable-form-style '>
-             <TextField
+            <TextField
-                    variant="outlined"
+                variant="outlined"
-                    label="Patient's Full Name"
+                label="Patient's Full Name"
-                    name="fullName"
+                name="fullName"
-                    placeholder='Please enter your name'
+                placeholder='Please enter your name'
-                    value={patient.fullName}
+                value={patient.fullName}
-                    onChange={(e)=>{
+                onChange={(e)=>{
-                        setPatient((prevValues) => ({
+                    setPatient((prevValues) => ({
-                            ...prevValues,
+                        ...prevValues,
-                            fullName: e.target.value,
+                        fullName: e.target.value,
-                          }));
+                    }));
-                    }}
+                }}
-                    // onBlur={formik.handleBlur}
+                required
-                    // error={formik.touched.fullName && Boolean(formik.errors.fullName)}
+                error={patient.fullName === ""}
-                    // helperText={formik.touched.fullName && formik.errors.fullName}
+                helperText={patient.fullName === "" ? "Please enter a valid name" : ""}
-                    required
+            />
-                />
                 </Grid>
                
                 <Grid item xs={4} className='collapsable-form-style'>
@@ -148,9 +147,8 @@ export default function PersonalSection({handleFormSection1Data}:Props){
                             cellPhone: e.target.value,
                           }));
                     }}
-                    // onBlur={formik.handleBlur}
+                    error={patient.cellPhone === ""}
-                    // error={formik.touched.cellPhone && Boolean(formik.errors.cellPhone)}
+                    helperText={patient.cellPhone === "" ? "Please enter a valid phone number" : ""}
-                    // helperText={formik.touched.cellPhone && formik.errors.cellPhone}
                 />
                 </Grid>