Merged in fix/SW-1168-list-correct-hotels-for-map (pull request #1076)

fix(SW-1168) Show only hotel cards that are visible on map

Approved-by: Michael Zetterberg

components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx

@@ -0,0 +1,179 @@
+"use client"
+import { useMap } from "@vis.gl/react-google-maps"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { useIntl } from "react-intl"
+import { useMediaQuery } from "usehooks-ts"
+
+import { selectHotel } from "@/constants/routes/hotelReservation"
+import { useHotelFilterStore } from "@/stores/hotel-filters"
+import { useHotelsMapStore } from "@/stores/hotels-map"
+
+import { RoomCardSkeleton } from "@/components/HotelReservation/SelectRate/RoomSelection/RoomCard/RoomCardSkeleton"
+import { CloseIcon, CloseLargeIcon } from "@/components/Icons"
+import InteractiveMap from "@/components/Maps/InteractiveMap"
+import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+import useLang from "@/hooks/useLang"
+import { debounce } from "@/utils/debounce"
+
+import FilterAndSortModal from "../../FilterAndSortModal"
+import HotelListing from "../HotelListing"
+import { getVisibleHotels } from "./utils"
+
+import styles from "./selectHotelMapContent.module.css"
+
+import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
+import type { SelectHotelMapProps } from "@/types/components/hotelReservation/selectHotel/map"
+
+const SKELETON_LOAD_DELAY = 750
+
+export default function SelectHotelContent({
+  hotelPins,
+  cityCoordinates,
+  mapId,
+  hotels,
+  filterList,
+}: Omit<SelectHotelMapProps, "apiKey">) {
+  const lang = useLang()
+  const intl = useIntl()
+  const map = useMap()
+
+  const isAboveMobile = useMediaQuery("(min-width: 768px)")
+  const [visibleHotels, setVisibleHotels] = useState<HotelData[]>([])
+  const [showBackToTop, setShowBackToTop] = useState<boolean>(false)
+  const [showSkeleton, setShowSkeleton] = useState<boolean>(false)
+  const listingContainerRef = useRef<HTMLDivElement | null>(null)
+
+  const activeFilters = useHotelFilterStore((state) => state.activeFilters)
+  const { activeHotelCard, activeHotelPin } = useHotelsMapStore()
+
+  const coordinates = useMemo(
+    () =>
+      isAboveMobile
+        ? cityCoordinates
+        : { ...cityCoordinates, lat: cityCoordinates.lat - 0.006 },
+    [isAboveMobile, cityCoordinates]
+  )
+
+  useEffect(() => {
+    if (listingContainerRef.current) {
+      const activeElement =
+        listingContainerRef.current.querySelector(`[data-active="true"]`)
+      if (activeElement) {
+        activeElement.scrollIntoView({ behavior: "smooth", block: "nearest" })
+      }
+    }
+  }, [activeHotelCard, activeHotelPin])
+
+  useEffect(() => {
+    const hotelListingElement = document.querySelector(
+      `.${styles.listingContainer}`
+    )
+    if (!hotelListingElement) return
+
+    const handleScroll = () => {
+      const hasScrolledPast = hotelListingElement.scrollTop > 490
+      setShowBackToTop(hasScrolledPast)
+    }
+
+    hotelListingElement.addEventListener("scroll", handleScroll)
+    return () => hotelListingElement.removeEventListener("scroll", handleScroll)
+  }, [])
+
+  function scrollToTop() {
+    const hotelListingElement = document.querySelector(
+      `.${styles.listingContainer}`
+    )
+    hotelListingElement?.scrollTo({ top: 0, behavior: "smooth" })
+  }
+
+  const filteredHotelPins = useMemo(
+    () =>
+      hotelPins.filter((hotel) =>
+        activeFilters.every((filterId) =>
+          hotel.facilityIds.includes(Number(filterId))
+        )
+      ),
+    [activeFilters, hotelPins]
+  )
+
+  const getHotelCards = useCallback(() => {
+    const visibleHotels = getVisibleHotels(hotels, filteredHotelPins, map)
+    setVisibleHotels(visibleHotels)
+    setTimeout(() => {
+      setShowSkeleton(true)
+    }, SKELETON_LOAD_DELAY)
+  }, [hotels, filteredHotelPins, map])
+
+  /**
+   * Updates visible hotels when map viewport changes (zoom/pan)
+   * - Debounces updates to prevent excessive re-renders during map interaction
+   * - Shows loading skeleton while map tiles load
+   * - Triggers on: initial load, zoom, pan, and tile loading completion
+   */
+  const debouncedUpdateHotelCards = useMemo(
+    () =>
+      debounce(() => {
+        if (!map) return
+        setShowSkeleton(false)
+        getHotelCards()
+      }, 100),
+    [map, getHotelCards]
+  )
+
+  const closeButton = (
+    <Button
+      intent="inverted"
+      size="small"
+      theme="base"
+      className={styles.closeButton}
+      asChild
+    >
+      <Link href={selectHotel(lang)} keepSearchParams>
+        <CloseIcon color="burgundy" />
+        {intl.formatMessage({ id: "Close the map" })}
+      </Link>
+    </Button>
+  )
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.listingContainer} ref={listingContainerRef}>
+        <div className={styles.filterContainer}>
+          <Button
+            intent="text"
+            size="small"
+            variant="icon"
+            wrapping
+            className={styles.filterContainerCloseButton}
+            asChild
+          >
+            <Link href={selectHotel(lang)} keepSearchParams>
+              <CloseLargeIcon />
+            </Link>
+          </Button>
+          <FilterAndSortModal filters={filterList} />
+        </div>
+        {showSkeleton ? (
+          <>
+            <RoomCardSkeleton />
+            <RoomCardSkeleton />
+          </>
+        ) : (
+          <HotelListing hotels={visibleHotels} />
+        )}
+        {showBackToTop && (
+          <BackToTopButton position="left" onClick={scrollToTop} />
+        )}
+      </div>
+      <InteractiveMap
+        closeButton={closeButton}
+        coordinates={coordinates}
+        hotelPins={filteredHotelPins}
+        mapId={mapId}
+        onTilesLoaded={debouncedUpdateHotelCards}
+      />
+    </div>
+  )
+}

components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css

@@ -36,6 +36,7 @@
     padding: var(--Spacing-x3) var(--Spacing-x4);
     overflow-y: auto;
     min-width: 420px;
+    width: 420px;
     position: relative;
   }
   .container {

components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/utils.ts

@@ -0,0 +1,29 @@
+import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
+import type { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
+
+export function getVisibleHotelPins(
+  map: google.maps.Map | null,
+  filteredHotelPins: HotelPin[]
+) {
+  if (!map || !filteredHotelPins) return []
+
+  const bounds = map.getBounds()
+  if (!bounds) return []
+
+  return filteredHotelPins.filter((pin) => {
+    const { lat, lng } = pin.coordinates
+    return bounds.contains({ lat, lng })
+  })
+}
+
+export function getVisibleHotels(
+  hotels: HotelData[],
+  filteredHotelPins: HotelPin[],
+  map: google.maps.Map | null
+) {
+  const visibleHotelPins = getVisibleHotelPins(map, filteredHotelPins)
+  const visibleHotels = hotels.filter((hotel) =>
+    visibleHotelPins.some((pin) => pin.operaId === hotel.hotelData.operaId)
+  )
+  return visibleHotels
+}

components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx

@@ -1,25 +1,8 @@
 "use client"
 
 import { APIProvider } from "@vis.gl/react-google-maps"
-import { useEffect, useMemo, useRef, useState } from "react"
-import { useIntl } from "react-intl"
-import { useMediaQuery } from "usehooks-ts"
 
-import { selectHotel } from "@/constants/routes/hotelReservation"
+import SelectHotelMapContent from "./SelectHotelMapContent"
-import { useHotelFilterStore } from "@/stores/hotel-filters"
-import { useHotelsMapStore } from "@/stores/hotels-map"
-
-import { CloseIcon, CloseLargeIcon } from "@/components/Icons"
-import InteractiveMap from "@/components/Maps/InteractiveMap"
-import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
-import Button from "@/components/TempDesignSystem/Button"
-import Link from "@/components/TempDesignSystem/Link"
-import useLang from "@/hooks/useLang"
-
-import FilterAndSortModal from "../FilterAndSortModal"
-import HotelListing from "./HotelListing"
-
-import styles from "./selectHotelMap.module.css"
 
 import type { SelectHotelMapProps } from "@/types/components/hotelReservation/selectHotel/map"
 
@@ -31,105 +14,15 @@ export default function SelectHotelMap({
   filterList,
   cityCoordinates,
 }: SelectHotelMapProps) {
-  const lang = useLang()
-  const intl = useIntl()
-  const isAboveMobile = useMediaQuery("(min-width: 768px)")
-  const [showBackToTop, setShowBackToTop] = useState<boolean>(false)
-  const listingContainerRef = useRef<HTMLDivElement | null>(null)
-  const activeFilters = useHotelFilterStore((state) => state.activeFilters)
-  const { activeHotelCard, activeHotelPin } = useHotelsMapStore()
-
-  const coordinates = isAboveMobile
-    ? cityCoordinates
-    : { ...cityCoordinates, lat: cityCoordinates.lat - 0.006 }
-
-  useEffect(() => {
-    if (listingContainerRef.current) {
-      const activeElement =
-        listingContainerRef.current.querySelector(`[data-active="true"]`)
-      if (activeElement) {
-        activeElement.scrollIntoView({ behavior: "smooth", block: "nearest" })
-      }
-    }
-  }, [activeHotelCard, activeHotelPin])
-
-  useEffect(() => {
-    const hotelListingElement = document.querySelector(
-      `.${styles.listingContainer}`
-    )
-    if (!hotelListingElement) return
-
-    const handleScroll = () => {
-      const hasScrolledPast = hotelListingElement.scrollTop > 490
-      setShowBackToTop(hasScrolledPast)
-    }
-
-    hotelListingElement.addEventListener("scroll", handleScroll)
-    return () => hotelListingElement.removeEventListener("scroll", handleScroll)
-  }, [])
-
-  function scrollToTop() {
-    const hotelListingElement = document.querySelector(
-      `.${styles.listingContainer}`
-    )
-    hotelListingElement?.scrollTo({ top: 0, behavior: "smooth" })
-  }
-
-  const filteredHotelPins = useMemo(
-    () =>
-      hotelPins.filter((hotel) =>
-        activeFilters.every((filterId) =>
-          hotel.facilityIds.includes(Number(filterId))
-        )
-      ),
-    [activeFilters, hotelPins]
-  )
-
-  const closeButton = (
-    <Button
-      intent="inverted"
-      size="small"
-      theme="base"
-      className={styles.closeButton}
-      asChild
-    >
-      <Link href={selectHotel(lang)} keepSearchParams>
-        <CloseIcon color="burgundy" />
-        {intl.formatMessage({ id: "Close the map" })}
-      </Link>
-    </Button>
-  )
   return (
     <APIProvider apiKey={apiKey}>
-      <div className={styles.container}>
+      <SelectHotelMapContent
-        <div className={styles.listingContainer} ref={listingContainerRef}>
+        hotelPins={hotelPins}
-          <div className={styles.filterContainer}>
+        cityCoordinates={cityCoordinates}
-            <Button
+        mapId={mapId}
-              intent="text"
+        hotels={hotels}
-              size="small"
+        filterList={filterList}
-              variant="icon"
+      />
-              wrapping
-              className={styles.filterContainerCloseButton}
-              asChild
-            >
-              <Link href={selectHotel(lang)} keepSearchParams>
-                <CloseLargeIcon />
-              </Link>
-            </Button>
-            <FilterAndSortModal filters={filterList} />
-          </div>
-          <HotelListing hotels={hotels} />
-          {showBackToTop && (
-            <BackToTopButton position="left" onClick={scrollToTop} />
-          )}
-        </div>
-        <InteractiveMap
-          closeButton={closeButton}
-          coordinates={coordinates}
-          hotelPins={filteredHotelPins}
-          mapId={mapId}
-        />
-      </div>
     </APIProvider>
   )
 }

components/Maps/InteractiveMap/index.tsx

@@ -19,6 +19,7 @@ export default function InteractiveMap({
   hotelPins,
   mapId,
   closeButton,
+  onTilesLoaded,
   onActivePoiChange,
 }: InteractiveMapProps) {
   const intl = useIntl()
@@ -47,7 +48,7 @@ export default function InteractiveMap({
 
   return (
     <div className={styles.mapContainer}>
-      <Map {...mapOptions}>
+      <Map {...mapOptions} onTilesLoaded={onTilesLoaded}>
         {hotelPins && <HotelListingMapContent hotelPins={hotelPins} />}
         {pointsOfInterest && (
           <HotelMapContent

types/components/hotelPage/map/interactiveMap.ts

@@ -1,8 +1,6 @@
-import { ReactElement } from "react"
+import type { ReactElement } from "react"
-
-import { HotelData } from "../../hotelReservation/selectHotel/hotelCardListingProps"
-import { HotelPin } from "../../hotelReservation/selectHotel/map"
 
+import type { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
 import type { Coordinates } from "@/types/components/maps/coordinates"
 import type { PointOfInterest } from "@/types/hotel"
 
@@ -13,5 +11,6 @@ export interface InteractiveMapProps {
   hotelPins?: HotelPin[]
   mapId: string
   closeButton: ReactElement
+  onTilesLoaded?: () => void
   onActivePoiChange?: (poi: PointOfInterest["name"] | null) => void
 }