From 60c1152a3844c44550d6c3bdabf86132af2eb68d Mon Sep 17 00:00:00 2001
From: vipeeshpavithran <vpavithran@quinovas.com>
Date: Fri, 8 Sep 2023 18:43:15 +0530
Subject: [PATCH] removed save button and added autosave on marking

---
 src/Components/ImageMarker/EntryForm.tsx      | 12 ++--
 .../ImageMarker/PatientImageMarker.tsx        | 56 ++++++++++---------
 2 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/src/Components/ImageMarker/EntryForm.tsx b/src/Components/ImageMarker/EntryForm.tsx
index 06e92c8..cde8697 100644
--- a/src/Components/ImageMarker/EntryForm.tsx
+++ b/src/Components/ImageMarker/EntryForm.tsx
@@ -11,10 +11,12 @@ type Props = {
 const EntryForm = ({ entries, onUpdate, onDelete, onSave }: Props) => {
   return (
     <div className='entryForm'>
-      <span className='header'>*** Mark Your Areas of Pain on the Picture ***</span>
-      {entries && entries.length > 0 &&
+      <span className='header'>
+        *** Mark Your Areas of Pain on the Picture ***
+      </span>
+      {entries && entries.length > 0 && (
         <span className='sub-header'>How much pain are you in right now?</span>
-      }
+      )}
       {entries?.map((entry: any, index: number) => (
         <Entry
           entry={entry}
@@ -24,14 +26,14 @@ const EntryForm = ({ entries, onUpdate, onDelete, onSave }: Props) => {
           onDelete={onDelete}
         />
       ))}
-      {
+      {/* {
         entries && entries.length > 0 &&
         <div className='buttonDiv'>
           <Button variant='contained' onClick={() => onSave({})}>
             Save
           </Button>
         </div>
-      }
+      } */}
     </div>
   );
 };
diff --git a/src/Components/ImageMarker/PatientImageMarker.tsx b/src/Components/ImageMarker/PatientImageMarker.tsx
index 1ac39be..5537bdd 100644
--- a/src/Components/ImageMarker/PatientImageMarker.tsx
+++ b/src/Components/ImageMarker/PatientImageMarker.tsx
@@ -1,12 +1,12 @@
-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 EntryForm from './EntryForm';
 
-import './PatientImageMarker.css'
+import './PatientImageMarker.css';
 
-type Props = {}
+type Props = {};
 
 const PatientImageMarker = (props: Props) => {
   const [markers, setMarkers] = useState<Array<Marker>>([]);
@@ -38,7 +38,7 @@ const PatientImageMarker = (props: Props) => {
       'entry',
       JSON.stringify({ markers: markers, entries: entries })
     );
-  }
+  };
 
   useEffect(() => {
     if (action.type === 'add')
@@ -48,26 +48,30 @@ const PatientImageMarker = (props: Props) => {
         entries.filter((entry: any, ind: number) => ind != action.index)
       );
   }, [action]);
-  
-  return (
-      <div className='image-marker-div'>
-          <div className='entry-div'>
-              <EntryForm
-                entries={entries}
-                onSave={onSave}
-                onDelete={deleteEntry}
-                onUpdate={updateEntry}
-              />
-          </div>
-          <div className='marker-div'>
-              <ImageMarker
-                src={humanImage}
-                markers={markers}
-                onAddMarker={(marker: Marker) => addEntries(marker)}
-            />
-          </div>
-    </div>
-  )
-}
 
-export default PatientImageMarker;
\ No newline at end of file
+  useEffect(() => {
+    onSave();
+  }, [entries]);
+
+  return (
+    <div className='image-marker-div'>
+      <div className='entry-div'>
+        <EntryForm
+          entries={entries}
+          onSave={onSave}
+          onDelete={deleteEntry}
+          onUpdate={updateEntry}
+        />
+      </div>
+      <div className='marker-div'>
+        <ImageMarker
+          src={humanImage}
+          markers={markers}
+          onAddMarker={(marker: Marker) => addEntries(marker)}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default PatientImageMarker;