IO-2086 Use new grid gallery and lightbox for performance.

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

@@ -1,7 +1,6 @@
 import { SyncOutlined, FileExcelFilled } from "@ant-design/icons";
 import { Alert, Button, Card, Space } from "antd";
-import React, { useEffect } from "react";
-import Gallery from "react-grid-gallery";
+import React, { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -18,6 +17,9 @@ import JobsDocumentsLocalDeleteButton from "./jobs-documents-local-gallery.delet
 import JobsLocalGalleryDownloadButton from "./jobs-documents-local-gallery.download";
 import JobsDocumentsLocalGalleryReassign from "./jobs-documents-local-gallery.reassign.component";
 import JobsDocumentsLocalGallerySelectAllComponent from "./jobs-documents-local-gallery.selectall.component";
+import { Gallery } from "breaking-react-grid-gallery";
+import Lightbox from "react-image-lightbox";
+import "react-image-lightbox/style.css";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -48,6 +50,8 @@ export function JobsDocumentsLocalGallery({
   invoice_number,
   vendorid,
 }) {
+  const [index, setIndex] = useState(-1);
+
   const { t } = useTranslation();
   useEffect(() => {
     if (job) {
@@ -58,9 +62,10 @@ export function JobsDocumentsLocalGallery({
       }
     }
   }, [job, invoice_number, getJobMedia, getBillMedia]);
-  let optimized;
-  const jobMedia =
-    allMedia && allMedia[job.id]
+  //let optimized;
+
+  const jobMedia = useMemo(() => {
+    return allMedia && allMedia[job.id]
       ? allMedia[job.id].reduce(
           (acc, val) => {
             if (
@@ -70,9 +75,14 @@ export function JobsDocumentsLocalGallery({
             ) {
               acc.images.push({
                 ...val,
+                src: val.thumbnail, //Accomodate react grid gallery changes
+                height: val.thumbnailHeight,
+                width: val.thumbnailWidth,
+                original: val.src,
                 ...(val.optimized && { src: val.optimized, fullsize: val.src }),
               });
-              if (val.optimized) optimized = true;
+              if (val.optimized) {
+              } //optimized = true;
             } else {
               acc.other.push({
                 ...val,
@@ -84,7 +94,22 @@ export function JobsDocumentsLocalGallery({
           { images: [], other: [] }
         )
       : { images: [], other: [] };
+  }, [allMedia, job.id]);
 
+  console.log(
+    "🚀  ~ file: jobs-documents-local-gallery.container.jsx  ~ line 67  ~ jobMedia",
+    jobMedia
+  );
+
+  const currentImage = jobMedia.images[index];
+  const nextIndex = (index + 1) % jobMedia.images.length;
+  const nextImage = jobMedia.images[nextIndex] || currentImage;
+  const prevIndex =
+    (index + jobMedia.images.length - 1) % jobMedia.images.length;
+  const prevImage = jobMedia.images[prevIndex] || currentImage;
+  const handleClose = () => setIndex(-1);
+  const handleMovePrev = () => setIndex(prevIndex);
+  const handleMoveNext = () => setIndex(nextIndex);
   return (
     <div>
       <Space wrap>
@@ -118,7 +143,7 @@ export function JobsDocumentsLocalGallery({
         />
       </Card>
       <Card title={t("jobs.labels.documents-images")}>
-        <Gallery
+        {/* <Gallery
           images={jobMedia.images}
           backdropClosesModal={true}
           onSelectImage={(index, image) => {
@@ -144,7 +169,27 @@ export function JobsDocumentsLocalGallery({
               "toolbar=0,location=0,menubar=0"
             );
           }}
+        /> */}
+        <Gallery
+          images={jobMedia.images}
+          onClick={(index) => setIndex(index)}
+          enableImageSelection={false}
         />
+        {!!currentImage && (
+          /* @ts-ignore */
+          <Lightbox
+            mainSrc={currentImage.original}
+            imageTitle={currentImage.caption}
+            mainSrcThumbnail={currentImage.src}
+            nextSrc={nextImage.original}
+            nextSrcThumbnail={nextImage.src}
+            prevSrc={prevImage.original}
+            prevSrcThumbnail={prevImage.src}
+            onCloseRequest={handleClose}
+            onMovePrevRequest={handleMovePrev}
+            onMoveNextRequest={handleMoveNext}
+          />
+        )}
       </Card>
       <Card title={t("jobs.labels.documents-other")}>
         <Gallery