@abcagency/hc-ui-components 1.4.22 → 1.5.1

package/src/contexts/mapListContext.tsx

@@ -53,7 +53,6 @@ interface MapListContextProps {
   hiddenFilters?: string[];
   containerStyle?: any;
   ExpandListComponent?: React.ComponentType<{ listing: any }> | ((listing: any) => JSX.Element) | null;
-  noEntities?: boolean;
 }
 
 const MapListContext = createContext<MapListContextProps | undefined>(undefined);
@@ -66,10 +65,10 @@ export const useMapList = () => {
 	return context;
 };
 
-const getQuery = (): string | null => {
+const getQuery = (localStorageKey: string = ''): string | null => {
 	let query: string | null = null;
 	if (typeof window !== 'undefined') {
-		query = localStorage.getItem('query');
+		query = localStorage.getItem(localStorageKey + 'query');
 	}
 	return query;
 };
@@ -94,11 +93,8 @@ interface MapListProviderProps {
   defaultFilters?: Record<string, any>;
   containerStyle?: any;
 	localStorageKey: string;
-	getListingEntitiesCallback?: (origin?: string) => Promise<any>;
+	getListingEntitiesCallback?: (entityIds: number[], origin?: string) => Promise<ListingEntity[]>;
   ExpandListComponent?: React.ComponentType<{ listing: Listing }> | ((listing: Listing) => JSX.Element) | null;
-  hideMap?: boolean;
-  hideFilters?: boolean;
-  noEntities?: boolean;
 }
 
 export const MapListProvider: React.FC<MapListProviderProps> = ({
@@ -122,21 +118,30 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 	containerStyle,
 	ExpandListComponent,
 	getListingEntitiesCallback,
-	localStorageKey,
-	hideMap = false,
-	hideFilters = false,
-	noEntities = false
+	localStorageKey
 }) => {
 	const firstLoadFilters = () =>{
 		let urlFilters = filtersFromURL(window.location)?.filters;
 		return  (setFiltersUrl === true && urlFilters && Object.keys(urlFilters).length > 0) ? urlFilters  : getStorageObject(localStorageKey + 'selectedFilters', {}) || {}
 	}
+	
+	const firstLoadQuery = (): string | null => {
+		if (resetFilters) return null;
+		// Check URL first
+		const urlData = filtersFromURL(window.location);
+		if (setFiltersUrl === true && urlData?.query) {
+			return urlData.query;
+		}
+		// Fall back to localStorage
+		return getQuery(localStorageKey);
+	}
+	
 	const [allListings, setAllListings] = useState<Listing[]>([]);
 	const [filteredListings, setFilteredListings] = useState<Listing[]>([]);
 	const [loading, setLoading] = useState<boolean>(false);
-	const [mapItems, setMapItems] = useState<any>(getStorageObject('mapItems', []) || []);
-	const [query, setQuery] = useState<string | null>(() => resetFilters ? null : getQuery());
-	const [sortSetting, setSortSetting] = useState<{ field: string; type: string }>(getStorageObject('sortSetting', { field: 'position', type: 'asc' }) || { field: 'position', type: 'asc' });
+	const [mapItems, setMapItems] = useState<any>(getStorageObject(localStorageKey + 'mapItems', []) || []);
+	const [query, setQuery] = useState<string | null>(() => firstLoadQuery());
+	const [sortSetting, setSortSetting] = useState<{ field: string; type: string }>(getStorageObject(localStorageKey + 'sortSetting', { field: 'position', type: 'asc' }) || { field: 'position', type: 'asc' });
 	const [listingEntities, setListingEntities] = useState<Record<number, ListingEntity> | null>({});
 	const [firstLoad, setFirstLoad] = useState<boolean>(true);
 	const [commuteLocation, setCommuteLocation] = useState<any | null>(getStorageObject('commuteLocation'));
@@ -154,45 +159,47 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 
 	useEffect(() => {
 		if (!sortSetting) return;
-		localStorage.setItem('sortSetting', JSON.stringify(sortSetting));
+		localStorage.setItem(localStorageKey + 'sortSetting', JSON.stringify(sortSetting));
 		setNewFilteredListings(filteredListings);
-	}, [sortSetting]);
+	}, [sortSetting, localStorageKey]);
 
 	useEffect(() => {
-		const loadedFavorites = JSON.parse(localStorage.getItem('favorites') || '[]');
+		const loadedFavorites = JSON.parse(localStorage.getItem(localStorageKey + 'favorites') || '[]');
 		setFavorites(loadedFavorites);
-	}, []);
+	}, [localStorageKey]);
 
 	useEffect(() => {
-		setStorageObject("commuteLocation", commuteLocation);
-	}, [commuteLocation]);
-
+		setStorageObject(localStorageKey + "commuteLocation", commuteLocation);
+	}, [commuteLocation, localStorageKey]);
 
 	useEffect(() => {
-		if (!commuteLocation || noEntities) return;
+		if (!commuteLocation) return;
 
 		async function fetchEntities() {
+			const distinctEntityIds = [
+				...new Set(allListings.map(listing => listing.entityId ?? -1))
+			];
 			try {
-				let fetchedEntities;
-				if (getListingEntitiesCallback) {
-					fetchedEntities = await getListingEntitiesCallback(`${commuteLocation.lat}, ${commuteLocation.lng}`);
-				} else {
-					fetchedEntities = await getListingEntities(`${commuteLocation.lat}, ${commuteLocation.lng}`);
-				}
+				console.log(getListingEntitiesCallback);
+				console.log("fetching entities")
+				const fetchedEntities = getListingEntitiesCallback !== null && getListingEntitiesCallback !== undefined ? await getListingEntitiesCallback(distinctEntityIds,
+					`${commuteLocation.lat}, ${commuteLocation.lng}`) : await getListingEntities(
+					distinctEntityIds,
+					`${commuteLocation.lat}, ${commuteLocation.lng}`
+				);
 				setListingEntities(fetchedEntities);
-				// Update travelTime on listings
-				const newFilteredListings: Listing[] = [...filteredListings];
+				const newFilteredListings: Listing[] = [...filteredListings] ?? [];
 				for (let i = 0; i < allListings.length; i++) {
 					const listing = newFilteredListings[i];
 					if (
 						listing &&
 						listing.fields &&
-						listing.fields.entityKey &&
-						listing.fields.entityKey !== ''
+						listing.entityId !== undefined &&
+						listing.entityId !== -1
 					) {
-						const entityKey = listing.fields.entityKey;
-						// Try exact match first, then lowercase match for case-insensitive lookup
-						const travelTime = (fetchedEntities[entityKey] || fetchedEntities[entityKey.toLowerCase()])?.travelTime;
+						const entityId = listing.entityId;
+						const travelTime = fetchedEntities[entityId]?.travelTime;
+
 						if (travelTime !== undefined && listing.fields) {
 							listing.fields.travelTime = travelTime;
 						}
@@ -204,35 +211,35 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 		}
 
 		fetchEntities();
-	}, [commuteLocation, allListings, siteConfig.companyId, getListingEntitiesCallback, noEntities]);
+	}, [commuteLocation, allListings, siteConfig.companyId]);
 
 	useEffect(() => {
 		const handleFetchListings = async () => {
-		if (!(getStorageObject('listings', []) || []).length) {
-			setLoading(true);
-		}
+			if (!getStorageObject(localStorageKey + 'listings') ?? [].length) {
+				setLoading(true);
+			}
 
-		try {
-			const {
-				listingsResult,
-				entitiesByKey,
-				distinctItems
-			} = await fetchListings(commuteLocation, entities, listings, getListingEntitiesCallback, noEntities);
-			if (defaultFilters) {
-				const filteredListings = listingsResult.filter(listing => {
-				if (!listing.fields) return false;
+			try {
+				const {
+					listingsResult,
+					fetchedEntities,
+					distinctItems
+				} = await fetchListings(commuteLocation, entities, listings, getListingEntitiesCallback);
+				if (defaultFilters) {
+					const filteredListings = listingsResult.filter(listing => {
+					if (!listing.fields) return false;
 
-				return Object.keys(defaultFilters).every(filterKey => {
-					const filterValues = defaultFilters[filterKey as keyof typeof defaultFilters];
-					const listingValue = listing.fields ? listing.fields[filterKey as keyof typeof listing.fields] : null;
-					return filterValues.includes(listingValue);
+					return Object.keys(defaultFilters).every(filterKey => {
+						const filterValues = defaultFilters[filterKey as keyof typeof defaultFilters];
+						const listingValue = listing.fields ? listing.fields[filterKey as keyof typeof listing.fields] : null;
+						return filterValues.includes(listingValue);
+					});
 				});
-			});
-			setAllListings(filteredListings);
-		} else {
-			setAllListings(listingsResult);
-		}
-			setListingEntities(entitiesByKey);
+				setAllListings(filteredListings);
+			} else {
+				setAllListings(listingsResult);
+			}
+				setListingEntities(fetchedEntities);
 				setMapItems(distinctItems);
 			} catch (error) {
 				console.log(error);
@@ -265,7 +272,7 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 			if (firstLoad && tempSelectedFilters) {
 				// Update URL with filters if needed
 			} else if (Object.keys(tempSelectedFilters).length === 0 && !firstLoad) {
-				localStorage.removeItem('selectedFilters');
+				localStorage.removeItem(localStorageKey + 'selectedFilters');
 			} else if (!firstLoad) {
 				setStorageObject(localStorageKey + 'selectedFilters', tempSelectedFilters);
 			}
@@ -273,7 +280,7 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 			{
 				updateURLWithFilters(tempSelectedFilters, window.location, tempQuery, handleUrlUpdate);
 			}
-			tempQuery != null ? localStorage.setItem('query', tempQuery) : localStorage.removeItem('query');
+			tempQuery != null ? localStorage.setItem(localStorageKey + 'query', tempQuery) : localStorage.removeItem(localStorageKey + 'query');
 			setMapItems(mapItems);
 
 			if (tempSelectedFilters) {
@@ -315,10 +322,10 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 
 	const handleSettingFavorites = (newFavorites: number[] | null) => {
 		if (newFavorites == null) {
-			localStorage.removeItem('favorites');
+			localStorage.removeItem(localStorageKey + 'favorites');
 		} else {
 			setFavorites(newFavorites);
-			localStorage.setItem('favorites', JSON.stringify(newFavorites));
+			localStorage.setItem(localStorageKey + 'favorites', JSON.stringify(newFavorites));
 		}
 	};
 
@@ -362,8 +369,7 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 			defaultFilters,
 			hiddenFilters,
 			containerStyle,
-			ExpandListComponent,
-			noEntities
+			ExpandListComponent
 		}}>
 			{children}
 		</MapListContext.Provider>

package/src/services/listingAggregatorService.ts

@@ -6,8 +6,7 @@ import { ListingEntity } from '~/types/ListingEntity';
 
 interface FetchListingsResult {
   listingsResult: Listing[];
-   entitiesByKey: Record<string, ListingEntity>;
-
+  fetchedEntities: Record<number, ListingEntity>;
   distinctItems: any; // Update this type based on the return type of getDistinctItemsByProximity
 }
 
@@ -15,46 +14,39 @@ const fetchListings = async (
 	commuteLocation: any | null = null,
 	entities: ListingEntity[] | null,
 	listings: Listing[] | null,
-	getListingEntitiesCallback?: (origin?: string) => Promise<ListingEntity[]>,
-	noEntities: boolean = false
+	getListingEntitiesCallback?: (entityIds: number[], origin?: string) => Promise<ListingEntity[]>,
 ): Promise<FetchListingsResult> => {
 	try {
 		const listingsResult = listings && listings.length > 0 ? listings : await getListings();
-
-		// Only fetch entities if noEntities is false
-		const fetchedEntities = noEntities ? {} : (
-			!commuteLocation
-				? entities && entities.length > 0 ? entities : !getListingEntitiesCallback ? await getListingEntities() : await getListingEntitiesCallback()
-				: !getListingEntitiesCallback ? await getListingEntities(
-					`${commuteLocation.lat}, ${commuteLocation.lng}`
-				) : await getListingEntitiesCallback(
-					`${commuteLocation.lat}, ${commuteLocation.lng}`)
-		);
-		 const entitiesByKey = fetchedEntities;
-		// Update travel time only if entities were fetched
-		if (!noEntities && entitiesByKey) {
-			for (let i = 0; i < listingsResult.length; i++) {
-				const listing = listingsResult[i];
-				if (listing.fields && listing.fields.entityKey && listing.fields.entityKey !== '' && listing.fields) {
-					// Try exact match first, then lowercase match for case-insensitive lookup
-					const entity = entitiesByKey[listing.fields.entityKey] || entitiesByKey[listing.fields.entityKey.toLowerCase()];
-					console.log("Entity for listing with travel time", listing.fields.entityKey, entity);
-
-					if (entity) {
-						listing.fields.travelTime = entity.travelTime;
-					}
+		const distinctEntityIds: number[] = [
+			...new Set(listingsResult.map(listing => listing.entityId))
+		] as number[];
+
+		const fetchedEntities = !commuteLocation
+			? entities && entities.length > 0 ? entities : !getListingEntitiesCallback ? await getListingEntities(distinctEntityIds) : await getListingEntitiesCallback(distinctEntityIds)
+			: !getListingEntitiesCallback ? await getListingEntities(
+				distinctEntityIds,
+				`${commuteLocation.lat}, ${commuteLocation.lng}`
+			) : await getListingEntitiesCallback(	distinctEntityIds,
+				`${commuteLocation.lat}, ${commuteLocation.lng}`);
+		for (let i = 0; i < listingsResult.length; i++) {
+			const listing = listingsResult[i];
+			if (listing.entityId && listing.entityId !== -1 && listing.fields) {
+				const entity = fetchedEntities[listing.entityId];
+				if (entity) {
+					listing.fields.travelTime = entity.travelTime;
 				}
 			}
 		}
 
 		const distinctItems = getDistinctItemsByProximity(
 			listingsResult,
-			entitiesByKey || {}
+			fetchedEntities
 		);
 
 		return {
 			listingsResult,
-			entitiesByKey,
+			fetchedEntities,
 			distinctItems
 		};
 	} catch (error) {

package/src/services/listingEntityService.ts

@@ -1,9 +1,9 @@
 import api from '~/apis/hcApi';
+import { ListingEntity } from '~/types/ListingEntity';
 
-export const getListingEntities = async (origin = ''): Promise<any> => {
+export const getListingEntities = async (entityIds: number[], origin = ''): Promise<ListingEntity[]> => {
 	try {
-		//need to update / or add better endpoint fo this to match original functioanlity
-		const response = await api.get<any>(`/listingentities/MapEntities?origin=${origin}`);
+		const response = await api.post<ListingEntity[]>(`/ListingEntities?origin=${origin}`, entityIds);
 		return response;
 	} catch (error) {
 		console.error("Error fetching listing entities:", error);

package/src/services/listingService.ts

@@ -5,8 +5,18 @@ import { Listing } from '../types/Listings';
 
 export const getListings = async (params?: GetListingsParams): Promise<Listing[]> => {
 	try {
-		const response = await api.get(`/joblistings/maplistings`);
+		const query = new URLSearchParams();
 
+		if (params) {
+			if (params.location) params.location.forEach(loc => query.append('location', loc));
+			if (params.category) params.category.forEach(cat => query.append('category', cat));
+			if (params.categoryClass) params.categoryClass.forEach(catClass => query.append('categoryClass', catClass));
+			if (params.education) params.education.forEach(edu => query.append('education', edu));
+			if (params.city) params.city.forEach(cty => query.append('city', cty));
+			if (params.state) params.state.forEach(st => query.append('state', st));
+		}
+
+		const response = await api.get(`/Listings?${query.toString()}`);
 		return response as Listing[];
 	} catch (error) {
 		console.error(error);

package/src/types/GetListingParams.ts

@@ -1,7 +1,7 @@
 export type GetListingsParams = {
 	location?: string[];
 	category?: string[];
-	subCategory?: string[];
+	categoryClass?: string[];
 	education?: string[];
 	city?: string[];
 	state?: string[];

package/src/types/ListingEntity.ts

@@ -1,10 +1,9 @@
 import { Address } from './Address';
 
 export type ListingEntity = {
-  id: string;
+  id: number;
   listingId: number;
   latitude: number;
-	entityKey: string;
   longitude: number;
   entityDisplayName?: string;
   address?: Address;

package/src/types/ListingFields.ts

@@ -2,10 +2,9 @@ export type ListingFields = {
 	posted?: string;
 	subTitle?: string;
 	education?: string;
-	title?: string;
+	position?: string;
 	category?: string;
-	subCategory?: string;
-	applyUrl?: string;
+	categoryClass?: string;
 	shift?: string;
 	custom1?: string;
 	custom2?: string;
@@ -23,6 +22,5 @@ export type ListingFields = {
 	useClientJobUrl?: boolean;
 	dateCreated: Date;
 	dateLastEdited?: Date;
-	entityKey: string;
 	travelTime?: string;
   }

package/src/types/Listings.ts

@@ -7,6 +7,7 @@ import { SimilarListing } from './SimilarListing';
 export type Listing = {
   id: number;
   fields?: ListingFields;
+  entityId?: number;
   applyUrl?: string;
   applyOnline?: number;
   detailsUrl?: string;

package/src/util/filterUtil.js

@@ -82,17 +82,17 @@ export const generateFilterOptions = (
 			if (fieldName === parentField && filterOptions?.filters) {
 				return filterOptions.filters.find(filter => filter.id === fieldName);
 			}
-			if(fieldName == 'category'){
+			if(fieldName == 'categoryClass'){
 				return {
 					id: fieldName,
 					title: siteConfig.fieldNames[fieldName],
 					items: getFilterOptions(allListings, allListings, fieldName)
 				};
 			}
-			if(fieldName == 'subCategory' && selectedFilters.category){
-				const categoryKeys = Object.keys(selectedFilters.category);
+			if(fieldName == 'category' && selectedFilters.categoryClass){
+				const categoryClassKeys = Object.keys(selectedFilters.categoryClass);
 				const filteredListings = allListings.filter(
-					x => categoryKeys.includes(x.fields?.category)
+					x => categoryClassKeys.includes(x.fields?.categoryClass)
 				);
 				return {
 					id: fieldName,
@@ -255,9 +255,9 @@ function searchResults(results, query) {
 		'fields.posted',
 		'fields.subtitle',
 		'fields.education',
-		'fields.title',
+		'fields.position',
 		'fields.category',
-		'fields.subCategory',
+		'fields.categoryclass',
 		'fields.shift',
 		'fields.citystate',
 		'fields.city',

package/src/util/mapUtil.js

@@ -1,59 +1,54 @@
-export const getDistinctItemsByProximity = (items, listingEntitiesDetailsInput) => {
+export const getDistinctItemsByProximity = (items, listingEntitiesDetails) => {
 	const clusters = {};
 
-	if (!listingEntitiesDetailsInput) return [];
-
-	const listingEntitiesDetails = Array.isArray(listingEntitiesDetailsInput)
-		? listingEntitiesDetailsInput.reduce((acc, entity) => {
-			if (entity?.entityKey) acc[entity.entityKey.toLowerCase()] = entity;
-			return acc;
-		  }, {})
-		: Object.keys(listingEntitiesDetailsInput).reduce((acc, key) => {
-			acc[key.toLowerCase()] = listingEntitiesDetailsInput[key];
-			return acc;
-		  }, {});
+	if (!listingEntitiesDetails) return [];
 
 	const closeItemPairs = findCloseItems(listingEntitiesDetails);
 	if (closeItemPairs.length > 0) {
-		const adjusted = adjustItemPositions(listingEntitiesDetails, closeItemPairs);
-		Object.assign(listingEntitiesDetails, adjusted);
+		listingEntitiesDetails = adjustItemPositions(
+			listingEntitiesDetails,
+			closeItemPairs
+		);
 	}
 
 	items?.forEach(item => {
-		const entityKey = item?.fields?.entityKey;
-		if (!entityKey || entityKey === '-1') return;
-		const entityDetails = listingEntitiesDetails[entityKey.toLowerCase()];
-		if (!entityDetails) {
-			console.error(`Details not found for entityKey: ${entityKey}`);
-			return;
-		}
+		if(item.entityId !== -1){
 
-		item.mapDetails = entityDetails;
+			const entityDetails = listingEntitiesDetails[item.entityId];
 
-		const normalizedEntityKey = entityKey.toLowerCase();
-		if (!clusters[normalizedEntityKey]) {
-			clusters[normalizedEntityKey] = {
-				...entityDetails,
-				items: { [item.id]: item }
-			};
-		} else {
-			clusters[normalizedEntityKey].items[item.id] = item;
-		}
+			if (!entityDetails) {
+				console.error(`Details not found for entityId: ${item.entityId}`);
+				return;
+			}
+
+			item.mapDetails = entityDetails;
+
+			if (!clusters[item.entityId]) {
+				clusters[item.entityId] = {
+					...item.mapDetails,
+					items: { [item.id]: item }
+				};
+			} else {
+				clusters[item.entityId].items[item.id] = item;
+			}}
 	});
 
 	return Object.values(clusters);
 };
 
-export const findCloseItems = entitiesByKey => {
+export const findCloseItems = itemsObj => {
 	const closeItems = [];
-	const items = Object.values(entitiesByKey); // Convert object to array
+	const items = Object.values(itemsObj); // Convert object to array for iteration
 	const proximityThreshold = 0.0001;
 
 	for (let i = 0; i < items.length; i++) {
 		for (let j = i + 1; j < items.length; j++) {
 			const distanceLat = Math.abs(items[i].latitude - items[j].latitude);
 			const distanceLng = Math.abs(items[i].longitude - items[j].longitude);
-			if (distanceLat < proximityThreshold && distanceLng < proximityThreshold) {
+			if (
+				distanceLat < proximityThreshold &&
+				distanceLng < proximityThreshold
+			) {
 				closeItems.push({ item1: items[i], item2: items[j] });
 			}
 		}
@@ -62,18 +57,14 @@ export const findCloseItems = entitiesByKey => {
 	return closeItems;
 };
 
-export const adjustItemPositions = (entitiesByKey, closeItemPairs) => {
+export const adjustItemPositions = (itemsObj, closeItemPairs) => {
 	const adjustmentValue = 0.0001;
-	const adjustedItems = { ...entitiesByKey };
+	const adjustedItems = { ...itemsObj }; // Create a shallow copy of the object
 
 	closeItemPairs.forEach(pair => {
-		const key2 = pair.item2.entityKey;
-		if (adjustedItems[key2]) {
-			adjustedItems[key2] = {
-				...adjustedItems[key2],
-				latitude: adjustedItems[key2].latitude + adjustmentValue,
-				longitude: adjustedItems[key2].longitude + adjustmentValue
-			};
+		if (adjustedItems[pair.item1.id] && adjustedItems[pair.item2.id]) {
+			adjustedItems[pair.item2.id].latitude += adjustmentValue;
+			adjustedItems[pair.item2.id].longitude += adjustmentValue;
 		}
 	});
 
@@ -83,15 +74,13 @@ export const adjustItemPositions = (entitiesByKey, closeItemPairs) => {
 export const clusterOptions = (clusterGridSize, fillColor) => {
 	return {
 		gridSize: clusterGridSize,
-		maxZoom: 15,
-		styles: [
-			{
-				url: createSvgDataUri(fillColor),
-				textColor: 'white',
-				height: 40,
-				width: 40
-			}
-		]
+		maxZoom:15,
+		styles:[{
+			url: createSvgDataUri(fillColor),
+			textColor:'white',
+			height: 40,
+			width: 40
+		}]
 	};
 };
 

package/src/styles/components.css

@@ -1,30 +0,0 @@
-@config "../../tailwind.config.js";
-
-/* Only include components and utilities - no base styles */
-@tailwind components;
-@tailwind utilities;
-
-@layer components {
-	.track * {
-		@apply hc-pointer-events-none;
-	}
-
-	.stretched-link::after {
-		@apply hc-content-[''] hc-absolute hc-inset-0 hc-z-[1] hc-pointer-events-auto hc-bg-transparent;
-	}
-}
-
-/* Component-specific utilities */
-.fit-content {
-	height: fit-content;
-}
-
-/* CSS Variables for theming - these should be set by the consuming app */
-:root {
-	--ui-text: #000000;
-	--ui-accent: #959595;
-	--primary: #959595;
-	--primary-dark: #959595;
-	--secondary: #959595;
-	--secondary-dark: #959595;
-}