@abcagency/hc-ui-components 1.3.20 → 1.3.21

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

@@ -1,88 +1,29 @@
-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;
+import React from 'react';
+import { MarkerF } from '@react-google-maps/api';
+
+const MapMarker = ({
+	position,
+	title,
+	icon,
+	zIndex,
+	onLoad,
+	onClick,
+	clusterer,
+	children
+}) => {
+	return (
+		<MarkerF
+			position={position}
+			title={title}
+			options={{ icon: icon }}
+			zIndex={zIndex}
+			onLoad={onLoad}
+			onClick={onClick}
+			clusterer={clusterer}
+		>
+			{children}
+		</MarkerF>
+	);
+};
+
+export default MapMarker;

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;

package/src/contexts/mapListContext.tsx

@@ -2,6 +2,7 @@ import React, { createContext, useState, useEffect, useContext, ReactNode } from
 
 import { generateFilterOptions, applyFilters, filterListingsByLocation } from '~/util/filterUtil';
 import { getStorageObject, setStorageObject } from '~/util/localStorageUtil';
+import { updateURLWithFilters, filtersFromURL } from '~/util/urlFilterUtil';
 
 import { getListingEntities } from "~/services/listingEntityService";
 import fetchListings from '~/services/listingAggregatorService';
@@ -73,6 +74,7 @@ interface MapListProviderProps {
   linkFormat: string;
   trackEvent: (event: string) => void;
   listings?: Listing[];
+  setFiltersUrl?:boolean;
 }
 
 export const MapListProvider: React.FC<MapListProviderProps> = ({
@@ -84,8 +86,13 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 	Link,
 	linkFormat,
 	trackEvent,
-	listings = []
+	listings = [],
+	setFiltersUrl
 }) => {
+	const firstLoadFilters = () =>{
+		let urlFilters = filtersFromURL(window.location)?.filters;
+		return  (setFiltersUrl === true && urlFilters && Object.keys(urlFilters).length > 0) ? urlFilters  : getStorageObject('selectedFilters', {}) || {}
+	}
 	const [allListings, setAllListings] = useState<Listing[]>(getStorageObject("listings", listings) || []);
 	const [filteredListings, setFilteredListings] = useState<Listing[]>([]);
 	const [loading, setLoading] = useState<boolean>(false);
@@ -95,7 +102,7 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 	const [listingEntities, setListingEntities] = useState<Record<number, ListingEntity> | null>(getStorageObject("listingEntities", null));
 	const [firstLoad, setFirstLoad] = useState<boolean>(true);
 	const [commuteLocation, setCommuteLocation] = useState<any | null>(getStorageObject('commuteLocation'));
-	const [selectedFilters, setSelectedFilters] = useState<Record<string, any>>(() => resetFilters ? {} : getStorageObject('selectedFilters', {}) || {});
+	const [selectedFilters, setSelectedFilters] = useState<Record<string, any>>(() => resetFilters ? {} : firstLoadFilters());
 	const [filterOptions, setFilterOptions] = useState<any>();
 	const [recruiters, setRecruiters] = useState<Record<number, Recruiter>>(getStorageObject("recruiters", {}) || {});
 	const [filterDialogIsOpen, setFilterDialogIsOpen] = useState<boolean>(false);
@@ -107,6 +114,8 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 		setFilteredListings(filteredListings);
 	};
 
+
+
 	useEffect(() => {
 		if (!sortSetting) return;
 		localStorage.setItem('sortSetting', JSON.stringify(sortSetting));
@@ -152,8 +161,6 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 						}
 					}
 				}
-
-				setNewFilteredListings(newFilteredListings);
 			} catch (error) {
 				console.error("Failed to fetch listing entities:", error);
 			}
@@ -194,10 +201,13 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 	useEffect(() => {
 		const processListings = () => {
 			let filteredListings: Listing[];
+			let tempSelectedFilters = selectedFilters;
+			let tempQuery = query;
+
 			const { mapItems, filteredListings: tempFilteredListings } = applyFilters(
 				allListings,
-				selectedFilters,
-				query,
+				tempSelectedFilters,
+				tempQuery,
 				listingEntities,
 				favorites,
 				siteConfig
@@ -208,18 +218,22 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 				filteredListings = filteredListings.filter((x: Listing) => favorites.includes(x.id));
 			}
 			setNewFilteredListings(filteredListings);
-			if (firstLoad && selectedFilters) {
+			if (firstLoad && tempSelectedFilters) {
 				// Update URL with filters if needed
-			} else if (Object.keys(selectedFilters).length === 0 && !firstLoad) {
+			} else if (Object.keys(tempSelectedFilters).length === 0 && !firstLoad) {
 				localStorage.removeItem('selectedFilters');
 			} else if (!firstLoad) {
-				setStorageObject('selectedFilters', selectedFilters);
+				setStorageObject('selectedFilters', tempSelectedFilters);
+			}
+			if(setFiltersUrl === true)
+			{
+				updateURLWithFilters(tempSelectedFilters, window.location, tempQuery);
 			}
-			query != null ? localStorage.setItem('query', query) : localStorage.removeItem('query');
+			tempQuery != null ? localStorage.setItem('query', tempQuery) : localStorage.removeItem('query');
 			setMapItems(mapItems);
 
-			if (selectedFilters) {
-				const keys = Object.keys(selectedFilters);
+			if (tempSelectedFilters) {
+				const keys = Object.keys(tempSelectedFilters);
 				const lastKey = keys[keys.length - 1];
 				const options = generateFilterOptions(
 					firstLoad ? allListings : filteredListings,