enhance(carousel): Close carousel on browser back navigation

Author: brymut

components/carousel.js

@@ -114,17 +114,31 @@ function CarouselOverflow ({ originalSrc, rel }) {
 export function CarouselProvider ({ children }) {
   const media = useRef(new Map())
   const showModal = useShowModal()
+  const isCarouselOpenRef = useRef(false)
+  const isOpeningCarouselRef = useRef(false)
+
+  // Helper function to get confirmed entries
+  const getConfirmedEntries = useCallback(() => {
+    return Array.from(media.current.entries())
+      .filter(([, entry]) => entry.confirmed)
+  }, [])
 
   const showCarousel = useCallback(({ src }) => {
     // only show confirmed entries
-    const confirmedEntries = Array.from(media.current.entries())
-      .filter(([, entry]) => entry.confirmed)
+    const confirmedEntries = getConfirmedEntries()
 
+    isCarouselOpenRef.current = true
+    isOpeningCarouselRef.current = false
     showModal((close, setOptions) => {
       return <Carousel close={close} mediaArr={confirmedEntries} src={src} setOptions={setOptions} />
     }, {
       fullScreen: true,
-      overflow: <CarouselOverflow {...media.current.get(src)} />
+      overflow: <CarouselOverflow {...media.current.get(src)} />,
+      hash: 'carousel',
+      onClose: () => {
+        isCarouselOpenRef.current = false
+        isOpeningCarouselRef.current = false
+      }
     })
   }, [showModal])
 
@@ -137,8 +151,18 @@ export function CarouselProvider ({ children }) {
     if (mediaItem) {
       mediaItem.confirmed = true
       media.current.set(src, mediaItem)
+
+      if (typeof window !== 'undefined' && window.location.hash === '#carousel' && !isCarouselOpenRef.current) {
+        if (!isOpeningCarouselRef.current) {
+          const confirmedEntries = getConfirmedEntries()
+          if (confirmedEntries.length >= 1) {
+            isOpeningCarouselRef.current = true
+            showCarousel({ src })
+          }
+        }
+      }
     }
-  }, [])
+  }, [showCarousel])
 
   const removeMedia = useCallback((src) => {
     media.current.delete(src)

components/modal.js

@@ -59,12 +59,22 @@ export default function useModal () {
       return
     }
 
+    const currentHash = window.location.hash
+    if (currentHash) {
+      const hasModalWithHash = modalStack.current.some(
+        modal => modal.options?.hash && `#${modal.options.hash}` === currentHash
+      )
+      if (hasModalWithHash) {
+        window.history.replaceState(window.history.state, '', window.location.pathname + window.location.search)
+      }
+    }
+
     while (modalStack.current.length) {
       getCurrentContent()?.options?.onClose?.()
       modalStack.current.pop()
     }
     forceUpdate()
-  }, [onBack])
+  }, [onBack, getCurrentContent])
 
   const router = useRouter()
   useEffect(() => {
@@ -80,6 +90,21 @@ export default function useModal () {
     return () => router.events.off('routeChangeStart', maybeOnClose)
   }, [router.events, onClose, getCurrentContent])
 
+  useEffect(() => {
+    const handleHashChange = () => {
+      const currentContent = getCurrentContent()
+      if (!currentContent?.options?.hash) return
+
+      const expectedHash = `#${currentContent.options.hash}`
+      if (window.location.hash !== expectedHash) {
+        onClose()
+      }
+    }
+
+    window.addEventListener('hashchange', handleHashChange)
+    return () => window.removeEventListener('hashchange', handleHashChange)
+  }, [onClose, getCurrentContent])
+
   const modal = useMemo(() => {
     if (modalStack.current.length === 0) {
       return null
@@ -116,6 +141,12 @@ export default function useModal () {
   const showModal = useCallback(
     (getContent, options) => {
       document.activeElement?.blur()
+      if (options?.hash) {
+        const newHash = `#${options.hash}`
+        if (window.location.hash !== newHash) {
+          window.history.pushState(window.history.state, '', newHash)
+        }
+      }
       const ref = { node: getContent(onClose, setOptions), options }
       if (options?.replaceModal) {
         modalStack.current = [ref]
@@ -124,7 +155,7 @@ export default function useModal () {
       }
       forceUpdate()
     },
-    [onClose]
+    [onClose, setOptions]
   )
 
   return [modal, showModal]