From 59d12418ffbeef4d84820fcba3314fef65ca896b Mon Sep 17 00:00:00 2001
From: Stefan Forstenlechner <stefan@forstenlechner.dev>
Date: Mon, 12 Aug 2024 23:41:51 +0200
Subject: [PATCH] replace react-photo-album with mui image list

---
 picture-gallery-client/package.json           |  1 -
 .../src/ImageGallery/ImageGallery.tsx         | 30 ++++++++-----------
 .../src/ImageGallery/models.ts                |  4 +--
 3 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/picture-gallery-client/package.json b/picture-gallery-client/package.json
index 28023eb..66c1d33 100644
--- a/picture-gallery-client/package.json
+++ b/picture-gallery-client/package.json
@@ -40,7 +40,6 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-photo-album": "^3.0.1",
     "react-router-dom": "^6.26.0",
     "typescript": "^5.5.4",
     "web-vitals": "^4.2.3",
diff --git a/picture-gallery-client/src/ImageGallery/ImageGallery.tsx b/picture-gallery-client/src/ImageGallery/ImageGallery.tsx
index 3ae3f19..c925ae2 100644
--- a/picture-gallery-client/src/ImageGallery/ImageGallery.tsx
+++ b/picture-gallery-client/src/ImageGallery/ImageGallery.tsx
@@ -1,4 +1,3 @@
-import PhotoAlbum from "react-photo-album";
 import React, { useState } from "react";
 import { ImageWithThumbnail } from "./models";
 import { Lightbox } from "yet-another-react-lightbox";
@@ -9,6 +8,7 @@ import Slideshow from "yet-another-react-lightbox/plugins/slideshow";
 import Thumbnails from "yet-another-react-lightbox/plugins/thumbnails";
 import "yet-another-react-lightbox/plugins/thumbnails.css";
 import Zoom from "yet-another-react-lightbox/plugins/zoom";
+import { ImageList, ImageListItem } from "@mui/material";
 
 function ImageGallery({ images }: { images: ImageWithThumbnail[] }) {
   const [index, setIndex] = useState(-1);
@@ -21,25 +21,19 @@ function ImageGallery({ images }: { images: ImageWithThumbnail[] }) {
     );
   }
 
-  //  For all kind of settings see:
-  // https://react-photo-album.com/examples/playground
-  // https://codesandbox.io/s/github/igordanchenko/react-photo-album/tree/main/examples/playground
   return (
     <>
-      <PhotoAlbum
-        layout="masonry"
-        photos={images}
-        componentsProps={{
-          image: {
-            loading: "lazy",
-          },
-        }}
-        onClick={(props) => {
-          // TODO: what is eslint complaining?
-          // eslint-disable-next-line react/prop-types
-          setIndex(props.index);
-        }}
-      />
+      <ImageList variant="masonry" cols={3} gap={8}>
+        {images.map((item, index) => (
+          <ImageListItem key={item.thumbnail}>
+            <img
+              src={item.thumbnail}
+              loading="lazy"
+              onClick={() => setIndex(index)}
+            />
+          </ImageListItem>
+        ))}
+      </ImageList>
       <Lightbox
         slides={images}
         open={index >= 0}
diff --git a/picture-gallery-client/src/ImageGallery/models.ts b/picture-gallery-client/src/ImageGallery/models.ts
index c5c5d7c..09d8e09 100644
--- a/picture-gallery-client/src/ImageGallery/models.ts
+++ b/picture-gallery-client/src/ImageGallery/models.ts
@@ -1,4 +1,4 @@
-import { Photo } from "react-photo-album";
+import { Slide } from "yet-another-react-lightbox";
 
 export interface Folders {
   name: string;
@@ -7,6 +7,6 @@ export interface Folders {
   children: Folders[];
 }
 
-export interface ImageWithThumbnail extends Photo {
+export interface ImageWithThumbnail extends Slide {
   thumbnail: string;
 }