@abcagency/hc-ui-components 1.3.94 → 1.3.96

package/src/components/containers/maps/map-container.js

@@ -1,351 +1,351 @@
-"use client";
-
-import React, { useEffect, useRef, useState } from "react";
-
-import MapMarker from "~/components/containers/maps/map-marker-container";
-import PlaceMarker from "~/components/modules/maps/place-marker";
-
-import { usePlaces } from "~/contexts/placesContext";
-import { useMap } from "~/contexts/mapContext";
-import { useMapList } from "~/contexts/mapListContext";
-
-import { markerIconSelected, markerIcon, pinIcon } from "~/util/mapIconUtil";
-
-import Map from "~/components/modules/maps/map";
-import { MarkerClustererF, Marker } from "@react-google-maps/api";
-import { clusterOptions } from "~/util/mapUtil";
-
-const MapContainer = ({ markerConfigs, infoWindowClasses, clusterGridSize = 60 }) => {
-	const {
-		location,
-		zoom,
-		center,
-		selectLocationEntity,
-		setLocation,
-		mapInteracted,
-		setMapInteracted,
-		defaultZoomOverride
-	} = useMap();
-
-	const {
-		mapItems: oldMapItems,
-		filteredListings,
-		selectedFilters,
-		setSelectedFilters,
-		setQuery,
-		siteConfig
-	} = useMapList();
-	const [mapItems, setMapItems] = useState(null);
-	const [markersToHideFromBounds, setMarkersToHideFromBounds] = useState([]);
-
-	const mapRef = useRef();
-	const markerRefs = useRef({});
-	const mapContainerRef = useRef(null);
-	const {
-		poiMarkers,
-		setCurrentCenter,
-		currentCenter,
-		setCurrentZoom,
-		currentZoom,
-		selectedPlaceMarker,
-		setSelectedPlaceMarker,
-		placesWindow,
-		setPlacesWindow,
-		additionalMapMarkers
-	} = usePlaces();
-
-	const onIdle = () => {
-		if (!currentCenter || !mapRef.current) return;
-		const newCenter = mapRef.current.getCenter().toJSON();
-		const newZoom = mapRef.current.zoom;
-		setCurrentCenter(newCenter);
-
-		if (newZoom !== currentZoom) {
-			setCurrentZoom(newZoom);
-		}
-	};
-
-	useEffect(() => {
-		if (!oldMapItems || oldMapItems.length === 0) return;
-
-		if (!siteConfig.defaultMapState || mapInteracted || selectedFilters?.state || selectedFilters?.city) {
-			setMapItems(oldMapItems);
-			setMarkersToHideFromBounds([]);
-			return;
-		}
-
-		const markersToHide = oldMapItems
-			.filter(x => x.address.state !== siteConfig.defaultMapState)
-			.map(item => item.id);
-
-		setMarkersToHideFromBounds(markersToHide);
-		setMapItems(oldMapItems);
-	}, [oldMapItems, selectedFilters, siteConfig, mapInteracted]);
-
-	useEffect(() => {
-		if (mapContainerRef.current) {
-			const handleScroll = () => {
-				setMapInteracted(true);
-			};
-			var mapContainerRefCurrent = mapContainerRef.current;
-			mapContainerRef.current.addEventListener("wheel", handleScroll);
-			return () => mapContainerRefCurrent.removeEventListener("wheel", handleScroll);
-		}
-	}, [mapContainerRef.current]);
-
-	useEffect(() => {
-		if (mapRef.current && defaultZoomOverride && !mapInteracted && !location) {
-			mapRef.current.setZoom(defaultZoomOverride);
-		}
-	}, [mapInteracted]);
-
-	useEffect(() => {
-		if (mapRef.current) {
-			const mapInstance = mapRef.current;
-			const dragStartListener = mapInstance.addListener("dragstart", () => {
-				setMapInteracted(true);
-				setMarkersToHideFromBounds([]);
-			});
-			const mouseDownListener = mapInstance.addListener("mousedown", () => {
-				setMapInteracted(true);
-				setMarkersToHideFromBounds([]);
-			});
-			return () => {
-				google.maps.event.removeListener(dragStartListener);
-				google.maps.event.removeListener(mouseDownListener);
-			};
-		}
-	}, [mapRef.current, mapContainerRef.current]);
-
-	useEffect(() => {
-		if (((mapItems && mapItems.length > 0) || poiMarkers.length > 0) && mapRef.current && !mapInteracted) {
-			fitBounds(mapRef.current);
-		}
-	}, [mapItems, mapRef.current, location]);
-
-	useEffect(() => {
-		if (((mapItems && mapItems.length > 0) || poiMarkers.length > 0) && mapRef.current && !mapInteracted) {
-			fitBounds(mapRef.current, true);
-		}
-		if (mapRef.current && !mapInteracted) {
-			const currZoom = mapRef.current.zoom;
-			const setZoomVal = currZoom < 13 ? currZoom : 12;
-			mapRef.current.setZoom(setZoomVal);
-		}
-	}, [filteredListings]);
-
-	useEffect(() => {
-		if (!mapRef.current || !location || mapInteracted) return;
-		mapRef.current.panTo(new google.maps.LatLng(location.latitude, location.longitude));
-		if (mapRef.current) {
-			const setZoomVal = zoom < 13 ? zoom : 12;
-			mapRef.current.setZoom(setZoomVal);
-		}
-	}, [location, zoom, mapRef.current]);
-
-	const fitBounds = (map, overload = false) => {
-		if ((mapInteracted === false || overload) && mapItems != null) {
-			const bounds = new window.google.maps.LatLngBounds();
-
-			mapItems.forEach(item => {
-				if (!mapInteracted && markersToHideFromBounds.includes(item.id)) {
-					return;
-				}
-				bounds.extend(new google.maps.LatLng(item.latitude, item.longitude));
-			});
-
-			if (siteConfig.optionalShowLocationClusterConfig) {
-				const configLocation = new google.maps.LatLng(
-					siteConfig.optionalShowLocationClusterConfig.latitude,
-					siteConfig.optionalShowLocationClusterConfig.longitude
-				);
-				map.panTo(configLocation);
-				bounds.extend(
-					new google.maps.LatLng(
-						siteConfig.optionalShowLocationClusterConfig.latitude,
-						siteConfig.optionalShowLocationClusterConfig.longitude
-					)
-				);
-			}
-			if (!map) return;
-			const currentCenter = map.getCenter();
-			map.fitBounds(bounds);
-			const newCenter = bounds.getCenter();
-			if (currentCenter && newCenter) {
-				map.panTo(newCenter);
-			}
-		}
-		if (defaultZoomOverride && !mapInteracted && !location) {
-			mapRef.current.setZoom(defaultZoomOverride);
-		} else if (mapRef.current.zoom > 17) {
-			mapRef.current.setZoom(16);
-		}
-	};
-
-	const markerClickHandler = mapLocation => {
-		setMapInteracted(true);
-		setMarkersToHideFromBounds([]);
-		selectLocationEntity(mapLocation);
-	};
-
-	const onLoad = map => {
-		if (!location || location === null) {
-			mapRef.current = map;
-			fitBounds(map, true);
-			return;
-		}
-		mapRef.current = map;
-
-		if (mapInteracted === false) {
-			mapRef.current.panTo(new google.maps.LatLng(location.latitude, location.longitude));
-
-			mapRef.current.setZoom(zoom);
-		}
-	};
-
-	const pinIconUrl = pinIcon({
-		fillColor: markerConfigs.fillColor,
-		strokeColor: markerConfigs.strokeColor
-	});
-
-	const onClusterClick = cluster => {
-		if (
-			!siteConfig.optionalShowLocationClusterConfig ||
-      mapRef.current.zoom > siteConfig.optionalShowLocationClusterConfig.showForZoomLevelLessThan
-		) {
-			return;
-		}
-
-		if (!cluster || typeof cluster.getMarkers !== "function") {
-			console.error("Cluster object or getMarkers method not available.");
-			return;
-		}
-
-		const markers = cluster.getMarkers();
-
-		if (!markers || markers.length === 0) {
-			console.error("No markers found in the cluster.");
-			return;
-		}
-
-		setTimeout(() => {
-			const bounds = new window.google.maps.LatLngBounds();
-
-			markers.forEach(marker => {
-				bounds.extend(marker.getPosition());
-			});
-			const clusterCenter = bounds.getCenter();
-
-			const configLat = siteConfig.optionalShowLocationClusterConfig.latitude;
-			const configLng = siteConfig.optionalShowLocationClusterConfig.longitude;
-
-			const latDiff = clusterCenter.lat() - configLat;
-			const lngDiff = clusterCenter.lng() - configLng;
-			const distance = Math.sqrt(latDiff * latDiff + lngDiff * lngDiff);
-
-			const distanceThreshold = 1;
-			if (distance <= distanceThreshold) {
-				bounds.extend(new google.maps.LatLng(configLat, configLng));
-			}
-
-			if (mapRef.current) {
-				mapRef.current.fitBounds(bounds);
-			}
-		}, 300);
-	};
-	if (!mapItems) {
-		return null;
-	}
-	const mapItemsKey = mapItems.map(item => item.id).join("-");
-
-	console.log(location);
-	return (
-		<Map
-			zoom={zoom}
-			center={center}
-			mapContainerRef={mapContainerRef}
-			onLoad={onLoad}
-			onIdle={onIdle}
-			mapInteracted={mapInteracted}
-			pinIconUrl={pinIconUrl}
-			setMapInteracted={setMapInteracted}
-			fitBounds={fitBounds}
-			mapRef={mapRef}
-			setQuery={setQuery}
-			filteredListingsLength={filteredListings.length}
-			setSelectedFilters={setSelectedFilters}
-		>
-			<MarkerClustererF
-				key={mapItemsKey}
-				calculator={markers => {
-					const totalCount = markers.reduce((sum, marker) => sum + (marker.get("count") || 1), 0);
-
-					return {
-						text: totalCount.toString(),
-						index: Math.min(5, Math.floor(totalCount / 10))
-					};
-				}}
-				options={{
-					...clusterOptions(clusterGridSize, markerConfigs.fillColor)
-				}}
-				onClick={onClusterClick}
-			>
-				{clusterer => (
-					<>
-						{mapItems.map(item => {
-							const markerCount = Object.values(item.items).length;
-							return (
-								<MapMarker
-									key={item.id}
-									item={item}
-									selectedLocation={location}
-									markerRefs={markerRefs}
-									infoWindowClasses={infoWindowClasses}
-									setSelectedLocation={setLocation}
-									markerClickHandler={markerClickHandler}
-									clusterer={clusterer}
-									markerIcon={markerIcon(markerConfigs, markerCount)}
-									markerIconSelected={markerIconSelected(markerConfigs, markerCount)}
-									setMapInteracted={setMapInteracted}
-								/>
-							);
-						})}
-
-						{additionalMapMarkers &&
-              additionalMapMarkers.map(
-              	(marker, index) =>
-              		currentZoom >= marker.minZoom &&
-                  currentZoom <= marker.maxZoom && (
-              			<Marker
-              				key={`marker-${marker.title}-${index}`}
-              				position={marker.position}
-              				title={marker.title}
-              				icon={{
-              					url: marker.iconUrl,
-              					scaledSize: new window.google.maps.Size(40, 40)
-              				}}
-              			/>
-              		)
-              )}
-
-						{poiMarkers &&
-              poiMarkers.markers.map((marker, index) => (
-              	<PlaceMarker
-              		key={`marker-${marker.title}-${index}`}
-              		marker={marker}
-              		index={index}
-              		selectedPlaceMarker={selectedPlaceMarker}
-              		placesWindow={placesWindow}
-              		setPlacesWindow={setPlacesWindow}
-              		setSelectedPlaceMarker={setSelectedPlaceMarker}
-              	/>
-              ))}
-					</>
-				)}
-			</MarkerClustererF>
-		</Map>
-	);
-};
-
-export default MapContainer;
-
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+
+import MapMarker from "~/components/containers/maps/map-marker-container";
+import PlaceMarker from "~/components/modules/maps/place-marker";
+
+import { usePlaces } from "~/contexts/placesContext";
+import { useMap } from "~/contexts/mapContext";
+import { useMapList } from "~/contexts/mapListContext";
+
+import { markerIconSelected, markerIcon, pinIcon } from "~/util/mapIconUtil";
+
+import Map from "~/components/modules/maps/map";
+import { MarkerClustererF, Marker } from "@react-google-maps/api";
+import { clusterOptions } from "~/util/mapUtil";
+
+const MapContainer = ({ markerConfigs, infoWindowClasses, clusterGridSize = 60 }) => {
+	const {
+		location,
+		zoom,
+		center,
+		selectLocationEntity,
+		setLocation,
+		mapInteracted,
+		setMapInteracted,
+		defaultZoomOverride
+	} = useMap();
+
+	const {
+		mapItems: oldMapItems,
+		filteredListings,
+		selectedFilters,
+		setSelectedFilters,
+		setQuery,
+		siteConfig
+	} = useMapList();
+	const [mapItems, setMapItems] = useState(null);
+	const [markersToHideFromBounds, setMarkersToHideFromBounds] = useState([]);
+
+	const mapRef = useRef();
+	const markerRefs = useRef({});
+	const mapContainerRef = useRef(null);
+	const {
+		poiMarkers,
+		setCurrentCenter,
+		currentCenter,
+		setCurrentZoom,
+		currentZoom,
+		selectedPlaceMarker,
+		setSelectedPlaceMarker,
+		placesWindow,
+		setPlacesWindow,
+		additionalMapMarkers
+	} = usePlaces();
+
+	const onIdle = () => {
+		if (!currentCenter || !mapRef.current) return;
+		const newCenter = mapRef.current.getCenter().toJSON();
+		const newZoom = mapRef.current.zoom;
+		setCurrentCenter(newCenter);
+
+		if (newZoom !== currentZoom) {
+			setCurrentZoom(newZoom);
+		}
+	};
+
+	useEffect(() => {
+		if (!oldMapItems || oldMapItems.length === 0) return;
+
+		if (!siteConfig.defaultMapState || mapInteracted || selectedFilters?.state || selectedFilters?.city) {
+			setMapItems(oldMapItems);
+			setMarkersToHideFromBounds([]);
+			return;
+		}
+
+		const markersToHide = oldMapItems
+			.filter(x => x.address.state !== siteConfig.defaultMapState)
+			.map(item => item.id);
+
+		setMarkersToHideFromBounds(markersToHide);
+		setMapItems(oldMapItems);
+	}, [oldMapItems, selectedFilters, siteConfig, mapInteracted]);
+
+	useEffect(() => {
+		if (mapContainerRef.current) {
+			const handleScroll = () => {
+				setMapInteracted(true);
+			};
+			var mapContainerRefCurrent = mapContainerRef.current;
+			mapContainerRef.current.addEventListener("wheel", handleScroll);
+			return () => mapContainerRefCurrent.removeEventListener("wheel", handleScroll);
+		}
+	}, [mapContainerRef.current]);
+
+	useEffect(() => {
+		if (mapRef.current && defaultZoomOverride && !mapInteracted && !location) {
+			mapRef.current.setZoom(defaultZoomOverride);
+		}
+	}, [mapInteracted]);
+
+	useEffect(() => {
+		if (mapRef.current) {
+			const mapInstance = mapRef.current;
+			const dragStartListener = mapInstance.addListener("dragstart", () => {
+				setMapInteracted(true);
+				setMarkersToHideFromBounds([]);
+			});
+			const mouseDownListener = mapInstance.addListener("mousedown", () => {
+				setMapInteracted(true);
+				setMarkersToHideFromBounds([]);
+			});
+			return () => {
+				google.maps.event.removeListener(dragStartListener);
+				google.maps.event.removeListener(mouseDownListener);
+			};
+		}
+	}, [mapRef.current, mapContainerRef.current]);
+
+	useEffect(() => {
+		if (((mapItems && mapItems.length > 0) || poiMarkers.length > 0) && mapRef.current && !mapInteracted) {
+			fitBounds(mapRef.current);
+		}
+	}, [mapItems, mapRef.current, location]);
+
+	useEffect(() => {
+		if (((mapItems && mapItems.length > 0) || poiMarkers.length > 0) && mapRef.current && !mapInteracted) {
+			fitBounds(mapRef.current, true);
+		}
+		if (mapRef.current && !mapInteracted) {
+			const currZoom = mapRef.current.zoom;
+			const setZoomVal = currZoom < 13 ? currZoom : 12;
+			mapRef.current.setZoom(setZoomVal);
+		}
+	}, [filteredListings]);
+
+	useEffect(() => {
+		if (!mapRef.current || !location || mapInteracted) return;
+		mapRef.current.panTo(new google.maps.LatLng(location.latitude, location.longitude));
+		if (mapRef.current) {
+			const setZoomVal = zoom < 13 ? zoom : 12;
+			mapRef.current.setZoom(setZoomVal);
+		}
+	}, [location, zoom, mapRef.current]);
+
+	const fitBounds = (map, overload = false) => {
+		if ((mapInteracted === false || overload) && mapItems != null) {
+			const bounds = new window.google.maps.LatLngBounds();
+
+			mapItems.forEach(item => {
+				if (!mapInteracted && markersToHideFromBounds.includes(item.id)) {
+					return;
+				}
+				bounds.extend(new google.maps.LatLng(item.latitude, item.longitude));
+			});
+
+			if (siteConfig.optionalShowLocationClusterConfig) {
+				const configLocation = new google.maps.LatLng(
+					siteConfig.optionalShowLocationClusterConfig.latitude,
+					siteConfig.optionalShowLocationClusterConfig.longitude
+				);
+				map.panTo(configLocation);
+				bounds.extend(
+					new google.maps.LatLng(
+						siteConfig.optionalShowLocationClusterConfig.latitude,
+						siteConfig.optionalShowLocationClusterConfig.longitude
+					)
+				);
+			}
+			if (!map) return;
+			const currentCenter = map.getCenter();
+			map.fitBounds(bounds);
+			const newCenter = bounds.getCenter();
+			if (currentCenter && newCenter) {
+				map.panTo(newCenter);
+			}
+		}
+		if (defaultZoomOverride && !mapInteracted && !location) {
+			mapRef.current.setZoom(defaultZoomOverride);
+		} else if (mapRef.current.zoom > 17) {
+			mapRef.current.setZoom(16);
+		}
+	};
+
+	const markerClickHandler = mapLocation => {
+		setMapInteracted(true);
+		setMarkersToHideFromBounds([]);
+		selectLocationEntity(mapLocation);
+	};
+
+	const onLoad = map => {
+		if (!location || location === null) {
+			mapRef.current = map;
+			fitBounds(map, true);
+			return;
+		}
+		mapRef.current = map;
+
+		if (mapInteracted === false) {
+			mapRef.current.panTo(new google.maps.LatLng(location.latitude, location.longitude));
+
+			mapRef.current.setZoom(zoom);
+		}
+	};
+
+	const pinIconUrl = pinIcon({
+		fillColor: markerConfigs.fillColor,
+		strokeColor: markerConfigs.strokeColor
+	});
+
+	const onClusterClick = cluster => {
+		if (
+			!siteConfig.optionalShowLocationClusterConfig ||
+      mapRef.current.zoom > siteConfig.optionalShowLocationClusterConfig.showForZoomLevelLessThan
+		) {
+			return;
+		}
+
+		if (!cluster || typeof cluster.getMarkers !== "function") {
+			console.error("Cluster object or getMarkers method not available.");
+			return;
+		}
+
+		const markers = cluster.getMarkers();
+
+		if (!markers || markers.length === 0) {
+			console.error("No markers found in the cluster.");
+			return;
+		}
+
+		setTimeout(() => {
+			const bounds = new window.google.maps.LatLngBounds();
+
+			markers.forEach(marker => {
+				bounds.extend(marker.getPosition());
+			});
+			const clusterCenter = bounds.getCenter();
+
+			const configLat = siteConfig.optionalShowLocationClusterConfig.latitude;
+			const configLng = siteConfig.optionalShowLocationClusterConfig.longitude;
+
+			const latDiff = clusterCenter.lat() - configLat;
+			const lngDiff = clusterCenter.lng() - configLng;
+			const distance = Math.sqrt(latDiff * latDiff + lngDiff * lngDiff);
+
+			const distanceThreshold = 1;
+			if (distance <= distanceThreshold) {
+				bounds.extend(new google.maps.LatLng(configLat, configLng));
+			}
+
+			if (mapRef.current) {
+				mapRef.current.fitBounds(bounds);
+			}
+		}, 300);
+	};
+	if (!mapItems) {
+		return null;
+	}
+	const mapItemsKey = mapItems.map(item => item.id).join("-");
+
+	console.log(location);
+	return (
+		<Map
+			zoom={zoom}
+			center={center}
+			mapContainerRef={mapContainerRef}
+			onLoad={onLoad}
+			onIdle={onIdle}
+			mapInteracted={mapInteracted}
+			pinIconUrl={pinIconUrl}
+			setMapInteracted={setMapInteracted}
+			fitBounds={fitBounds}
+			mapRef={mapRef}
+			setQuery={setQuery}
+			filteredListingsLength={filteredListings.length}
+			setSelectedFilters={setSelectedFilters}
+		>
+			<MarkerClustererF
+				key={mapItemsKey}
+				calculator={markers => {
+					const totalCount = markers.reduce((sum, marker) => sum + (marker.get("count") || 1), 0);
+
+					return {
+						text: totalCount.toString(),
+						index: Math.min(5, Math.floor(totalCount / 10))
+					};
+				}}
+				options={{
+					...clusterOptions(clusterGridSize, markerConfigs.fillColor)
+				}}
+				onClick={onClusterClick}
+			>
+				{clusterer => (
+					<>
+						{mapItems.map(item => {
+							const markerCount = Object.values(item.items).length;
+							return (
+								<MapMarker
+									key={item.id}
+									item={item}
+									selectedLocation={location}
+									markerRefs={markerRefs}
+									infoWindowClasses={infoWindowClasses}
+									setSelectedLocation={setLocation}
+									markerClickHandler={markerClickHandler}
+									clusterer={clusterer}
+									markerIcon={markerIcon(markerConfigs, markerCount)}
+									markerIconSelected={markerIconSelected(markerConfigs, markerCount)}
+									setMapInteracted={setMapInteracted}
+								/>
+							);
+						})}
+
+						{additionalMapMarkers &&
+              additionalMapMarkers.map(
+              	(marker, index) =>
+              		currentZoom >= marker.minZoom &&
+                  currentZoom <= marker.maxZoom && (
+              			<Marker
+              				key={`marker-${marker.title}-${index}`}
+              				position={marker.position}
+              				title={marker.title}
+              				icon={{
+              					url: marker.iconUrl,
+              					scaledSize: new window.google.maps.Size(40, 40)
+              				}}
+              			/>
+              		)
+              )}
+
+						{poiMarkers &&
+              poiMarkers.markers.map((marker, index) => (
+              	<PlaceMarker
+              		key={`marker-${marker.title}-${index}`}
+              		marker={marker}
+              		index={index}
+              		selectedPlaceMarker={selectedPlaceMarker}
+              		placesWindow={placesWindow}
+              		setPlacesWindow={setPlacesWindow}
+              		setSelectedPlaceMarker={setSelectedPlaceMarker}
+              	/>
+              ))}
+					</>
+				)}
+			</MarkerClustererF>
+		</Map>
+	);
+};
+
+export default MapContainer;
+