Add gallery wall view, and new lightbox (#1008)

ui/v2.5/src/components/Galleries/GalleryViewer.tsx

@@ -1,52 +1,36 @@
-import React, { useState } from "react";
+import React from "react";
 import * as GQL from "src/core/generated-graphql";
-import FsLightbox from "fslightbox-react";
+import { useLightbox } from "src/hooks";
 import "flexbin/flexbin.css";
 
 interface IProps {
-  gallery: Partial<GQL.GalleryDataFragment>;
+  gallery: GQL.GalleryDataFragment;
 }
 
 export const GalleryViewer: React.FC<IProps> = ({ gallery }) => {
-  const [lightboxToggle, setLightboxToggle] = useState(false);
-  const [currentIndex, setCurrentIndex] = useState(0);
+  const images = gallery?.images ?? [];
+  const showLightbox = useLightbox({ images, showNavigation: false });
 
-  const openImage = (index: number) => {
-    setCurrentIndex(index);
-    setLightboxToggle(!lightboxToggle);
-  };
-
-  const photos = !gallery.images
-    ? []
-    : gallery.images.map((file) => file.paths.image ?? "");
-  const thumbs = !gallery.images
-    ? []
-    : gallery.images.map((file, index) => (
-        <div
-          role="link"
-          tabIndex={index}
-          key={file.checksum ?? index}
-          onClick={() => openImage(index)}
-          onKeyPress={() => openImage(index)}
-        >
-          <img
-            src={file.paths.thumbnail ?? ""}
-            loading="lazy"
-            className="gallery-image"
-            alt={file.title ?? index.toString()}
-          />
-        </div>
-      ));
+  const thumbs = images.map((file, index) => (
+    <div
+      role="link"
+      tabIndex={index}
+      key={file.checksum ?? index}
+      onClick={() => showLightbox(index)}
+      onKeyPress={() => showLightbox(index)}
+    >
+      <img
+        src={file.paths.thumbnail ?? ""}
+        loading="lazy"
+        className="gallery-image"
+        alt={file.title ?? index.toString()}
+      />
+    </div>
+  ));
 
   return (
     <div className="gallery">
       <div className="flexbin">{thumbs}</div>
-      <FsLightbox
-        sourceIndex={currentIndex}
-        toggler={lightboxToggle}
-        sources={photos}
-        key={gallery.id!}
-      />
     </div>
   );
 };