IO-1144 Image Editor Changes.

client/src/components/document-editor/document-editor.component.jsx

@@ -1,8 +1,8 @@
 //import "tui-image-editor/dist/tui-image-editor.css";
-import { Spin } from "antd";
+import { Result } from "antd";
 import * as markerjs2 from "markerjs2";
-import React, { useEffect, useRef } from "react";
-import { useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
@@ -11,6 +11,7 @@ import {
 } from "../../redux/user/user.selectors";
 import { handleUpload } from "../documents-upload/documents-upload.utility";
 import { GenerateSrcUrl } from "../jobs-documents-gallery/job-documents.utility";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -23,37 +24,49 @@ const mapDispatchToProps = (dispatch) => ({
 export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
   const imgRef = useRef(null);
   const [loading, setLoading] = useState(false);
+  const [uploaded, setuploaded] = useState(false);
   const markerArea = useRef(null);
-  const triggerUpload = async (dataUrl) => {
-    setLoading(true);
-    handleUpload(
-      {
-        filename: `${document.key.split("/").pop()}-${Date.now()}.jpg`,
-        file: await b64toBlob(dataUrl),
-        onSuccess: () => setLoading(false),
-        onError: () => setLoading(false),
-      },
-      {
-        bodyshop: bodyshop,
-        uploaded_by: currentUser.email,
-        jobId: document.jobid,
-        //billId: billId,
-        tagsArray: ["edited"],
-        //callback: callbackAfterUpload,
-      }
-    );
-  };
+  const { t } = useTranslation();
+
+  const triggerUpload = useCallback(
+    async (dataUrl) => {
+      setLoading(true);
+      handleUpload(
+        {
+          filename: `${document.key.split("/").pop()}-${Date.now()}.jpg`,
+          file: await b64toBlob(dataUrl),
+          onSuccess: () => {
+            setLoading(false);
+            setuploaded(true);
+          },
+          onError: () => setLoading(false),
+        },
+        {
+          bodyshop: bodyshop,
+          uploaded_by: currentUser.email,
+          jobId: document.jobid,
+          //billId: billId,
+          tagsArray: ["edited"],
+          //callback: callbackAfterUpload,
+        }
+      );
+    },
+    [bodyshop, currentUser, document]
+  );
 
   useEffect(() => {
     if (imgRef.current !== null) {
       // create a marker.js MarkerArea
       markerArea.current = new markerjs2.MarkerArea(imgRef.current);
+      console.log(`markerArea.current`, markerArea.current);
       // attach an event handler to assign annotated image back to our image element
       markerArea.current.addCloseEventListener((closeEvent) => {
         console.log("Close Event", closeEvent);
       });
 
       markerArea.current.addRenderEventListener((dataUrl) => {
+        imgRef.current.src = dataUrl;
+        markerArea.current.close();
         triggerUpload(dataUrl);
       });
       // launch marker.js
@@ -65,7 +78,7 @@ export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
       markerArea.current.show();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [imgRef.current, triggerUpload]);
+  }, [triggerUpload]);
 
   async function b64toBlob(url) {
     const res = await fetch(url);
@@ -74,7 +87,7 @@ export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
 
   return (
     <div>
-      <Spin spinning={loading}>
+      {!loading && !uploaded && (
         <img
           ref={imgRef}
           src={GenerateSrcUrl(document)}
@@ -82,7 +95,14 @@ export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
           crossOrigin="anonymous"
           style={{ maxWidth: "90vw", maxHeight: "90vh" }}
         />
-      </Spin>
+      )}
+      {loading && <LoadingSpinner message={t("documents.labels.uploading")} />}
+      {uploaded && (
+        <Result
+          status="success"
+          title={t("documents.successes.edituploaded")}
+        />
+      )}
     </div>
   );
 }