@abcagency/hc-ui-components 1.3.14 → 1.3.16

package/src/contexts/placesContext.js

@@ -1,102 +1,102 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
-
-import { markerIconProps } from '~/util/mapIconUtil';
-
-import { useMap } from '~/contexts/mapContext';
-
-import { searchNearbyPlaces } from '~/services/googlePlacesNearbyService';
-
-const PlacesContext = createContext();
-
-export const usePlaces = () => useContext(PlacesContext);
-
-export const PlacesProvider = ({ children, placeMappings, markerColors }) => {
-	const { selectedPlaces, zoom, center } = useMap();
-	const [poiMarkers, setPoiMarkers] = useState({ markers: [], icon: null });
-	const [currentCenter, setCurrentCenter] = useState(center);
-	const [currentZoom, setCurrentZoom] = useState(zoom);
-	const [placesWindow, setPlacesWindow] = useState(false);
-	const [selectedPlaceMarker, setSelectedPlaceMarker] = useState(null);
-
-	const getRadiusForZoom = () => {
-		if (currentZoom >= 18) return 1000;
-		if (currentZoom <= 10) return 0;
-
-		let tempZoom = Math.pow(19 - currentZoom, 4.85);
-		let radius = tempZoom;
-		let minRadius = 1500;
-		let maxRadius = 800000;
-
-		if (radius < minRadius) radius = minRadius;
-		else if (radius > maxRadius) radius = maxRadius;
-
-		return radius;
-	};
-
-	useEffect(() => {
-		if (!selectedPlaces || (!selectedPlaces.length > 0) || !center || currentZoom < 12) {
-			setPoiMarkers({ markers: [], icon: null });
-			return;
-		}
-		const fetchPlaces = async () => {
-			let poiTypes = [];
-			const selectedPOICategories = selectedPlaces;
-			selectedPOICategories.forEach(pointOfInterest => {
-				poiTypes = poiTypes.concat(placeMappings[pointOfInterest]);
-			});
-
-			const radius = getRadiusForZoom();
-			const location = { latitude: currentCenter.lat, longitude: currentCenter.lng };
-
-			try {
-				const response = await searchNearbyPlaces(poiTypes, location, radius);
-				const newMarkers = response.places.map(place => {
-					const getParentCategory = types => {
-						const selectedTypes = selectedPOICategories.reduce((acc, category) => {
-							return acc.concat(placeMappings[category]);
-						}, []);
-
-						for (const type of types) {
-							if (!selectedTypes.includes(type)) continue;
-							for (const category in placeMappings) {
-								if (placeMappings[category].includes(type)) {
-									return category;
-								}
-							}
-
-						}
-					};
-
-					const icon = markerIconProps(markerColors.placeMarkers, getParentCategory(place.types));
-
-					return {
-						position: { lat: place.location.latitude, lng: place.location.longitude },
-						title: place.displayName.text,
-						icon: icon
-					};
-				});
-				setPoiMarkers({ markers: newMarkers, icon: null });
-			} catch (error) {
-				console.error('Failed to fetch places:', error);
-			}
-		};
-
-		fetchPlaces();
-	}, [selectedPlaces, currentZoom, currentCenter]);
-
-	return (
-		<PlacesContext.Provider value={{
-			poiMarkers,
-			setCurrentCenter,
-			currentCenter,
-			setCurrentZoom,
-			currentZoom,
-			placesWindow,
-			setPlacesWindow,
-			selectedPlaceMarker,
-			setSelectedPlaceMarker
-		}}>
-			{children}
-		</PlacesContext.Provider>
-	);
-};
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+import { markerIconProps } from '~/util/mapIconUtil';
+
+import { useMap } from '~/contexts/mapContext';
+
+import { searchNearbyPlaces } from '~/services/googlePlacesNearbyService';
+
+const PlacesContext = createContext();
+
+export const usePlaces = () => useContext(PlacesContext);
+
+export const PlacesProvider = ({ children, placeMappings, markerColors }) => {
+	const { selectedPlaces, zoom, center } = useMap();
+	const [poiMarkers, setPoiMarkers] = useState({ markers: [], icon: null });
+	const [currentCenter, setCurrentCenter] = useState(center);
+	const [currentZoom, setCurrentZoom] = useState(zoom);
+	const [placesWindow, setPlacesWindow] = useState(false);
+	const [selectedPlaceMarker, setSelectedPlaceMarker] = useState(null);
+
+	const getRadiusForZoom = () => {
+		if (currentZoom >= 18) return 1000;
+		if (currentZoom <= 10) return 0;
+
+		let tempZoom = Math.pow(19 - currentZoom, 4.85);
+		let radius = tempZoom;
+		let minRadius = 1500;
+		let maxRadius = 800000;
+
+		if (radius < minRadius) radius = minRadius;
+		else if (radius > maxRadius) radius = maxRadius;
+
+		return radius;
+	};
+
+	useEffect(() => {
+		if (!selectedPlaces || (!selectedPlaces.length > 0) || !center || currentZoom < 12) {
+			setPoiMarkers({ markers: [], icon: null });
+			return;
+		}
+		const fetchPlaces = async () => {
+			let poiTypes = [];
+			const selectedPOICategories = selectedPlaces;
+			selectedPOICategories.forEach(pointOfInterest => {
+				poiTypes = poiTypes.concat(placeMappings[pointOfInterest]);
+			});
+
+			const radius = getRadiusForZoom();
+			const location = { latitude: currentCenter.lat, longitude: currentCenter.lng };
+
+			try {
+				const response = await searchNearbyPlaces(poiTypes, location, radius);
+				const newMarkers = response.places.map(place => {
+					const getParentCategory = types => {
+						const selectedTypes = selectedPOICategories.reduce((acc, category) => {
+							return acc.concat(placeMappings[category]);
+						}, []);
+
+						for (const type of types) {
+							if (!selectedTypes.includes(type)) continue;
+							for (const category in placeMappings) {
+								if (placeMappings[category].includes(type)) {
+									return category;
+								}
+							}
+
+						}
+					};
+
+					const icon = markerIconProps(markerColors.placeMarkers, getParentCategory(place.types));
+
+					return {
+						position: { lat: place.location.latitude, lng: place.location.longitude },
+						title: place.displayName.text,
+						icon: icon
+					};
+				});
+				setPoiMarkers({ markers: newMarkers, icon: null });
+			} catch (error) {
+				console.error('Failed to fetch places:', error);
+			}
+		};
+
+		fetchPlaces();
+	}, [selectedPlaces, currentZoom, currentCenter]);
+
+	return (
+		<PlacesContext.Provider value={{
+			poiMarkers,
+			setCurrentCenter,
+			currentCenter,
+			setCurrentZoom,
+			currentZoom,
+			placesWindow,
+			setPlacesWindow,
+			selectedPlaceMarker,
+			setSelectedPlaceMarker
+		}}>
+			{children}
+		</PlacesContext.Provider>
+	);
+};

package/src/contexts/trackEventContext.js

@@ -0,0 +1,14 @@
+import React, { createContext, useContext } from 'react';
+import { eventTypes } from '~/constants/eventTypes';
+
+const TrackEventContext = createContext();
+
+export const useTrackEvent = () => useContext(TrackEventContext);
+
+export const TrackEventProvider = ({ children, trackEvent }) => {
+	return (
+		<TrackEventContext.Provider value={{ trackEvent, eventTypes }}>
+			{children}
+		</TrackEventContext.Provider>
+	);
+};

package/src/hooks/useList.js

@@ -1,100 +1,89 @@
-import { useEffect, useState, useRef } from 'react';
-
-import { getStorageObject } from '~/util/localStorageUtil';
-import { dynamicSort } from '~/util/sortUtil';
-
-import { useMapList } from '~/contexts/mapListContext';
-
-const getDefaultItemId = () => {
-	let item = getStorageObject("selectedListItem");
-	if (item?.expanded == true) {
-		return item.id;
-	} else {
-		return null;
-	}
-};
-
-const useListLogic = () => {
-	const [itemLimit, setItemLimit] = useState(100);
-	const [expandedId] = useState(getDefaultItemId());
-	const [sortSetting, setSortSetting] = useState(getStorageObject('sortSetting', null));
-	const [scrollPosition, setScrollPosition] = useState(getStorageObject('scrollPosition', 0));
-	const loader = useRef(null);
-	const scrollContainerRef = useRef(null);
-	const itemRefs = useRef({});
-	const observer = useRef(null);
-	const { filteredListings, setFilteredListings } = useMapList();
-
-	useEffect(() => {
-		if (!sortSetting) return;
-		localStorage.setItem('sortSetting', JSON.stringify(sortSetting));
-		let listingFiltered = dynamicSort(filteredListings, sortSetting.field, sortSetting.type);
-		setFilteredListings(listingFiltered);
-	}, [sortSetting]);
-
-	useEffect(() => {
-		observer.current = new IntersectionObserver(handleObserver, {
-			root: scrollContainerRef.current,
-			rootMargin: "100px 0px",
-			threshold: 0.5
-		});
-		const { current } = loader;
-		if (current) {
-			observer.current.observe(current);
-		}
-		return () => {
-			if (observer.current && current) {
-				observer.current.unobserve(current);
-			}
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [filteredListings.length, itemLimit]);
-
-	useEffect(() => {
-		localStorage.setItem('scrollPosition', scrollPosition.toString());
-	}, [scrollPosition]);
-
-	useEffect(() => {
-		const savedScrollPosition = scrollPosition;
-		if (parseInt(savedScrollPosition) > 3000) {
-			setItemLimit(savedScrollPosition / 10);
-		}
-		if (savedScrollPosition && scrollContainerRef.current) {
-			setTimeout(() => {
-				scrollContainerRef.current.scrollTop = parseInt(savedScrollPosition, 10);
-			}, 300);
-		}
-	}, []);
-
-	useEffect(() => {
-		const { current } = scrollContainerRef;
-		if (current) {
-			current.addEventListener('scroll', handleScroll);
-		}
-		return () => {
-			if (current) {
-				current.removeEventListener('scroll', handleScroll);
-			}
-		};
-	}, []);
-
-	const handleObserver = entities => {
-		const target = entities[0];
-		if (!target.isIntersecting) return;
-		if (filteredListings.length > itemLimit) {
-			setItemLimit(prevLimit => prevLimit + 100);
-		} else if (observer.current) {
-			observer.current.disconnect();
-		}
-	};
-
-	const handleScroll = () => {
-		if (scrollContainerRef.current) {
-			setScrollPosition(scrollContainerRef.current.scrollTop);
-		}
-	};
-
-	return { itemLimit, expandedId, sortSetting, scrollPosition, loader, scrollContainerRef, itemRefs, setSortSetting, setScrollPosition, dynamicSort, filteredListings };
-};
-
-export default useListLogic;
+import { useEffect, useState, useRef } from 'react';
+
+import { getStorageObject } from '~/util/localStorageUtil';
+
+const getDefaultItemId = () => {
+	let item = getStorageObject("selectedListItem");
+	if (item?.expanded == true) {
+		return item.id;
+	} else {
+		return null;
+	}
+};
+
+const useListLogic = filteredListings => {
+	const [itemLimit, setItemLimit] = useState(100);
+	const [expandedId] = useState(getDefaultItemId());
+	const [sortSetting, setSortSetting] = useState(getStorageObject('sortSetting', null));
+	const [scrollPosition, setScrollPosition] = useState(getStorageObject('scrollPosition', 0));
+	const loader = useRef(null);
+	const scrollContainerRef = useRef(null);
+	const itemRefs = useRef({});
+	const observer = useRef(null);
+
+	useEffect(() => {
+		observer.current = new IntersectionObserver(handleObserver, {
+			root: scrollContainerRef.current,
+			rootMargin: "100px 0px",
+			threshold: 0.5
+		});
+		const { current } = loader;
+		if (current) {
+			observer.current.observe(current);
+		}
+		return () => {
+			if (observer.current && current) {
+				observer.current.unobserve(current);
+			}
+		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [filteredListings.length, itemLimit]);
+
+	useEffect(() => {
+		localStorage.setItem('scrollPosition', scrollPosition.toString());
+	}, [scrollPosition]);
+
+	useEffect(() => {
+		const savedScrollPosition = scrollPosition;
+		if (parseInt(savedScrollPosition) > 3000) {
+			setItemLimit(savedScrollPosition / 10);
+		}
+		if (savedScrollPosition && scrollContainerRef.current) {
+			setTimeout(() => {
+				scrollContainerRef.current.scrollTop = parseInt(savedScrollPosition, 10);
+			}, 300);
+		}
+	}, []);
+
+	useEffect(() => {
+		const { current } = scrollContainerRef;
+		if (current) {
+			current.addEventListener('scroll', handleScroll);
+		}
+		return () => {
+			if (current) {
+				current.removeEventListener('scroll', handleScroll);
+			}
+		};
+	}, []);
+
+	const handleObserver = entities => {
+		const target = entities[0];
+		if (!target.isIntersecting) return;
+		if (filteredListings.length > itemLimit) {
+			setItemLimit(prevLimit => prevLimit + 100);
+		} else if (observer.current) {
+			observer.current.disconnect();
+		}
+	};
+
+	const handleScroll = () => {
+		if (scrollContainerRef.current) {
+			setScrollPosition(scrollContainerRef.current.scrollTop);
+		}
+	};
+
+	return { itemLimit, expandedId, sortSetting, scrollPosition, loader, scrollContainerRef, itemRefs, setSortSetting, setScrollPosition, filteredListings };
+};
+
+export default useListLogic;

package/src/index.js

@@ -1,3 +1,3 @@
-import HireControlMap from '~/components/HireControlMap';
-
-export { HireControlMap };
+import HireControlMap from '~/components/HireControlMap';
+
+export { HireControlMap };

package/src/services/configService.js

@@ -1,16 +1,16 @@
-import api from '~/apis/hcApi';
-
-export const getMapConfig = async () => {
-
-	try {
-		const response = await api.get(`/MapConfig`);
-		return response;
-	} catch (error) {
-		console.error("Error retrieving map configuration:", error);
-		throw error;
-	}
-};
-
-export default {
-	getMapConfig
-};
+import api from '~/apis/hcApi';
+
+export const getMapConfig = async () => {
+
+	try {
+		const response = await api.get(`/MapConfig`);
+		return response;
+	} catch (error) {
+		console.error("Error retrieving map configuration:", error);
+		throw error;
+	}
+};
+
+export default {
+	getMapConfig
+};

package/src/services/googlePlacesNearbyService.js

@@ -1,33 +1,33 @@
-export const searchNearbyPlaces = async (typesArray, location, radius) => {
-	const url = 'https://places.googleapis.com/v1/places:searchNearby';
-	const headers = {
-		'Content-Type': 'application/json',
-		'X-Goog-Api-Key': process.env.GOOGLE_MAPS_API_KEY,
-		'X-Goog-FieldMask': 'places.location,places.displayName,places.types'
-	};
-	const data = {
-		includedTypes: typesArray,
-		maxResultCount: 20,
-		locationRestriction: {
-			circle: {
-				center: location,
-				radius: radius
-			}
-		}
-	};
-
-	try {
-		const response = await fetch(url, {
-			method: 'POST',
-			headers: headers,
-			body: JSON.stringify(data)
-		});
-		if (!response.ok) {
-			throw new Error(`HTTP error! status: ${response.status}`);
-		}
-		return await response.json();
-	} catch (error) {
-		console.error('Error making the Nearby Search request:', error);
-		throw error;
-	}
-};
+export const searchNearbyPlaces = async (typesArray, location, radius) => {
+	const url = 'https://places.googleapis.com/v1/places:searchNearby';
+	const headers = {
+		'Content-Type': 'application/json',
+		'X-Goog-Api-Key': process.env.GOOGLE_MAPS_API_KEY,
+		'X-Goog-FieldMask': 'places.location,places.displayName,places.types'
+	};
+	const data = {
+		includedTypes: typesArray,
+		maxResultCount: 20,
+		locationRestriction: {
+			circle: {
+				center: location,
+				radius: radius
+			}
+		}
+	};
+
+	try {
+		const response = await fetch(url, {
+			method: 'POST',
+			headers: headers,
+			body: JSON.stringify(data)
+		});
+		if (!response.ok) {
+			throw new Error(`HTTP error! status: ${response.status}`);
+		}
+		return await response.json();
+	} catch (error) {
+		console.error('Error making the Nearby Search request:', error);
+		throw error;
+	}
+};

package/src/services/listingAggregatorService.js

@@ -1,45 +1,50 @@
-import { getListings } from '~/services/listingService';
-import { getRecruiters } from '~/services/recruiterService';
-import { getListingEntities } from '~/services/listingEntityService';
-
-import { getDistinctItemsByProximity } from '~/util/mapUtil';
-
-const fetchListings = async (query, siteConfig) => {
-	try {
-		const listingsResult = await getListings(
-			siteConfig.companyId,
-			5000,
-			1,
-			query
-		);
-		const recruiterIds = [
-			// eslint-disable-next-line no-undef
-			...new Set(listingsResult.map(listing => listing.recruiterId))
-		];
-		const fetchedRecruiters = await getRecruiters(recruiterIds);
-
-		const distinctEntityIds = [
-			// eslint-disable-next-line no-undef
-			...new Set(listingsResult.map(listing => listing.entityId))
-		];
-		const fetchedEntities = await getListingEntities(
-			distinctEntityIds
-		);
-
-		const distinctItems = getDistinctItemsByProximity(
-			listingsResult,
-			fetchedEntities
-		);
-		return {
-			listingsResult,
-			fetchedRecruiters,
-			fetchedEntities,
-			distinctItems
-		};
-	} catch (error) {
-		console.error("Error fetching listings:", error);
-		throw error;
-	}
-};
-
-export default fetchListings;
+import { getListings } from '~/services/listingService';
+import { getRecruiters } from '~/services/recruiterService';
+import { getListingEntities } from '~/services/listingEntityService';
+
+import { getDistinctItemsByProximity } from '~/util/mapUtil';
+
+const fetchListings = async (query, siteConfig, commuteLocation = null) => {
+	try {
+		const listingsResult = await getListings(
+			siteConfig.companyId,
+			5000,
+			1,
+			query
+		);
+		const recruiterIds = [
+			// eslint-disable-next-line no-undef
+			...new Set(listingsResult.map(listing => listing.recruiterId))
+		];
+		const fetchedRecruiters = await getRecruiters(recruiterIds);
+
+		const distinctEntityIds = [
+			// eslint-disable-next-line no-undef
+			...new Set(listingsResult.map(listing => listing.entityId))
+		];
+
+		const fetchedEntities = !commuteLocation ? await getListingEntities(
+			distinctEntityIds) :  await getListingEntities(
+			distinctEntityIds,`${commuteLocation.lat}, ${commuteLocation.lng}`);
+		for (var i = 0; i < listingsResult.length; i++) {
+			if (listingsResult[i].entityId != -1) {
+				listingsResult[i].fields.travelTime = fetchedEntities[listingsResult[i].entityId].travelTime;
+			}
+		}
+		const distinctItems = getDistinctItemsByProximity(
+			listingsResult,
+			fetchedEntities
+		);
+		return {
+			listingsResult,
+			fetchedRecruiters,
+			fetchedEntities,
+			distinctItems
+		};
+	} catch (error) {
+		console.error("Error fetching listings:", error);
+		throw error;
+	}
+};
+
+export default fetchListings;

package/src/services/listingEntityService.js

@@ -1,15 +1,15 @@
-import api from '~/apis/hcApi';
-
-export const getListingEntities = async (entityIds, origin = '') => {
-	try {
-		const response = await api.post(`/ListingEntities?origin=${origin}`, entityIds);
-		return response;
-	} catch (error) {
-		console.error("Error fetching listing entities:", error);
-		throw error;
-	}
-};
-
-export default {
-	getListingEntities
-};
+import api from '~/apis/hcApi';
+
+export const getListingEntities = async (entityIds, origin = '') => {
+	try {
+		const response = await api.post(`/ListingEntities?origin=${origin}`, entityIds);
+		return response;
+	} catch (error) {
+		console.error("Error fetching listing entities:", error);
+		throw error;
+	}
+};
+
+export default {
+	getListingEntities
+};