From 705dcd2429b1f31e622f1299f33767b375e20655 Mon Sep 17 00:00:00 2001
From: Stefan Forstenlechner <stefan@forstenlechner.dev>
Date: Sun, 17 Apr 2022 16:50:35 +0200
Subject: [PATCH] Add Overlay/Backdrop for single images

---
 picture-gallery-client/.eslintrc.json         |  5 +--
 .../src/ImageGallery/Image.tsx                | 35 +++++++++++++++++++
 .../src/ImageGallery/ImageGallery.tsx         |  3 +-
 3 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 picture-gallery-client/src/ImageGallery/Image.tsx

diff --git a/picture-gallery-client/.eslintrc.json b/picture-gallery-client/.eslintrc.json
index 12080d6..b10a31e 100644
--- a/picture-gallery-client/.eslintrc.json
+++ b/picture-gallery-client/.eslintrc.json
@@ -5,8 +5,8 @@
   },
   "extends": [
     "plugin:react/recommended",
-    "airbnb",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "plugin:import/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -41,6 +41,7 @@
         ]
       }
     ],
+    "import/prefer-default-export": "off",
     "no-unused-vars": [
       "error",
       {
diff --git a/picture-gallery-client/src/ImageGallery/Image.tsx b/picture-gallery-client/src/ImageGallery/Image.tsx
new file mode 100644
index 0000000..313c848
--- /dev/null
+++ b/picture-gallery-client/src/ImageGallery/Image.tsx
@@ -0,0 +1,35 @@
+import { PhotoProps, RenderPhoto } from "react-photo-album";
+import React from "react";
+import { Backdrop } from "@mui/material";
+
+export const Image: RenderPhoto = ({
+  imageProps: { alt, style, ...rest },
+}: PhotoProps): JSX.Element => {
+  const [open, setOpen] = React.useState(false);
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const handleToggle = () => {
+    setOpen(!open);
+  };
+
+  return (
+    <>
+      <img
+        alt={alt}
+        style={{
+          ...style,
+        }}
+        {...rest}
+        onClick={handleToggle}
+      />
+      <Backdrop
+        sx={{ color: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        open={open}
+        onClick={handleClose}
+      >
+        <img alt={alt} {...rest} />
+      </Backdrop>
+    </>
+  );
+};
diff --git a/picture-gallery-client/src/ImageGallery/ImageGallery.tsx b/picture-gallery-client/src/ImageGallery/ImageGallery.tsx
index d8d04e8..88ceb76 100644
--- a/picture-gallery-client/src/ImageGallery/ImageGallery.tsx
+++ b/picture-gallery-client/src/ImageGallery/ImageGallery.tsx
@@ -1,5 +1,6 @@
 import PhotoAlbum, { Photo } from "react-photo-album";
 import React from "react";
+import { Image } from "./Image";
 
 function ImageGallery({ images }: { images: Photo[] }) {
   //  For all kind of settings see:
@@ -11,7 +12,7 @@ function ImageGallery({ images }: { images: Photo[] }) {
       No images available. You may want to add images in your root directory.
     </p>
   ) : (
-    <PhotoAlbum layout="masonry" photos={images} />
+    <PhotoAlbum layout="masonry" photos={images} renderPhoto={Image} />
   );
 }