enhance(carousel): Close carousel on browser back navigation

Author: brymut

components/carousel.js

@@ -114,20 +114,39 @@ function CarouselOverflow ({ originalSrc, rel }) {
 export function CarouselProvider ({ children }) {
   const media = useRef(new Map())
   const showModal = useShowModal()
+  const [isCarouselOpen, setIsCarouselOpen] = useState(false)
 
   const showCarousel = useCallback(({ src }) => {
     // only show confirmed entries
     const confirmedEntries = Array.from(media.current.entries())
       .filter(([, entry]) => entry.confirmed)
 
+    setIsCarouselOpen(true)
     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: () => {
+        setIsCarouselOpen(false)
+      }
     })
   }, [showModal])
 
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+
+    if (window.location.hash === '#carousel') {
+      const confirmedEntries = Array.from(media.current.entries())
+        .filter(([, entry]) => entry.confirmed)
+
+      if (confirmedEntries.length > 0) {
+        showCarousel({ src: confirmedEntries[0][0] })
+      }
+    }
+  }, [showCarousel])
+
   const addMedia = useCallback(({ src, originalSrc, rel }) => {
     media.current.set(src, { src, originalSrc, rel, confirmed: false })
   }, [])
@@ -137,8 +156,16 @@ export function CarouselProvider ({ children }) {
     if (mediaItem) {
       mediaItem.confirmed = true
       media.current.set(src, mediaItem)
+
+      if (typeof window !== 'undefined' && window.location.hash === '#carousel' && !isCarouselOpen) {
+        const confirmedEntries = Array.from(media.current.entries())
+          .filter(([, entry]) => entry.confirmed)
+        if (confirmedEntries.length >= 1) {
+          showCarousel({ src })
+        }
+      }
     }
-  }, [])
+  }, [showCarousel, isCarouselOpen])
 
   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]