From 6e716d7b01f14490280e1b69c34fd56ff67afde2 Mon Sep 17 00:00:00 2001
From: Stepan Usatiuk <stepanusatiuk@gmail.com>
Date: Tue, 19 Apr 2022 19:06:13 +0000
Subject: [PATCH] click on blank space closes image

---
 frontend/src/Photos/Overview.tsx | 19 +++++++++++--------
 frontend/src/Photos/Photo.tsx    | 26 ++++++++++++++------------
 2 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/frontend/src/Photos/Overview.tsx b/frontend/src/Photos/Overview.tsx
index 0349146..eabdf22 100644
--- a/frontend/src/Photos/Overview.tsx
+++ b/frontend/src/Photos/Overview.tsx
@@ -85,13 +85,11 @@ export const OverviewComponent: React.FunctionComponent<
                     );
                     const photosEls = photos.map((photo) => {
                         return (
-                            <>
-                                <PhotoCard
-                                    key={photo.id}
-                                    photo={photo}
-                                    onClick={() => onCardClick(photo.id)}
-                                />
-                            </>
+                            <PhotoCard
+                                key={photo.id}
+                                photo={photo}
+                                onClick={() => onCardClick(photo.id)}
+                            />
                         );
                     });
                     return [
@@ -144,7 +142,12 @@ export const OverviewComponent: React.FunctionComponent<
             >
                 <div id="photoOverlayContainer">
                     <div id="photo">
-                        <Photo id={selectedPhoto} />
+                        <Photo
+                            id={selectedPhoto}
+                            close={() => {
+                                setOverlayOpen(false);
+                            }}
+                        />
                     </div>
                     <div id="photoOverlayDrawer">
                         <Button
diff --git a/frontend/src/Photos/Photo.tsx b/frontend/src/Photos/Photo.tsx
index 0a11e06..bfd5606 100644
--- a/frontend/src/Photos/Photo.tsx
+++ b/frontend/src/Photos/Photo.tsx
@@ -20,22 +20,18 @@ export interface IPhotoComponentProps {
     photoState: IPhotoState | undefined;
 
     fetchPhoto: (id: number) => void;
+    close: () => void;
 }
 
 export const PhotoComponent: React.FunctionComponent<IPhotoComponentProps> = (
     props,
 ) => {
-    const [
-        smallPreviewFetching,
-        setSmallPreviewFetching,
-    ] = React.useState<boolean>(false);
-    const [
-        largePreviewFetching,
-        setLargePreviewFetching,
-    ] = React.useState<boolean>(false);
-    const [originalFetching, setOriginalFetching] = React.useState<boolean>(
-        false,
-    );
+    const [smallPreviewFetching, setSmallPreviewFetching] =
+        React.useState<boolean>(false);
+    const [largePreviewFetching, setLargePreviewFetching] =
+        React.useState<boolean>(false);
+    const [originalFetching, setOriginalFetching] =
+        React.useState<boolean>(false);
 
     const [smallPreview, setSmallPreview] = React.useState<string | null>(null);
     const [largePreview, setLargePreview] = React.useState<string | null>(null);
@@ -97,7 +93,13 @@ export const PhotoComponent: React.FunctionComponent<IPhotoComponentProps> = (
     return (
         <>
             {fileExists ? (
-                <div id="photoView">
+                <div
+                    id="photoView"
+                    onClick={(e: React.MouseEvent) => {
+                        if ((e.target as HTMLElement).tagName !== "IMG")
+                            props.close();
+                    }}
+                >
                     <img
                         ref={imgRef}
                         id="photoImg"