Merged in fix/SW-2831-image-gallery-history (pull request #2155)

fix(SW-2831): checking isOpen before rendering Lightbox component to avoid spamming the window history

* fix(SW-2831): checking isOpen before rendering Lightbox component to avoid spamming the window history


Approved-by: Linus Flood

apps/scandic-web/components/ContentType/DestinationPage/TopImages/index.tsx

@@ -69,6 +69,7 @@ export default function TopImages({ images, destinationName }: TopImageProps) {
               defaultMessage: "See all photos",
             })}
           </Button>
+          {lightboxState.open ? (
             <Lightbox
               images={lightboxImages}
               dialogTitle={intl.formatMessage(
@@ -77,10 +78,10 @@ export default function TopImages({ images, destinationName }: TopImageProps) {
                 },
                 { title: destinationName }
               )}
-            isOpen={lightboxState.open}
               activeIndex={lightboxState.activeIndex}
               onClose={() => setLightboxState({ open: false, activeIndex: 0 })}
             />
+          ) : null}
         </>
       )}
     </div>

apps/scandic-web/components/ContentType/HotelPage/PreviewImages/index.tsx

@@ -71,6 +71,7 @@ export default function PreviewImages({
               defaultMessage: "See all photos",
             })}
           </Button>
+          {lightboxState.isOpen ? (
             <Lightbox
               images={lightboxImages}
               dialogTitle={intl.formatMessage(
@@ -79,10 +80,12 @@ export default function PreviewImages({
                 },
                 { title: hotelName }
               )}
-            isOpen={lightboxState.isOpen}
               activeIndex={lightboxState.activeIndex}
-            onClose={() => setLightboxState({ activeIndex: 0, isOpen: false })}
+              onClose={() =>
+                setLightboxState({ activeIndex: 0, isOpen: false })
+              }
             />
+          ) : null}
         </>
       )}
     </div>

apps/scandic-web/components/ImageGallery/index.tsx

@@ -58,13 +58,14 @@ function ImageGallery({
           })}
         />
       </div>
+      {isOpen ? (
         <Lightbox
           images={images}
           dialogTitle={title}
-        isOpen={isOpen}
           onClose={() => setIsOpen(false)}
           hideLabel={hideLabel}
         />
+      ) : null}
     </>
   )
 }

apps/scandic-web/components/Lightbox/index.tsx

@@ -14,19 +14,12 @@ export default function Lightbox({
   images,
   dialogTitle,
   onClose,
-  isOpen,
   activeIndex = 0,
   hideLabel,
 }: LightboxProps) {
   const [selectedImageIndex, setSelectedImageIndex] = useState(activeIndex)
   const [isFullView, setIsFullView] = useState(false)
 
-  useEffect(() => {
-    if (isOpen) {
-      setIsFullView(false)
-    }
-  }, [isOpen])
-
   useEffect(() => {
     setSelectedImageIndex(activeIndex)
   }, [activeIndex])
@@ -62,7 +55,7 @@ export default function Lightbox({
 
   return (
     <ModalOverlay
-      isOpen={isOpen}
+      isOpen={true}
       onOpenChange={handleClose}
       className={styles.overlay}
       isDismissable
@@ -70,7 +63,6 @@ export default function Lightbox({
       <Modal>
         <AnimatePresence>
           <Dialog aria-label={dialogTitle}>
-            {isOpen && (
             <motion.div
               className={`${styles.content} ${
                 isFullView ? styles.fullViewContent : styles.galleryContent
@@ -105,7 +97,6 @@ export default function Lightbox({
                 />
               )}
             </motion.div>
-            )}
           </Dialog>
         </AnimatePresence>
       </Modal>

apps/scandic-web/types/components/lightbox/lightbox.ts

@@ -4,7 +4,6 @@ export interface LightboxProps {
   images: GalleryImage[]
   dialogTitle: string /* Accessible title for dialog screen readers */
   onClose: () => void
-  isOpen: boolean
   activeIndex?: number
   hideLabel?: boolean
 }