@abcagency/hc-ui-components 1.3.14 → 1.3.16

package/src/components/modules/maps/map-marker.js

@@ -1,86 +1,88 @@
-import React, { useEffect, useRef } from 'react';
-import { MarkerF, InfoWindow } from '@react-google-maps/api';
-
-import InfoWindowCard from '~/components/modules/maps/info-window-card';
-import InfoWindowContent from "~/components/modules/maps/info-window-content";
-
-import { useMap } from "~/contexts/mapContext";
-import { useMapList } from "~/contexts/mapListContext";
-
-const MapMarker = ({
-	item,
-	markerRefs,
-	infoWindowClasses,
-	markerClickHandler,
-	clusterer,
-	markerIconSelected,
-	markerIcon,
-	selectedLocation,
-	setMapInteracted
-}) => {
-	const { setLocation, commuteLocation } = useMap();
-	const isSelected = item.id === selectedLocation?.id;
-	const markerRef = useRef(null);
-
-	const {
-		handleFilterListingsByLocation
-	} = useMapList();
-
-	useEffect(() => {
-		markerRefs.current[item.id] = markerRef.current;
-	}, []);
-
-	const onMarkerClick = () => {
-		setMapInteracted(true);
-		markerClickHandler(item);
-	};
-
-	const getInfoWindow = () => {
-		if (!isSelected || !item || !item.id || !selectedLocation) {
-			return;
-		}
-		//Direct dom removal of empty info windows
-		document.querySelectorAll("div.gm-style-iw.gm-style-iw-c").forEach(x => { if (!x.innerHTML.includes(item.id)) x.parentElement.remove(); });
-		return (
-			<InfoWindow
-				position={{ lat: item.latitude, lng: item.longitude }}
-				anchor={markerRefs.current[item.id]}
-				onCloseClick={() => {
-					setMapInteracted(true);
-					setLocation(null);
-				}}
-				options={{ maxWidth: 400 }}
-			>
-				<InfoWindowCard
-					className={infoWindowClasses}
-					id={item.id}
-					content={<InfoWindowContent
-						item={item}
-						commuteLocation={commuteLocation}
-						filterListingsByLocation={() =>
-							handleFilterListingsByLocation(selectedLocation)
-						}
-					/>}
-				/>
-			</InfoWindow>
-		);
-	};
-	return (
-		<MarkerF
-			key={item.id}
-			position={{ lat: item.latitude, lng: item.longitude }}
-			title={item.name}
-			options={{
-				icon: isSelected ? markerIconSelected : markerIcon
-			}}
-			zIndex={isSelected ? 9999 : 1}
-			onLoad={marker => (markerRef.current = marker)}
-			onClick={onMarkerClick}
-			clusterer={clusterer}
-		>
-			{isSelected && getInfoWindow()}
-		</MarkerF>
-	);
-};
-
-export default MapMarker;
+import React, { useEffect, useRef } from 'react';
+import { MarkerF, InfoWindow } from '@react-google-maps/api';
+
+import InfoWindowCard from '~/components/modules/maps/info-window-card';
+import InfoWindowContent from "~/components/modules/maps/info-window-content";
+
+import { useMap } from "~/contexts/mapContext";
+import { useMapList } from "~/contexts/mapListContext";
+import { useTrackEvent } from '~/contexts/trackEventContext';
+
+const MapMarker = ({
+	item,
+	markerRefs,
+	infoWindowClasses,
+	markerClickHandler,
+	clusterer,
+	markerIconSelected,
+	markerIcon,
+	selectedLocation,
+	setMapInteracted
+}) => {
+	const { setLocation, commuteLocation } = useMap();
+	const isSelected = item.id === selectedLocation?.id;
+	const markerRef = useRef(null);
+	const { trackEvent, eventTypes } = useTrackEvent();
+	const {
+		handleFilterListingsByLocation
+	} = useMapList();
+
+	useEffect(() => {
+		markerRefs.current[item.id] = markerRef.current;
+	}, []);
+
+	const onMarkerClick = () => {
+		trackEvent(eventTypes.MAP_MARKER_CLICKED, { entityDisplayName: item.entityDisplayName, lat: item.latitude, lng: item.longitude, travelTime: item.travelTime });
+		setMapInteracted(true);
+		markerClickHandler(item);
+	};
+
+	const getInfoWindow = () => {
+		if (!isSelected || !item || !item.id || !selectedLocation) {
+			return;
+		}
+		//Direct dom removal of empty info windows
+		document.querySelectorAll("div.gm-style-iw.gm-style-iw-c").forEach(x => { if (!x.innerHTML.includes(item.id)) x.parentElement.remove(); });
+		return (
+			<InfoWindow
+				position={{ lat: item.latitude, lng: item.longitude }}
+				anchor={markerRefs.current[item.id]}
+				onCloseClick={() => {
+					setMapInteracted(true);
+					setLocation(null);
+				}}
+				options={{ maxWidth: 400 }}
+			>
+				<InfoWindowCard
+					className={infoWindowClasses}
+					id={item.id}
+					content={<InfoWindowContent
+						item={item}
+						commuteLocation={commuteLocation}
+						filterListingsByLocation={() =>
+							handleFilterListingsByLocation(selectedLocation)
+						}
+					/>}
+				/>
+			</InfoWindow>
+		);
+	};
+	return (
+		<MarkerF
+			key={item.id}
+			position={{ lat: item.latitude, lng: item.longitude }}
+			title={item.name}
+			options={{
+				icon: isSelected ? markerIconSelected : markerIcon
+			}}
+			zIndex={isSelected ? 9999 : 1}
+			onLoad={marker => (markerRef.current = marker)}
+			onClick={onMarkerClick}
+			clusterer={clusterer}
+		>
+			{isSelected && getInfoWindow()}
+		</MarkerF>
+	);
+};
+
+export default MapMarker;

package/src/components/modules/maps/map.js

@@ -1,230 +1,230 @@
-/* eslint-disable no-undef */
-import React, { useEffect, useRef } from 'react';
-import { GoogleMap, MarkerClustererF } from "@react-google-maps/api";
-
-import MapMarker from "~/components/modules/maps/map-marker";
-import PlaceMarker from "~/components/modules/maps/place-marker";
-import ShowAllButton from "~/components/modules/buttons/show-all-button";
-
-import { usePlaces } from "~/contexts/placesContext";
-import { useMap } from "~/contexts/mapContext";
-import { useMapList } from "~/contexts/mapListContext";
-
-import { markerIconSelected, markerIcon, pinIcon } from "~/util/mapIconUtil";
-import { clusterOptions } from "~/util/mapUtil";
-
-const Map = ({
-	markerConfigs,
-	infoWindowClasses,
-	clusterGridSize = 60
-}) => {
-	const {
-		location,
-		zoom,
-		center,
-		commuteLocation,
-		selectLocationEntity,
-		setLocation,
-		mapInteracted,
-		setMapInteracted
-	} = useMap();
-
-	const {
-		mapItems, filteredListings, setSelectedFilters,
-		setQuery
-	} = useMapList();
-
-	const mapRef = useRef();
-	const markerRefs = useRef({});
-	const mapContainerRef = useRef(null);
-	const {
-		poiMarkers,
-		setCurrentCenter,
-		currentCenter,
-		setCurrentZoom,
-		currentZoom,
-		selectedPlaceMarker,
-		setSelectedPlaceMarker,
-		placesWindow,
-		setPlacesWindow } = 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 (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) {
-			const mapInstance = mapRef.current;
-			const dragStartListener = mapInstance.addListener('dragstart', () => setMapInteracted(true));
-			const mouseDownListener = mapInstance.addListener('mousedown', () => setMapInteracted(true));
-			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) {
-			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) {
-			let currZoom = mapRef.current.zoom;
-			let 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) {
-			let 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 => {
-				bounds.extend(new google.maps.LatLng(item.latitude, item.longitude));
-			});
-			if (!map) return;
-			map.fitBounds(bounds);
-		}
-		if (mapRef.current.zoom > 17) {
-			mapRef.current.setZoom(16);
-		}
-	};
-
-	const markerClickHandler = mapLocation => {
-		setMapInteracted(true);
-		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
-	});
-
-	return (
-		<>{zoom && center && <div ref={mapContainerRef} className="hc-h-full hc-relative">
-			<GoogleMap
-				zoom={zoom}
-				onLoad={onLoad}
-				onIdle={onIdle}
-				center={center}
-				mapContainerStyle={{
-					width: "100%",
-					height: "100%"
-				}}
-				options={{
-					styles: [
-						{
-							featureType: "poi",
-							elementType: "labels",
-							stylers: [{ visibility: "off" }]
-						}
-					]
-				}}
-			>
-				<MarkerClustererF options={clusterOptions(clusterGridSize, markerConfigs.fillColor)}>
-					{clusterer => (
-						<>
-							{mapItems.map(item => (
-								<MapMarker
-									key={item.id}
-									item={item}
-									selectedLocation={location}
-									markerRefs={markerRefs}
-									infoWindowClasses={infoWindowClasses}
-									setSelectedLocation={setLocation}
-									markerClickHandler={markerClickHandler}
-									clusterer={clusterer}
-									markerIcon={markerIcon(markerConfigs)}
-									markerIconSelected={markerIconSelected(markerConfigs)}
-									setMapInteracted={setMapInteracted}
-								/>
-							))}
-							{poiMarkers && poiMarkers.markers.map((marker, index) => {
-								return (
-									<PlaceMarker
-										key={`marker-${marker.title}-${index}`}
-										marker={marker}
-										index={index}
-										selectedPlaceMarker={selectedPlaceMarker}
-										placesWindow={placesWindow}
-										setPlacesWindow={setPlacesWindow}
-										setSelectedPlaceMarker={setSelectedPlaceMarker}
-									/>
-								);
-							})}
-						</>
-					)}
-				</MarkerClustererF>
-			</GoogleMap>
-			{mapInteracted && markerConfigs && (
-				<ShowAllButton
-					mapInteracted={mapInteracted}
-					markerConfigs={markerConfigs}
-					setMapInteracted={setMapInteracted}
-					fitBounds={fitBounds}
-					mapRef={mapRef}
-					pinIconUrl={pinIconUrl}
-					setQuery={setQuery}
-					listingCount={filteredListings.length}
-					setSelectedFilters={setSelectedFilters}
-				/>
-			)}
-		</div>
-		}
-		</>
-	);
-};
-
-export default Map;
+/* eslint-disable no-undef */
+import React, { useEffect, useRef } from 'react';
+import { GoogleMap, MarkerClustererF } from "@react-google-maps/api";
+
+import MapMarker from "~/components/modules/maps/map-marker";
+import PlaceMarker from "~/components/modules/maps/place-marker";
+import ShowAllButton from "~/components/modules/buttons/show-all-button";
+
+import { usePlaces } from "~/contexts/placesContext";
+import { useMap } from "~/contexts/mapContext";
+import { useMapList } from "~/contexts/mapListContext";
+
+import { markerIconSelected, markerIcon, pinIcon } from "~/util/mapIconUtil";
+import { clusterOptions } from "~/util/mapUtil";
+
+const Map = ({
+	markerConfigs,
+	infoWindowClasses,
+	clusterGridSize = 60
+}) => {
+	const {
+		location,
+		zoom,
+		center,
+		commuteLocation,
+		selectLocationEntity,
+		setLocation,
+		mapInteracted,
+		setMapInteracted
+	} = useMap();
+
+	const {
+		mapItems, filteredListings, setSelectedFilters,
+		setQuery
+	} = useMapList();
+
+	const mapRef = useRef();
+	const markerRefs = useRef({});
+	const mapContainerRef = useRef(null);
+	const {
+		poiMarkers,
+		setCurrentCenter,
+		currentCenter,
+		setCurrentZoom,
+		currentZoom,
+		selectedPlaceMarker,
+		setSelectedPlaceMarker,
+		placesWindow,
+		setPlacesWindow } = 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 (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) {
+			const mapInstance = mapRef.current;
+			const dragStartListener = mapInstance.addListener('dragstart', () => setMapInteracted(true));
+			const mouseDownListener = mapInstance.addListener('mousedown', () => setMapInteracted(true));
+			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) {
+			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) {
+			let currZoom = mapRef.current.zoom;
+			let 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) {
+			let 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 => {
+				bounds.extend(new google.maps.LatLng(item.latitude, item.longitude));
+			});
+			if (!map) return;
+			map.fitBounds(bounds);
+		}
+		if (mapRef.current.zoom > 17) {
+			mapRef.current.setZoom(16);
+		}
+	};
+
+	const markerClickHandler = mapLocation => {
+		setMapInteracted(true);
+		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
+	});
+
+	return (
+		<>{zoom && center && <div ref={mapContainerRef} className="hc-h-full hc-relative">
+			<GoogleMap
+				zoom={zoom}
+				onLoad={onLoad}
+				onIdle={onIdle}
+				center={center}
+				mapContainerStyle={{
+					width: "100%",
+					height: "100%"
+				}}
+				options={{
+					styles: [
+						{
+							featureType: "poi",
+							elementType: "labels",
+							stylers: [{ visibility: "off" }]
+						}
+					]
+				}}
+			>
+				<MarkerClustererF options={clusterOptions(clusterGridSize, markerConfigs.fillColor)}>
+					{clusterer => (
+						<>
+							{mapItems.map(item => (
+								<MapMarker
+									key={item.id}
+									item={item}
+									selectedLocation={location}
+									markerRefs={markerRefs}
+									infoWindowClasses={infoWindowClasses}
+									setSelectedLocation={setLocation}
+									markerClickHandler={markerClickHandler}
+									clusterer={clusterer}
+									markerIcon={markerIcon(markerConfigs)}
+									markerIconSelected={markerIconSelected(markerConfigs)}
+									setMapInteracted={setMapInteracted}
+								/>
+							))}
+							{poiMarkers && poiMarkers.markers.map((marker, index) => {
+								return (
+									<PlaceMarker
+										key={`marker-${marker.title}-${index}`}
+										marker={marker}
+										index={index}
+										selectedPlaceMarker={selectedPlaceMarker}
+										placesWindow={placesWindow}
+										setPlacesWindow={setPlacesWindow}
+										setSelectedPlaceMarker={setSelectedPlaceMarker}
+									/>
+								);
+							})}
+						</>
+					)}
+				</MarkerClustererF>
+			</GoogleMap>
+			{mapInteracted && markerConfigs && (
+				<ShowAllButton
+					mapInteracted={mapInteracted}
+					markerConfigs={markerConfigs}
+					setMapInteracted={setMapInteracted}
+					fitBounds={fitBounds}
+					mapRef={mapRef}
+					pinIconUrl={pinIconUrl}
+					setQuery={setQuery}
+					listingCount={filteredListings.length}
+					setSelectedFilters={setSelectedFilters}
+				/>
+			)}
+		</div>
+		}
+		</>
+	);
+};
+
+export default Map;