IO-3092 Implement delete, move and download on image proxy. Add imgproxy based components.

client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx

@@ -1,7 +1,6 @@
 import { EditFilled, FileExcelFilled, SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Col, Row, Space } from "antd";
-import axios from "axios";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Gallery } from "react-grid-gallery";
 import { useTranslation } from "react-i18next";
 import Lightbox from "react-image-lightbox";
@@ -9,7 +8,6 @@ import "react-image-lightbox/style.css";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import DocumentsUploadImgproxyComponent from "../documents-upload-imgproxy/documents-upload-imgproxy.component";
 import DocumentsUploadComponent from "../documents-upload/documents-upload.component";
 import { DetermineFileType } from "../documents-upload/documents-upload.utility";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
@@ -116,85 +114,6 @@ function JobsDocumentsComponent({
     setgalleryImages(documents);
   }, [data, setgalleryImages, t]);
 
-  const getProxiedUrls = async () => {
-    const result = await axios.post("/media/proxy/thumbnails", { jobid: jobId });
-    let documents = result.data.reduce(
-      (acc, value) => {
-        const fileType = DetermineFileType(value.type);
-        if (value.type.startsWith("image")) {
-          acc.images.push({
-            src: value.thumbnailUrl,
-            fullsize: value.originalUrl,
-            height: 225,
-            width: 225,
-            isSelected: false,
-            key: value.key,
-            extension: value.extension,
-            id: value.id,
-            type: value.type,
-            size: value.size,
-            tags: [{ value: value.type, title: value.type }]
-          });
-        } else {
-          let thumb;
-          switch (fileType) {
-            case "raw":
-              thumb = `${window.location.origin}/file.png`;
-              break;
-            default:
-              thumb = GenerateThumbUrl(value);
-              break;
-          }
-
-          const fileName = value.key.split("/").pop();
-          acc.other.push({
-            source: value.originalUrlViaProxyPath,
-            src: value.thumbnailUrl,
-            fullsize: value.presignedGetUrl,
-            tags: [
-              {
-                value: fileName,
-                title: fileName
-              },
-
-              { value: value.type, title: value.type },
-              ...(value.bill
-                ? [
-                    {
-                      value: value.bill.vendor.name,
-                      title: t("vendors.fields.name")
-                    },
-                    { value: value.bill.date, title: t("bills.fields.date") },
-                    {
-                      value: value.bill.invoice_number,
-                      title: t("bills.fields.invoice_number")
-                    }
-                  ]
-                : [])
-            ],
-            height: 225,
-            width: 225,
-            isSelected: false,
-            extension: value.extension,
-            key: value.key,
-            id: value.id,
-            type: value.type,
-            size: value.size
-          });
-        }
-
-        return acc;
-      },
-      { images: [], other: [] }
-    );
-    console.log("*** ~ file: jobs-documents-gallery.component.jsx:198 ~ getProxiedUrls ~ documents:", documents);
-    setgalleryImages(documents);
-  };
-
-  // useEffect(() => {
-  //   if (data) getProxiedUrls();
-  // }, [data]);
-
   const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
   const hasMobileAccess = HasFeatureAccess({ bodyshop, featureName: "mobile" });
   return (
@@ -218,19 +137,6 @@ function JobsDocumentsComponent({
             </Card>
           </Col>
         )}
-
-        <Col span={24}>
-          <Button onClick={getProxiedUrls}>Get Proxied URLs</Button>
-          <Card title="IMG PROXY UPLOADER">
-            <DocumentsUploadImgproxyComponent
-              jobId={jobId}
-              totalSize={totalSize}
-              billId={billId}
-              callbackAfterUpload={billsCallback || refetch}
-              ignoreSizeLimit={ignoreSizeLimit}
-            />
-          </Card>
-        </Col>
         <Col span={24}>
           <Card>
             <DocumentsUploadComponent

client/src/components/jobs-documents-gallery/jobs-documents-gallery.container.jsx

@@ -4,27 +4,53 @@ import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
 import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import JobDocuments from "./jobs-documents-gallery.component";
+import JobDocumentsImgProxy from "../jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.component";
 
-export default function JobsDocumentsContainer({ jobId, billId, documentsList, billsCallback }) {
+export default function JobsDocumentsContainer({
+  jobId,
+  billId,
+  documentsList,
+  billsCallback,
+  refetchOverride,
+  ignoreSizeLimit
+}) {
+  //TODO Add a checker to see whether we should use the img proxy side, or this side.
+  const useImgProxy = true;
   const { loading, error, data, refetch } = useQuery(GET_DOCUMENTS_BY_JOB, {
     variables: { jobId: jobId },
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
-    skip: !!billId
+    skip: useImgProxy || !!billId
   });
 
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent type="error" message={error.message} />;
 
-  return (
-    <JobDocuments
-      data={(data && data.documents) || documentsList || []}
-      downloadIdentifier={data && data.jobs_by_pk.ro_number}
-      totalSize={data && data.documents_aggregate.aggregate.sum.size}
-      billId={billId}
-      jobId={jobId}
-      refetch={refetch}
-      billsCallback={billsCallback}
-    />
-  );
+  if (useImgProxy) {
+    return (
+      <JobDocumentsImgProxy
+        data={(data && data.documents) || documentsList || []}
+        downloadIdentifier={data && data.jobs_by_pk.ro_number}
+        totalSize={data && data.documents_aggregate.aggregate.sum.size}
+        billId={billId}
+        jobId={jobId}
+        refetch={refetchOverride || refetch}
+        billsCallback={billsCallback}
+        ignoreSizeLimit={ignoreSizeLimit}
+      />
+    );
+  } else {
+    return (
+      <JobDocuments
+        data={(data && data.documents) || documentsList || []}
+        downloadIdentifier={data && data.jobs_by_pk.ro_number}
+        totalSize={data && data.documents_aggregate.aggregate.sum.size}
+        billId={billId}
+        jobId={jobId}
+        refetch={refetchOverride || refetch}
+        billsCallback={billsCallback}
+        ignoreSizeLimit={ignoreSizeLimit}
+      />
+    );
+  }
 }