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

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

@@ -1,29 +1,55 @@
 import { useQuery } from "@apollo/client";
-import { Modal, Result } from "antd";
+import { Result } from "antd";
 import queryString from "query-string";
-import React from "react";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
 import { useLocation } from "react-router";
+import { QUERY_BODYSHOP } from "../../graphql/bodyshop.queries";
 import { GET_DOCUMENT_BY_PK } from "../../graphql/documents.queries";
+import { setBodyshop } from "../../redux/user/user.actions";
 import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import DocumentEditor from "./document-editor.component";
-import { useTranslation } from "react-i18next";
 
-export default function DocumentEditorContainer() {
+const mapDispatchToProps = (dispatch) => ({
+  setBodyshop: (bs) => dispatch(setBodyshop(bs)),
+});
+
+export default connect(null, mapDispatchToProps)(DocumentEditorContainer);
+
+export function DocumentEditorContainer({ setBodyshop }) {
   //Get the image details for the image to be saved.
   //Get the document id from the search string.
   const { documentId } = queryString.parse(useLocation().search);
   const { t } = useTranslation();
+  const {
+    loading: loadingShop,
+    error: errorShop,
+    data: dataShop,
+  } = useQuery(QUERY_BODYSHOP, {
+    fetchPolicy: "network-only",
+  });
+
+  useEffect(() => {
+    if (dataShop) setBodyshop(dataShop.bodyshops[0]);
+  }, [dataShop, setBodyshop]);
 
   const { loading, error, data } = useQuery(GET_DOCUMENT_BY_PK, {
     variables: { documentId },
     skip: !documentId,
   });
 
-  if (loading) return <LoadingSpinner />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (loading || loadingShop) return <LoadingSpinner />;
+  if (error || errorShop)
+    return (
+      <AlertComponent
+        message={error.message || errorShop.message}
+        type="error"
+      />
+    );
 
-  if (!data.documents_by_pk)
+  if (!data || !data.documents_by_pk)
     return <Result status="404" title={t("general.errors.notfound")} />;
   return (
     <div>