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

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 { 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 SelectHotelContent from "./SelectHotelMapContent"
 
 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}>
-        <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>
-          <HotelListing hotels={hotels} />
-          {showBackToTop && (
-            <BackToTopButton position="left" onClick={scrollToTop} />
-          )}
-        </div>
-        <InteractiveMap
-          closeButton={closeButton}
-          coordinates={coordinates}
-          hotelPins={filteredHotelPins}
-          mapId={mapId}
-        />
-      </div>
+      <SelectHotelContent
+        hotelPins={hotelPins}
+        cityCoordinates={cityCoordinates}
+        mapId={mapId}
+        hotels={hotels}
+        filterList={filterList}
+      />
     </APIProvider>
   )
 }