Merged in fix/SW-1763-clustering-pins-on-filtering-city-map (pull request #1520)

fix/SW-1763 clustering pins on filtering city map

* fix(SW-1763): uncluster when filter is applied

* fix(SW-1763): pass active filters as prop

* fix(SW-1763): change prop type to boolean


Approved-by: Erik Tiekstra

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

@@ -19,6 +19,7 @@ import type {
 
 interface MapContentProps {
   geojson: MarkerGeojson
+  hasActiveFilters?: boolean
 }
 
 // Important this is outside the component to avoid re-creating the object on each render
@@ -29,14 +30,21 @@ const CLUSTER_OPTIONS = {
   maxZoom: 14,
 }
 
-export default function MapContent({ geojson }: MapContentProps) {
+export default function MapContent({
+  geojson,
+  hasActiveFilters,
+}: MapContentProps) {
   const { setClickedHotel, clickedHotel } = useDestinationPageHotelsMapStore()
   const map = useMap()
+
   const { clusters, containedHotels } = useSupercluster<MarkerProperties>(
     geojson,
     CLUSTER_OPTIONS
   )
 
+  // Based on the length of active filters, we decide if should show clusters or individual markers
+  const markerList = hasActiveFilters ? geojson.features : clusters
+
   useEffect(() => {
     map?.addListener("click", () => {
       if (clickedHotel) {
@@ -53,11 +61,11 @@ export default function MapContent({ geojson }: MapContentProps) {
     }
   }
 
-  return clusters.map((feature, idx) => {
+  return markerList.map((feature, idx) => {
     const [lng, lat] = feature.geometry.coordinates
     const clusterProperties = feature.properties as ClusterProperties
     const markerProperties = feature.properties as MarkerProperties
-    const isCluster = clusterProperties.cluster
+    const isCluster = clusterProperties?.cluster
 
     return isCluster ? (
       <ClusterMarker

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

@@ -12,6 +12,8 @@ import {
 import { Dialog, Modal } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { useDestinationDataStore } from "@/stores/destination-data"
+
 import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
 import { ChevronLeftSmallIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
@@ -55,6 +57,12 @@ export default function Map({
 
   const intl = useIntl()
 
+  const { activeFilters } = useDestinationDataStore((state) => ({
+    activeFilters: state.activeFilters,
+  }))
+
+  const hasActiveFilters = activeFilters.length > 0
+
   const markers = getHotelMapMarkers(hotels)
   const geoJson = mapMarkerDataToGeoJson(markers)
   const defaultCoordinates = defaultLocation
@@ -150,7 +158,10 @@ export default function Map({
               defaultCoordinates={defaultCoordinates}
               defaultZoom={defaultZoom}
             >
-              <MapContent geojson={geoJson} />
+              <MapContent
+                geojson={geoJson}
+                hasActiveFilters={hasActiveFilters}
+              />
             </DynamicMap>
           </Dialog>
         </Modal>