removed save button and added autosave on marking

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>
   );
 };

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')
@@ -49,25 +49,29 @@ const PatientImageMarker = (props: Props) => {
       );
   }, [action]);
 
+  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 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;