Merged in feat/SW-2800-lightbox-history-state (pull request #2147)

feat(SW-2800): closing image gallery and lightbox on using browser navigation

* feat(SW-2800): closing image gallery and lightbox on using browser navigation


Approved-by: Linus Flood

apps/scandic-web/components/HotelReservation/SidePeek/index.tsx

@@ -37,10 +37,6 @@ export default function HotelReservationSidePeek() {
     room.roomTypes.some((type) => type.code === roomTypeCode)
   )
 
-  function handleCloseClick() {
-    window.history.back()
-  }
-
   useEffect(() => {
     if (activeSidePeek) {
       window.history.pushState(null, "", window.location.href)
@@ -71,7 +67,7 @@ export default function HotelReservationSidePeek() {
               hotel={{ ...hotelData.hotel, url: hotelData.url }}
               restaurants={hotelData.restaurants}
               activeSidePeek={activeSidePeek}
-              close={handleCloseClick}
+              close={closeFn}
               showCTA={showCTA}
             />
             <AmenitiesSidePeek
@@ -79,7 +75,7 @@ export default function HotelReservationSidePeek() {
               restaurants={hotelData.restaurants}
               additionalHotelData={hotelData.additionalData}
               activeSidePeek={activeSidePeek}
-              close={handleCloseClick}
+              close={closeFn}
             />
           </>
         )}
@@ -87,7 +83,7 @@ export default function HotelReservationSidePeek() {
           <RoomSidePeek
             room={selectedRoom}
             activeSidePeek={activeSidePeek}
-            close={handleCloseClick}
+            close={closeFn}
           />
         )}
       </>

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

@@ -24,7 +24,7 @@ function ImageGallery({
   hideLabel,
 }: ImageGalleryProps) {
   const intl = useIntl()
-  const [lightboxIsOpen, setLightboxIsOpen] = useState(false)
+  const [isOpen, setIsOpen] = useState(false)
   const [imageError, setImageError] = useState(false)
   const imageProps = fill ? { fill, sizes } : { height, width: height * 1.5 }
 
@@ -52,7 +52,7 @@ function ImageGallery({
         </Typography>
         <Button
           className={styles.triggerArea}
-          onPress={() => setLightboxIsOpen(true)}
+          onPress={() => setIsOpen(true)}
           aria-label={intl.formatMessage({
             defaultMessage: "Open image gallery",
           })}
@@ -61,8 +61,8 @@ function ImageGallery({
       <Lightbox
         images={images}
         dialogTitle={title}
-        isOpen={lightboxIsOpen}
+        isOpen={isOpen}
-        onClose={() => setLightboxIsOpen(false)}
+        onClose={() => setIsOpen(false)}
         hideLabel={hideLabel}
       />
     </>

apps/scandic-web/components/Lightbox/Gallery/gallery.module.css

@@ -53,6 +53,10 @@
     display: none;
   }
 
+  .galleryContainer {
+    align-content: start;
+  }
+
   .closeButton {
     justify-self: start;
   }

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

@@ -46,6 +46,20 @@ export default function Lightbox({
     )
   }
 
+  useEffect(() => {
+    function handlePopState() {
+      handleClose()
+    }
+
+    window.history.pushState(null, "", window.location.href)
+    window.addEventListener("popstate", handlePopState)
+
+    return () => {
+      window.removeEventListener("popstate", handlePopState)
+    }
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+  }, [])
+
   return (
     <ModalOverlay
       isOpen={isOpen}
@@ -79,7 +93,7 @@ export default function Lightbox({
                 ) : (
                   <Gallery
                     images={images}
-                    onClose={onClose}
+                    onClose={handleClose}
                     onSelectImage={(image) => {
                       setSelectedImageIndex(
                         images.findIndex((img) => img === image)