From 7f2660e61506401e524dc671c4d5b0145b1cf5b2 Mon Sep 17 00:00:00 2001
From: yougotwill <willmgrant@gmail.com>
Date: Tue, 6 Aug 2024 14:24:17 +1000
Subject: [PATCH] fix: return to qr view on profile modal when exiting the
 lightbox

---
 .../dialog/edit-profile/EditProfileDialog.tsx |  2 +-
 .../dialog/edit-profile/components.tsx        |  2 +-
 ts/components/lightbox/Lightbox.tsx           | 19 +++++++++++--------
 ts/components/lightbox/LightboxGallery.tsx    |  3 ++-
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/ts/components/dialog/edit-profile/EditProfileDialog.tsx b/ts/components/dialog/edit-profile/EditProfileDialog.tsx
index d679b672f..7657c0bb1 100644
--- a/ts/components/dialog/edit-profile/EditProfileDialog.tsx
+++ b/ts/components/dialog/edit-profile/EditProfileDialog.tsx
@@ -352,7 +352,7 @@ export const EditProfileDialog = () => {
           <YourSessionIDSelectable />
           <SessionSpinner loading={loading} height={'74px'} />
           {!loading ? <Spacer2XL /> : null}
-          {mode === 'default' || mode === 'qr' ? (
+          {mode === 'default' || mode === 'qr' || mode === 'lightbox' ? (
             <Flex
               container={true}
               justifyContent={mode === 'default' ? 'space-between' : 'center'}
diff --git a/ts/components/dialog/edit-profile/components.tsx b/ts/components/dialog/edit-profile/components.tsx
index 63adb50f7..08db916b8 100644
--- a/ts/components/dialog/edit-profile/components.tsx
+++ b/ts/components/dialog/edit-profile/components.tsx
@@ -36,7 +36,7 @@ export const QRView = ({
       loading={loading}
       onClick={(fileName, dataUrl) => {
         const lightBoxOptions = prepareQRCodeForLightBox(fileName, dataUrl, () => {
-          setMode('edit');
+          setMode('qr');
         });
         window.inboxStore?.dispatch(updateLightBoxOptions(lightBoxOptions));
         setMode('lightbox');
diff --git a/ts/components/lightbox/Lightbox.tsx b/ts/components/lightbox/Lightbox.tsx
index ad4b261a7..8df6e2c77 100644
--- a/ts/components/lightbox/Lightbox.tsx
+++ b/ts/components/lightbox/Lightbox.tsx
@@ -28,6 +28,7 @@ type Props = {
   onNext?: () => void;
   onPrevious?: () => void;
   onSave?: () => void;
+  onClose?: () => void;
 };
 
 const CONTROLS_WIDTH = 50;
@@ -273,18 +274,25 @@ export const LightboxObject = ({
 export const Lightbox = (props: Props) => {
   const renderedRef = useRef<any>(null);
   const dispatch = useDispatch();
-  const { caption, contentType, objectURL, onNext, onPrevious, onSave } = props;
+  const { caption, contentType, objectURL, onNext, onPrevious, onSave, onClose } = props;
 
   const onObjectClick = (event: any) => {
     event.stopPropagation();
     dispatch(updateLightBoxOptions(null));
   };
 
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    }
+    dispatch(updateLightBoxOptions(null));
+  };
+
   const onContainerClick = (event: MouseEvent<HTMLDivElement>) => {
     if (renderedRef && event.target === renderedRef.current) {
       return;
     }
-    dispatch(updateLightBoxOptions(null));
+    handleClose();
   };
 
   return (
@@ -306,12 +314,7 @@ export const Lightbox = (props: Props) => {
         </div>
         <div style={styles.controls as any}>
           <Flex container={true}>
-            <IconButton
-              type="close"
-              onClick={() => {
-                dispatch(updateLightBoxOptions(null));
-              }}
-            />
+            <IconButton type="close" onClick={handleClose} />
           </Flex>
 
           {onSave ? <IconButton type="save" onClick={onSave} style={styles.saveButton} /> : null}
diff --git a/ts/components/lightbox/LightboxGallery.tsx b/ts/components/lightbox/LightboxGallery.tsx
index e1ab69137..d3c4055bf 100644
--- a/ts/components/lightbox/LightboxGallery.tsx
+++ b/ts/components/lightbox/LightboxGallery.tsx
@@ -96,10 +96,10 @@ export const LightboxGallery = (props: Props) => {
   useKey(
     'Escape',
     () => {
-      dispatch(updateLightBoxOptions(null));
       if (onClose) {
         onClose();
       }
+      dispatch(updateLightBoxOptions(null));
     },
     undefined,
     [currentIndex, updateLightBoxOptions, dispatch, onClose]
@@ -122,6 +122,7 @@ export const LightboxGallery = (props: Props) => {
       onPrevious={hasPrevious ? onPrevious : undefined}
       onNext={hasNext ? onNext : undefined}
       onSave={handleSave}
+      onClose={onClose}
       objectURL={objectURL}
       caption={caption}
       contentType={selectedMedia.contentType}