@abcagency/hc-ui-components 1.3.20 → 1.3.22

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

@@ -1,230 +1,76 @@
-/* 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;
+import React from 'react';
+import { GoogleMap, MarkerClustererF } from "@react-google-maps/api";
+import ShowAllButton from "~/components/modules/buttons/show-all-button";
+import { clusterOptions } from "~/util/mapUtil";
+
+const Map = ({
+	zoom,
+	center,
+	mapContainerRef,
+	onLoad,
+	onIdle,
+	clusterGridSize,
+	markerConfigs,
+	mapMarkers,
+	placeMarkers,
+	mapInteracted,
+	pinIconUrl,
+	setMapInteracted,
+	fitBounds,
+	mapRef,
+	setQuery,
+	filteredListingsLength,
+	setSelectedFilters
+}) => {
+	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 => (
+								<>
+									{mapMarkers}
+									{placeMarkers}
+								</>
+							)}
+						</MarkerClustererF>
+					</GoogleMap>
+					{mapInteracted && markerConfigs && (
+						<ShowAllButton
+							mapInteracted={mapInteracted}
+							markerConfigs={markerConfigs}
+							setMapInteracted={setMapInteracted}
+							fitBounds={fitBounds}
+							mapRef={mapRef}
+							pinIconUrl={pinIconUrl}
+							setQuery={setQuery}
+							listingCount={filteredListingsLength}
+							setSelectedFilters={setSelectedFilters}
+						/>
+					)}
+				</div>
+			)}
+		</>
+	);
+};
+
+export default Map;