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

client/package.json

@@ -7,17 +7,18 @@
     "@apollo/client": "^3.6.9",
     "@asseinfo/react-kanban": "^2.2.0",
     "@craco/craco": "^6.4.5",
-    "@fingerprintjs/fingerprintjs": "^3.3.3",
+    "@fingerprintjs/fingerprintjs": "^3.3.6",
     "@jsreport/browser-client": "^3.1.0",
-    "@sentry/react": "^7.7.0",
+    "@sentry/react": "^7.17.3",
-    "@sentry/tracing": "^7.7.0",
+    "@sentry/tracing": "^7.17.3",
-    "@splitsoftware/splitio-react": "^1.6.0",
+    "@splitsoftware/splitio-react": "^1.8.0",
-    "@stripe/react-stripe-js": "^1.9.0",
+    "@stripe/react-stripe-js": "^1.14.1",
-    "@stripe/stripe-js": "^1.32.0",
+    "@stripe/stripe-js": "^1.42.1",
-    "@tanem/react-nprogress": "^5.0.8",
+    "@tanem/react-nprogress": "^5.0.16",
-    "antd": "^4.22.3",
+    "antd": "^4.23.6",
     "apollo-link-logger": "^2.0.0",
     "axios": "^0.27.2",
+    "breaking-react-grid-gallery": "npm:react-grid-gallery@1.0.0",
     "craco-less": "^1.20.0",
     "dinero.js": "^1.9.1",
     "dotenv": "^16.0.1",
@@ -28,15 +29,15 @@
     "graphql": "^16.5.0",
     "i18next": "^21.8.14",
     "i18next-browser-languagedetector": "^6.1.4",
-    "jsoneditor": "^9.9.0",
+    "jsoneditor": "^9.9.2",
     "jsreport-browser-client-dist": "^1.3.0",
-    "libphonenumber-js": "^1.10.9",
+    "libphonenumber-js": "^1.10.14",
     "logrocket": "^3.0.1",
-    "markerjs2": "^2.22.0",
+    "markerjs2": "^2.28.0",
     "moment-business-days": "^1.2.0",
-    "moment-timezone": "^0.5.34",
+    "moment-timezone": "^0.5.38",
-    "normalize-url": "^7.0.3",
+    "normalize-url": "^7.2.0",
-    "phone": "^3.1.23",
+    "phone": "^3.1.29",
     "preval.macro": "^5.0.0",
     "prop-types": "^15.8.1",
     "query-string": "^7.1.1",
@@ -51,7 +52,8 @@
     "react-grid-gallery": "^0.5.5",
     "react-grid-layout": "^1.3.4",
     "react-i18next": "^11.18.1",
-    "react-icons": "^4.4.0",
+    "react-icons": "^4.6.0",
+    "react-image-lightbox": "^5.1.4",
     "react-number-format": "^4.9.3",
     "react-redux": "^7.2.8",
     "react-resizable": "^3.0.4",
@@ -60,29 +62,29 @@
     "react-sticky": "^6.0.3",
     "react-sublime-video": "^0.2.5",
     "react-virtualized": "^9.22.3",
-    "recharts": "^2.1.12",
+    "recharts": "^2.1.16",
     "redux": "^4.2.0",
     "redux-persist": "^6.0.0",
-    "redux-saga": "^1.1.3",
+    "redux-saga": "^1.2.1",
     "redux-state-sync": "^3.1.4",
     "reselect": "^4.1.6",
-    "sass": "^1.54.0",
+    "sass": "^1.55.0",
-    "socket.io-client": "^4.5.1",
+    "socket.io-client": "^4.5.3",
-    "styled-components": "^5.3.5",
+    "styled-components": "^5.3.6",
     "subscriptions-transport-ws": "^0.11.0",
     "web-vitals": "^2.1.4",
-    "workbox-background-sync": "^6.5.3",
+    "workbox-background-sync": "^6.5.4",
-    "workbox-broadcast-update": "^6.5.3",
+    "workbox-broadcast-update": "^6.5.4",
-    "workbox-cacheable-response": "^6.5.3",
+    "workbox-cacheable-response": "^6.5.4",
-    "workbox-core": "^6.5.3",
+    "workbox-core": "^6.5.4",
-    "workbox-expiration": "^6.5.3",
+    "workbox-expiration": "^6.5.4",
-    "workbox-google-analytics": "^6.5.3",
+    "workbox-google-analytics": "^6.5.4",
-    "workbox-navigation-preload": "^6.5.3",
+    "workbox-navigation-preload": "^6.5.4",
-    "workbox-precaching": "^6.5.3",
+    "workbox-precaching": "^6.5.4",
-    "workbox-range-requests": "^6.5.3",
+    "workbox-range-requests": "^6.5.4",
-    "workbox-routing": "^6.5.3",
+    "workbox-routing": "^6.5.4",
-    "workbox-strategies": "^6.5.3",
+    "workbox-strategies": "^6.5.4",
-    "workbox-streams": "^6.5.3",
+    "workbox-streams": "^6.5.4",
     "yauzl": "^2.10.0"
   },
   "scripts": {
@@ -119,12 +121,12 @@
     "react-error-overlay": "6.0.9"
   },
   "devDependencies": {
-    "@sentry/webpack-plugin": "^1.19.0",
+    "@sentry/webpack-plugin": "^1.20.0",
     "@testing-library/cypress": "^8.0.3",
-    "cypress": "^10.3.1",
+    "cypress": "^10.11.0",
     "eslint-plugin-cypress": "^2.12.1",
     "react-error-overlay": "6.0.11",
     "redux-logger": "^3.0.6",
-    "source-map-explorer": "^2.5.2"
+    "source-map-explorer": "^2.5.3"
   }
 }

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 React, { useEffect, useMemo, useState } from "react";
-import Gallery from "react-grid-gallery";
 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;
+  //let optimized;
-  const jobMedia =
+
-    allMedia && allMedia[job.id]
+  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