Merged in chore/move-use-scroll-to-top (pull request #2705)

chore: Move useScrollToTop to common package

* Move useScrollToTop to common package


Approved-by: Joakim Jäderberg

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

@@ -4,6 +4,7 @@ import { useRef } from "react"
 import { useIntl } from "react-intl"
 
 import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
+import { useScrollToTop } from "@scandic-hotels/common/hooks/useScrollToTop"
 import { Alert } from "@scandic-hotels/design-system/Alert"
 import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -11,7 +12,6 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
 import { useDestinationDataStore } from "@/stores/destination-data"
 
 import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
-import { useScrollToTop } from "@/hooks/useScrollToTop"
 
 import CityListingItem from "./CityListingItem"
 import CityListingSkeleton from "./CityListingSkeleton"

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

@@ -6,6 +6,7 @@ import { useEffect, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 
 import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
+import { useScrollToTop } from "@scandic-hotels/common/hooks/useScrollToTop"
 import { Alert } from "@scandic-hotels/design-system/Alert"
 import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -15,7 +16,6 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
 import { useDestinationDataStore } from "@/stores/destination-data"
 
 import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
-import { useScrollToTop } from "@/hooks/useScrollToTop"
 
 import HotelListingItem from "./HotelListingItem"
 import HotelListingSkeleton from "./HotelListingSkeleton"

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

@@ -11,6 +11,7 @@ import {
 } from "react"
 import { useIntl } from "react-intl"
 
+import { useScrollToTop } from "@scandic-hotels/common/hooks/useScrollToTop"
 import { debounce } from "@scandic-hotels/common/utils/debounce"
 import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -20,7 +21,6 @@ import { useDestinationDataStore } from "@/stores/destination-data"
 import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
 
 import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
-import { useScrollToTop } from "@/hooks/useScrollToTop"
 
 import DynamicMap from "./DynamicMap"
 import MapContent from "./MapContent"

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

@@ -13,6 +13,7 @@ import {
   alternativeHotelsMap,
   selectHotelMap,
 } from "@scandic-hotels/common/constants/routes/hotelReservation"
+import { useScrollToTop } from "@scandic-hotels/common/hooks/useScrollToTop"
 import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
 import { HotelCard } from "@scandic-hotels/design-system/HotelCard"
 
@@ -21,7 +22,6 @@ import { useHotelsMapStore } from "@/stores/hotels-map"
 
 import HotelDetailsSidePeek from "@/components/SidePeeks/HotelDetailsSidePeek"
 import useLang from "@/hooks/useLang"
-import { useScrollToTop } from "@/hooks/useScrollToTop"
 import { isValidClientSession } from "@/utils/clientSession"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 

apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx

@@ -14,6 +14,7 @@ import {
   alternativeHotels,
   selectHotel,
 } from "@scandic-hotels/common/constants/routes/hotelReservation"
+import { useScrollToTop } from "@scandic-hotels/common/hooks/useScrollToTop"
 import { debounce } from "@scandic-hotels/common/utils/debounce"
 import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
 import { Button } from "@scandic-hotels/design-system/Button"
@@ -28,7 +29,6 @@ import { useHotelsMapStore } from "@/stores/hotels-map"
 import { RoomCardSkeleton } from "@/components/HotelReservation/RoomCardSkeleton/RoomCardSkeleton"
 import { useIsUserLoggedIn } from "@/hooks/useIsUserLoggedIn"
 import useLang from "@/hooks/useLang"
-import { useScrollToTop } from "@/hooks/useScrollToTop"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 import { trackEvent } from "@/utils/tracking/base"
 

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/BookingCodeFilter/index.tsx

@@ -13,11 +13,11 @@ import {
 import { useIntl } from "react-intl"
 
 import { BookingCodeFilterEnum } from "@scandic-hotels/booking-flow/stores/bookingCode-filter"
+import { RateTypeEnum } from "@scandic-hotels/common/constants/rateType"
 import { ChipButton } from "@scandic-hotels/design-system/ChipButton"
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
-import { RateTypeEnum } from "@scandic-hotels/common/constants/rateType"
 
 import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
 import { useBreakpoint } from "@/hooks/useBreakpoint"

apps/scandic-web/hooks/useScrollToTop.ts

@@ -1,46 +0,0 @@
-import { type RefObject, useEffect, useState } from "react"
-
-interface UseScrollToTopProps {
-  threshold: number
-  elementRef?: RefObject<HTMLElement | null>
-  refScrollable?: boolean
-}
-
-export function useScrollToTop({
-  threshold,
-  elementRef,
-  refScrollable,
-}: UseScrollToTopProps) {
-  const [showBackToTop, setShowBackToTop] = useState(false)
-
-  useEffect(() => {
-    const element =
-      refScrollable && elementRef?.current ? elementRef?.current : window
-
-    function handleScroll() {
-      let position = window.scrollY
-      if (elementRef?.current) {
-        position = refScrollable
-          ? elementRef.current.scrollTop
-          : elementRef.current.getBoundingClientRect().top * -1
-      }
-      setShowBackToTop(position > threshold)
-    }
-
-    element.addEventListener("scroll", handleScroll, { passive: true })
-    return () => element.removeEventListener("scroll", handleScroll)
-  }, [threshold, elementRef, refScrollable])
-
-  function scrollToTop() {
-    if (elementRef?.current) {
-      if (refScrollable) {
-        elementRef.current.scrollTo({ top: 0, behavior: "smooth" })
-      }
-      window.scrollTo({ top: elementRef.current.offsetTop, behavior: "smooth" })
-    } else {
-      window.scrollTo({ top: 0, behavior: "smooth" })
-    }
-  }
-
-  return { showBackToTop, scrollToTop }
-}