@abcagency/hc-ui-components 1.3.13 → 1.3.15

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

@@ -1,81 +1,81 @@
-import React from 'react';
-import * as Tabs from '@radix-ui/react-tabs';
-
-import Button from '~/components/modules/buttons/default';
-
-import { useMapList } from '~/contexts/mapListContext';
-
-const MapTabs = ({
-	map,
-	list,
-	filter,
-	className,
-	showMap
-}) => {
-	const tabButtonClasses =
-		"hc-flex hc-items-center hc-gap-2 hc-rounded-none hc-border-x-0 data-[state=active]:hc-bg-primary data-[state=active]:hc-text-white";
-	const { mobileTab, setMobileTab } = useMapList();
-	return (
-		<div
-			className={`
-				hc-relative hc-overflow-hidden
-				${className ?? ""}
-			`}
-		>
-			<Tabs.Root
-				className="hc-flex hc-flex-col hc-h-screen hc-min-h-screen"
-				//defaultValue="listTab"
-				value={mobileTab}
-			>
-				<Tabs.List
-					className="hc-w-full hc-shrink-0 hc-flex hc-divide-x hc-divide-primary"
-					aria-label="Review positions"
-				>
-					<Tabs.Trigger value="listTab" asChild onClick={() => setMobileTab("listTab")}>
-						<Button.Btn variant="outline" isBlock className={tabButtonClasses}>
-							<Button.Body className="hc-justify-center">
-								<Button.Icon icon="mdi:view-list" size="hc-size-5" />
-								List
-							</Button.Body>
-						</Button.Btn>
-					</Tabs.Trigger>
-					{showMap && (
-						<Tabs.Trigger value="mapTab" asChild onClick={() => setMobileTab("mapTab")}>
-							<Button.Btn
-								variant="outline"
-								isBlock
-								className={tabButtonClasses}
-							>
-								<Button.Body className="hc-justify-center">
-									<Button.Icon icon="mdi:map" size="hc-size-5" />
-									Map
-								</Button.Body>
-							</Button.Btn>
-						</Tabs.Trigger>
-					)}
-					<Tabs.Trigger value="filterTab" asChild onClick={() => setMobileTab("filterTab")}>
-						<Button.Btn variant="outline" isBlock className={tabButtonClasses}>
-							<Button.Body className="hc-justify-center">
-								<Button.Icon icon="fluent:search-12-filled" size="hc-size-5" />
-								Filter
-							</Button.Body>
-						</Button.Btn>
-					</Tabs.Trigger>
-				</Tabs.List>
-				<Tabs.Content className="hc-grow hc-bg-white hc-outline-none" value="listTab">
-					{list}
-				</Tabs.Content>
-				{showMap && (
-					<Tabs.Content className="hc-grow hc-bg-white hc-outline-none" value="mapTab">
-						{map}
-					</Tabs.Content>
-				)}
-				<Tabs.Content className="hc-grow hc-bg-white hc-outline-none hc-p-2" value="filterTab">
-					{filter}
-				</Tabs.Content>
-			</Tabs.Root>
-		</div>
-	);
-};
-
-export default MapTabs;
+import React from 'react';
+import * as Tabs from '@radix-ui/react-tabs';
+
+import Button from '~/components/modules/buttons/default';
+
+import { useMapList } from '~/contexts/mapListContext';
+
+const MapTabs = ({
+	map,
+	list,
+	filter,
+	className,
+	showMap
+}) => {
+	const tabButtonClasses =
+		"hc-flex hc-items-center hc-gap-2 hc-rounded-none hc-border-x-0 data-[state=active]:hc-bg-primary data-[state=active]:hc-text-white";
+	const { mobileTab, setMobileTab } = useMapList();
+	return (
+		<div
+			className={`
+				hc-relative hc-overflow-hidden
+				${className ?? ""}
+			`}
+		>
+			<Tabs.Root
+				className="hc-flex hc-flex-col hc-h-screen hc-min-h-screen"
+				//defaultValue="listTab"
+				value={mobileTab}
+			>
+				<Tabs.List
+					className="hc-w-full hc-shrink-0 hc-flex hc-divide-x hc-divide-primary"
+					aria-label="Review positions"
+				>
+					<Tabs.Trigger value="listTab" asChild onClick={() => setMobileTab("listTab")}>
+						<Button.Btn variant="outline" isBlock className={tabButtonClasses}>
+							<Button.Body className="hc-justify-center">
+								<Button.Icon icon="mdi:view-list" size="hc-size-5" />
+								List
+							</Button.Body>
+						</Button.Btn>
+					</Tabs.Trigger>
+					{showMap && (
+						<Tabs.Trigger value="mapTab" asChild onClick={() => setMobileTab("mapTab")}>
+							<Button.Btn
+								variant="outline"
+								isBlock
+								className={tabButtonClasses}
+							>
+								<Button.Body className="hc-justify-center">
+									<Button.Icon icon="mdi:map" size="hc-size-5" />
+									Map
+								</Button.Body>
+							</Button.Btn>
+						</Tabs.Trigger>
+					)}
+					<Tabs.Trigger value="filterTab" asChild onClick={() => setMobileTab("filterTab")}>
+						<Button.Btn variant="outline" isBlock className={tabButtonClasses}>
+							<Button.Body className="hc-justify-center">
+								<Button.Icon icon="fluent:search-12-filled" size="hc-size-5" />
+								Filter
+							</Button.Body>
+						</Button.Btn>
+					</Tabs.Trigger>
+				</Tabs.List>
+				<Tabs.Content className="hc-grow hc-bg-white hc-outline-none" value="listTab">
+					{list}
+				</Tabs.Content>
+				{showMap && (
+					<Tabs.Content className="hc-grow hc-bg-white hc-outline-none" value="mapTab">
+						{map}
+					</Tabs.Content>
+				)}
+				<Tabs.Content className="hc-grow hc-bg-white hc-outline-none hc-p-2" value="filterTab">
+					{filter}
+				</Tabs.Content>
+			</Tabs.Root>
+		</div>
+	);
+};
+
+export default MapTabs;

package/src/constants/placeTypes.js

@@ -1,8 +1,8 @@
-export const placeTypes = {
-	FOOD: "food",
-	STORE: "shopping",
-	TOURIST_ATTRACTION: "attractions",
-	TRANSIT_STATION: "transit",
-	SCHOOL: "schools",
-	PLACE_OF_WORSHIP: "worship"
-};
+export const placeTypes = {
+	FOOD: "food",
+	STORE: "shopping",
+	TOURIST_ATTRACTION: "attractions",
+	TRANSIT_STATION: "transit",
+	SCHOOL: "schools",
+	PLACE_OF_WORSHIP: "worship"
+};

package/src/contexts/mapContext.js

@@ -16,20 +16,11 @@ export const MapProvider = ({ children, resetFilters }) => {
 	const [location, setLocation] = useState(getStorageObject('location'));
 	const [center, setCenter] = useState(getStorageObject("center", { lat: 39.8283, lng: -98.5795 }));
 	const [zoom, setZoom] = useState(getStorageObject("zoom", 10));
-	const [commuteLocation, setCommuteLocation] = useState(getStorageObject('commuteLocation'));
 	const [selectedPlaces, setSelectedPlaces] = useState([]);
 	const [mapInteracted, setMapInteracted] = useState(false);
 	const [firstLoadListItem] = useState(getStorageObject('selectedListItem') ?? { id: "defaultId" });
-	const [travelTime, setTravelTime] = useState(null);
 	const userSetZoom = useRef(true);
 
-	useEffect(() => {
-		setStorageObject("commuteLocation", commuteLocation);
-		if (!commuteLocation) {
-			setTravelTime(null);
-		}
-	}, [commuteLocation]);
-
 	useEffect(() => {
 		setStorageObject("selectedListItem", selectedListItem);
 	}, [selectedListItem]);
@@ -63,7 +54,6 @@ export const MapProvider = ({ children, resetFilters }) => {
 			setZoom(zoom);
 
 		}
-
 	};
 
 	const filterReset = () => {
@@ -94,8 +84,6 @@ export const MapProvider = ({ children, resetFilters }) => {
 				zoom,
 				setZoom,
 				selectItem,
-				commuteLocation,
-				setCommuteLocation,
 				setSelectedPlaces,
 				selectedPlaces,
 				selectLocationEntity,
@@ -104,8 +92,6 @@ export const MapProvider = ({ children, resetFilters }) => {
 				mapInteracted,
 				userSetZoom,
 				firstLoadListItem,
-				travelTime,
-				setTravelTime,
 				filterReset
 			}}
 		>

package/src/contexts/mapListContext.js

@@ -37,9 +37,10 @@ export const MapListProvider = ({
 	const [loading, setLoading] = useState(false);
 	const [mapItems, setMapItems] = useState(getStorageObject('mapItems', []));
 	const [query, setQuery] = useState(() => resetFilters ? null : getQuery());
+	const [sortSetting, setSortSetting] = useState(getStorageObject('sortSetting', null));
 	const [listingEntities, setListingEntities] = useState(getStorageObject("listingEntities", null));
 	const [firstLoad, setFirstLoad] = useState(true);
-	const [commuteLocation, setCommuteLocation] = useState(null);
+	const [commuteLocation, setCommuteLocation] = useState(getStorageObject('commuteLocation'));
 	const [selectedFilters, setSelectedFilters] = useState(() => resetFilters ? {} : getStorageObject('selectedFilters', {}));//hasFiltersInURL(location) ? filtersFromURL(location).filters : getStorageObject('selectedFilters', {}));
 	const [filterOptions, setFilterOptions] = useState();
 	const [recruiters, setRecruiters] = useState(getStorageObject("recruiters", {}));
@@ -48,11 +49,25 @@ export const MapListProvider = ({
 	const [favorites, setFavorites] = useState([]);
 	const [filterByFavorites, setFilterByFavorites] = useState(false);
 
+	const setNewFilteredListings = filteredListings =>{
+		setFilteredListings(filteredListings);
+	};
+
+	useEffect(() => {
+		if (!sortSetting) return;
+		localStorage.setItem('sortSetting', JSON.stringify(sortSetting));
+		setNewFilteredListings(filteredListings);
+	}, [sortSetting]);
+
 	useEffect(() => {
 		const loadedFavorites = JSON.parse(localStorage.getItem('favorites')) || [];
 		setFavorites(loadedFavorites);
 	}, []);
 
+	useEffect(() => {
+		setStorageObject("commuteLocation", commuteLocation);
+	}, [commuteLocation]);
+
 	useEffect(() => {
 		if (commuteLocation === null || commuteLocation === '') return;
 		async function fetchEntities() {
@@ -77,7 +92,7 @@ export const MapListProvider = ({
 						newFilteredListings[j].fields.travelTime = fetchedEntities[newFilteredListings[j].entityId].travelTime;
 					}
 				}
-				setFilteredListings(newFilteredListings);
+				setNewFilteredListings(newFilteredListings);
 			} catch (error) {
 				console.error("Failed to fetch listing entities:", error);
 			}
@@ -98,7 +113,7 @@ export const MapListProvider = ({
 					fetchedRecruiters,
 					fetchedEntities,
 					distinctItems
-				} = await fetchListings(query, siteConfig);
+				} = await fetchListings(query, siteConfig, commuteLocation);
 				setAllListings(listingsResult);
 				setRecruiters(fetchedRecruiters);
 				setListingEntities(fetchedEntities);
@@ -128,7 +143,7 @@ export const MapListProvider = ({
 			if (filterByFavorites) {
 				filteredListings = filteredListings.filter(x => favorites.includes(x.id));
 			}
-			setFilteredListings(filteredListings);
+			setNewFilteredListings(filteredListings);
 			// if (firstLoad && hasFiltersInURL(location)) {
 			// 	const { filters } = filtersFromURL(location);
 			// 	setSelectedFilters(filters);
@@ -167,12 +182,13 @@ export const MapListProvider = ({
 	}, [selectedFilters, query, listingEntities, filterByFavorites, favorites]);
 
 	const handleFilterListingsByLocation = selectedLocation => {
-		const { filteredListings } = filterListingsByLocation(
+		let { filteredListings } = filterListingsByLocation(
 			allListings,
 			selectedLocation,
 			listingEntities
 		);
-		setFilteredListings(filteredListings);
+
+		setNewFilteredListings(filteredListings);
 		//setMapItems(mapItems);
 	};
 
@@ -192,7 +208,7 @@ export const MapListProvider = ({
 			filteredListings,
 			mapItems,
 			query,
-			setFilteredListings,
+			setNewFilteredListings,
 			setQuery,
 			listingEntities,
 			selectedFilters,
@@ -214,7 +230,9 @@ export const MapListProvider = ({
 			navigateToDetails,
 			navigateToEasyApply,
 			Link,
-			linkFormat
+			linkFormat,
+			sortSetting,
+			setSortSetting
 		}}>
 			{children}
 		</MapListContext.Provider>

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/hooks/useList.js

@@ -1,9 +1,6 @@
 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");
@@ -14,7 +11,7 @@ const getDefaultItemId = () => {
 	}
 };
 
-const useListLogic = () => {
+const useListLogic = filteredListings => {
 	const [itemLimit, setItemLimit] = useState(100);
 	const [expandedId] = useState(getDefaultItemId());
 	const [sortSetting, setSortSetting] = useState(getStorageObject('sortSetting', null));
@@ -23,14 +20,6 @@ const useListLogic = () => {
 	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, {
@@ -59,10 +48,9 @@ const useListLogic = () => {
 		if (parseInt(savedScrollPosition) > 3000) {
 			setItemLimit(savedScrollPosition / 10);
 		}
-		if (savedScrollPosition && scrollPosition != null && scrollContainerRef.current) {
-			let scrollContainerRefCurrent = scrollContainerRef.current;
+		if (savedScrollPosition && scrollContainerRef.current) {
 			setTimeout(() => {
-				scrollContainerRefCurrent = parseInt(savedScrollPosition, 10);
+				scrollContainerRef.current.scrollTop = parseInt(savedScrollPosition, 10);
 			}, 300);
 		}
 	}, []);
@@ -95,7 +83,7 @@ const useListLogic = () => {
 		}
 	};
 
-	return { itemLimit, expandedId, sortSetting, scrollPosition, loader, scrollContainerRef, itemRefs, setSortSetting, setScrollPosition, dynamicSort, filteredListings };
+	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
+};