fix(SW-1960): Changes to how we handle hash inside hotelpages after Next15 upgrade

Approved-by: Michael Zetterberg
Approved-by: Linus Flood

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

@@ -3,13 +3,19 @@
 import { cx } from "class-variance-authority"
 import NextLink from "next/link"
 import { useRouter } from "next/navigation"
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react"
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
 
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { StickyElementNameEnum } from "@/stores/sticky-position"
 
-import useHash from "@/hooks/useHash"
 import useScrollShadows from "@/hooks/useScrollShadows"
 import useScrollSpy from "@/hooks/useScrollSpy"
 import useStickyPosition from "@/hooks/useStickyPosition"
@@ -25,7 +31,7 @@ interface TabNavigationProps {
 }
 
 export default function TabNavigation({ pageSections }: TabNavigationProps) {
-  const activeHash = useHash()
+  const [activeHash, setActiveHash] = useState<string>()
   const router = useRouter()
   const tabNavigationRef = useRef<HTMLDivElement>(null)
   const tabRefs = useMemo(() => new Map<string, HTMLAnchorElement>(), [])
@@ -80,6 +86,7 @@ export default function TabNavigation({ pageSections }: TabNavigationProps) {
   useEffect(() => {
     if (activeSectionId) {
       router.replace(`#${activeSectionId}`, { scroll: false })
+      setActiveHash(activeSectionId)
     }
   }, [activeSectionId, router])
 
@@ -117,6 +124,7 @@ export default function TabNavigation({ pageSections }: TabNavigationProps) {
                 }}
                 onClick={() => {
                   pauseScrollSpy()
+                  setActiveHash(hash)
                   trackHotelTabClick(heading)
                 }}
               >

apps/scandic-web/hooks/useHash.tsx

@@ -1,15 +0,0 @@
-"use client"
-
-import { useParams } from "next/navigation"
-import { useEffect, useState } from "react"
-
-export default function useHash() {
-  const [hash, setHash] = useState<string | undefined>(undefined)
-  const params = useParams()
-
-  useEffect(() => {
-    setHash(window.location.hash)
-  }, [params])
-
-  return hash?.slice(1)
-}