replace react-photo-album with mui image list

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",

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}

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;
 }