fix: return to qr view on profile modal when exiting the lightbox

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

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');

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
+            <IconButton type="close" onClick={handleClose} />
-              type="close"
-              onClick={() => {
-                dispatch(updateLightBoxOptions(null));
-              }}
-            />
           </Flex>
 
           {onSave ? <IconButton type="save" onClick={onSave} style={styles.saveButton} /> : null}

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}