IO-3092 WIP on img proxy thumbnail generation.

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

@@ -1,24 +1,25 @@
 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 { Gallery } from "react-grid-gallery";
 import { useTranslation } from "react-i18next";
+import Lightbox from "react-image-lightbox";
+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";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 import { GenerateSrcUrl, GenerateThumbUrl } from "./job-documents.utility";
 import JobsDocumentsDownloadButton from "./jobs-document-gallery.download.component";
 import JobsDocumentsGalleryReassign from "./jobs-document-gallery.reassign.component";
 import JobsDocumentsDeleteButton from "./jobs-documents-gallery.delete.component";
 import JobsDocumentsGallerySelectAllComponent from "./jobs-documents-gallery.selectall.component";
 
-import Lightbox from "react-image-lightbox";
-import "react-image-lightbox/style.css";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
-
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
@@ -114,6 +115,89 @@ function JobsDocumentsComponent({
     );
     setgalleryImages(documents);
   }, [data, setgalleryImages, t]);
+
+  const getProxiedUrls = async () => {
+    const result = await axios.post("/media/proxy/thumbnails", { jobid: jobId });
+
+    result.data.forEach((r) => console.log(r.thumbnailUrl));
+
+    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(() => {
+  //   getProxiedUrls();
+  // }, [galleryImages]);
+
   const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
   const hasMobileAccess = HasFeatureAccess({ bodyshop, featureName: "mobile" });
   return (
@@ -138,6 +222,18 @@ function JobsDocumentsComponent({
           </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