@abcagency/hc-ui-components 1.5.1 → 1.5.3

package/src/contexts/mapListContext.tsx

@@ -53,6 +53,7 @@ interface MapListContextProps {
   hiddenFilters?: string[];
   containerStyle?: any;
   ExpandListComponent?: React.ComponentType<{ listing: any }> | ((listing: any) => JSX.Element) | null;
+  noEntities?: boolean;
 }
 
 const MapListContext = createContext<MapListContextProps | undefined>(undefined);
@@ -93,8 +94,11 @@ interface MapListProviderProps {
   defaultFilters?: Record<string, any>;
   containerStyle?: any;
 	localStorageKey: string;
-	getListingEntitiesCallback?: (entityIds: number[], origin?: string) => Promise<ListingEntity[]>;
+	getListingEntitiesCallback?: (origin?: string) => Promise<any>;
   ExpandListComponent?: React.ComponentType<{ listing: Listing }> | ((listing: Listing) => JSX.Element) | null;
+  hideMap?: boolean;
+  hideFilters?: boolean;
+  noEntities?: boolean;
 }
 
 export const MapListProvider: React.FC<MapListProviderProps> = ({
@@ -118,13 +122,16 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 	containerStyle,
 	ExpandListComponent,
 	getListingEntitiesCallback,
-	localStorageKey
+	localStorageKey,
+	hideMap = false,
+	hideFilters = false,
+	noEntities = false
 }) => {
 	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
@@ -135,7 +142,7 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 		// Fall back to localStorage
 		return getQuery(localStorageKey);
 	}
-	
+
 	const [allListings, setAllListings] = useState<Listing[]>([]);
 	const [filteredListings, setFilteredListings] = useState<Listing[]>([]);
 	const [loading, setLoading] = useState<boolean>(false);
@@ -144,7 +151,7 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 	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'));
+	const [commuteLocation, setCommuteLocation] = useState<any | null>(getStorageObject(localStorageKey + 'commuteLocation'));
 	const [selectedFilters, setSelectedFilters] = useState<Record<string, any>>(() => resetFilters ? {} : firstLoadFilters());
 	const [filterOptions, setFilterOptions] = useState<any>();
 	const [recruiters, setRecruiters] = useState<Record<number, Recruiter>>({});
@@ -161,7 +168,7 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 		if (!sortSetting) return;
 		localStorage.setItem(localStorageKey + 'sortSetting', JSON.stringify(sortSetting));
 		setNewFilteredListings(filteredListings);
-	}, [sortSetting, localStorageKey]);
+	}, [sortSetting, localStorageKey, filteredListings]);
 
 	useEffect(() => {
 		const loadedFavorites = JSON.parse(localStorage.getItem(localStorageKey + 'favorites') || '[]');
@@ -172,34 +179,32 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 		setStorageObject(localStorageKey + "commuteLocation", commuteLocation);
 	}, [commuteLocation, localStorageKey]);
 
+
 	useEffect(() => {
-		if (!commuteLocation) return;
+		if (!commuteLocation || noEntities) return;
 
 		async function fetchEntities() {
-			const distinctEntityIds = [
-				...new Set(allListings.map(listing => listing.entityId ?? -1))
-			];
 			try {
-				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}`
-				);
+				let fetchedEntities;
+				if (getListingEntitiesCallback) {
+					fetchedEntities = await getListingEntitiesCallback(`${commuteLocation.lat}, ${commuteLocation.lng}`);
+				} else {
+					fetchedEntities = await getListingEntities(`${commuteLocation.lat}, ${commuteLocation.lng}`);
+				}
 				setListingEntities(fetchedEntities);
-				const newFilteredListings: Listing[] = [...filteredListings] ?? [];
+				// Update travelTime on listings
+				const newFilteredListings: Listing[] = [...filteredListings];
 				for (let i = 0; i < allListings.length; i++) {
 					const listing = newFilteredListings[i];
 					if (
 						listing &&
 						listing.fields &&
-						listing.entityId !== undefined &&
-						listing.entityId !== -1
+						listing.fields.entityKey &&
+						listing.fields.entityKey !== ''
 					) {
-						const entityId = listing.entityId;
-						const travelTime = fetchedEntities[entityId]?.travelTime;
-
+						const entityKey = listing.fields.entityKey;
+						// Try exact match first, then lowercase match for case-insensitive lookup
+						const travelTime = (fetchedEntities[entityKey] || fetchedEntities[entityKey.toLowerCase()])?.travelTime;
 						if (travelTime !== undefined && listing.fields) {
 							listing.fields.travelTime = travelTime;
 						}
@@ -211,35 +216,35 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 		}
 
 		fetchEntities();
-	}, [commuteLocation, allListings, siteConfig.companyId]);
+	}, [commuteLocation, allListings, siteConfig.companyId, getListingEntitiesCallback, noEntities]);
 
 	useEffect(() => {
 		const handleFetchListings = async () => {
-			if (!getStorageObject(localStorageKey + 'listings') ?? [].length) {
-				setLoading(true);
-			}
+		if (!(getStorageObject(localStorageKey + 'listings', []) || []).length) {
+			setLoading(true);
+		}
 
-			try {
-				const {
-					listingsResult,
-					fetchedEntities,
-					distinctItems
-				} = await fetchListings(commuteLocation, entities, listings, getListingEntitiesCallback);
-				if (defaultFilters) {
-					const filteredListings = listingsResult.filter(listing => {
-					if (!listing.fields) return false;
+		try {
+			const {
+				listingsResult,
+				entitiesByKey,
+				distinctItems
+			} = await fetchListings(commuteLocation, entities, listings, getListingEntitiesCallback, noEntities);
+			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(fetchedEntities);
+			});
+			setAllListings(filteredListings);
+		} else {
+			setAllListings(listingsResult);
+		}
+			setListingEntities(entitiesByKey);
 				setMapItems(distinctItems);
 			} catch (error) {
 				console.log(error);
@@ -250,12 +255,12 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 	}, [query, siteConfig, commuteLocation]);
 
 	useEffect(() => {
-		const processListings = () => {
+		const processListings = async () => {
 			let filteredListings: Listing[];
 			let tempSelectedFilters = selectedFilters;
 			let tempQuery = query;
 
-			const { mapItems, filteredListings: tempFilteredListings } = applyFilters(
+			const { mapItems, filteredListings: tempFilteredListings } = await applyFilters(
 				allListings,
 				tempSelectedFilters,
 				tempQuery,
@@ -369,7 +374,8 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 			defaultFilters,
 			hiddenFilters,
 			containerStyle,
-			ExpandListComponent
+			ExpandListComponent,
+			noEntities
 		}}>
 			{children}
 		</MapListContext.Provider>

package/src/services/listingAggregatorService.ts

@@ -6,7 +6,8 @@ import { ListingEntity } from '~/types/ListingEntity';
 
 interface FetchListingsResult {
   listingsResult: Listing[];
-  fetchedEntities: Record<number, ListingEntity>;
+   entitiesByKey: Record<string, ListingEntity>;
+
   distinctItems: any; // Update this type based on the return type of getDistinctItemsByProximity
 }
 
@@ -14,39 +15,46 @@ const fetchListings = async (
 	commuteLocation: any | null = null,
 	entities: ListingEntity[] | null,
 	listings: Listing[] | null,
-	getListingEntitiesCallback?: (entityIds: number[], origin?: string) => Promise<ListingEntity[]>,
+	getListingEntitiesCallback?: (origin?: string) => Promise<ListingEntity[]>,
+	noEntities: boolean = false
 ): Promise<FetchListingsResult> => {
 	try {
 		const listingsResult = listings && listings.length > 0 ? listings : await getListings();
-		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;
+
+		// 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 distinctItems = getDistinctItemsByProximity(
 			listingsResult,
-			fetchedEntities
+			entitiesByKey || {}
 		);
 
 		return {
 			listingsResult,
-			fetchedEntities,
+			entitiesByKey,
 			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 (entityIds: number[], origin = ''): Promise<ListingEntity[]> => {
+export const getListingEntities = async (origin = ''): Promise<any> => {
 	try {
-		const response = await api.post<ListingEntity[]>(`/ListingEntities?origin=${origin}`, entityIds);
+		//need to update / or add better endpoint fo this to match original functioanlity
+		const response = await api.get<any>(`/listingentities/MapEntities?origin=${origin}`);
 		return response;
 	} catch (error) {
 		console.error("Error fetching listing entities:", error);

package/src/services/listingService.ts

@@ -5,18 +5,8 @@ import { Listing } from '../types/Listings';
 
 export const getListings = async (params?: GetListingsParams): Promise<Listing[]> => {
 	try {
-		const query = new URLSearchParams();
+		const response = await api.get(`/joblistings/maplistings`);
 
-		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/styles/components.css

@@ -0,0 +1,30 @@
+@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;
+}

package/src/types/GetListingParams.ts

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

package/src/types/ListingEntity.ts

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

package/src/types/ListingFields.ts

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

package/src/types/Listings.ts

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

package/src/util/algoliaSearchUtil.js

@@ -0,0 +1,91 @@
+import { liteClient as algoliasearch } from 'algoliasearch/lite';
+
+let algoliaClient = null;
+let algoliaIndexName = null;
+
+/**
+ * Initialize Algolia search client
+ * @param {string} appId - Algolia Application ID
+ * @param {string} apiKey - Algolia Search API Key
+ * @param {string} indexName - Algolia Index Name
+ */
+export const initializeAlgoliaSearch = (appId, apiKey, indexName) => {
+	if (!appId || !apiKey || !indexName) {
+		console.warn('Algolia search not initialized: missing configuration');
+		return false;
+	}
+	
+	try {
+		algoliaClient = algoliasearch(appId, apiKey);
+		algoliaIndexName = indexName;
+		return true;
+	} catch (error) {
+		console.error('Failed to initialize Algolia:', error);
+		return false;
+	}
+};
+
+/**
+ * Check if Algolia is initialized and available
+ */
+export const isAlgoliaAvailable = () => {
+	return algoliaClient !== null && algoliaIndexName !== null;
+};
+
+/**
+ * Search using Algolia and return matching listing IDs
+ * @param {string} query - Search query
+ * @returns {Promise<number[]>} Array of listing IDs that match the search
+ */
+export const searchAlgolia = async (query) => {
+	if (!isAlgoliaAvailable()) {
+		throw new Error('Algolia search is not initialized');
+	}
+
+	try {
+		const { results } = await algoliaClient.search({
+			requests: [
+				{
+					indexName: algoliaIndexName,
+					query: query,
+					hitsPerPage: 1000 // Adjust based on your needs
+				}
+			]
+		});
+
+		// Extract IDs from the results
+		const hits = results[0]?.hits || [];
+		const listingIds = hits.map(hit => {
+			// Algolia objectID might be the listing ID, or it might be in a field
+			// Adjust this based on your Algolia index structure
+			return hit.id || parseInt(hit.objectID);
+		}).filter(id => !isNaN(id));
+
+		return listingIds;
+	} catch (error) {
+		console.error('Algolia search failed:', error);
+		throw error;
+	}
+};
+
+/**
+ * Filter listings by Algolia search results
+ * @param {Array} listings - All listings to filter
+ * @param {string} query - Search query
+ * @returns {Promise<Array>} Filtered listings
+ */
+export const filterListingsByAlgoliaSearch = async (listings, query) => {
+	if (!query || !isAlgoliaAvailable()) {
+		return listings;
+	}
+
+	try {
+		const matchingIds = await searchAlgolia(query);
+		
+		// Filter listings to only include those with matching IDs
+		return listings.filter(listing => matchingIds.includes(listing.id));
+	} catch (error) {
+		console.error('Failed to filter by Algolia search, returning all listings:', error);
+		return listings;
+	}
+};

package/src/util/filterUtil.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-undef */
 import { getDistinctItemsByProximity } from '~/util/mapUtil';
+import { isAlgoliaAvailable, filterListingsByAlgoliaSearch } from '~/util/algoliaSearchUtil';
 
 import Fuse from 'fuse.js';
 
@@ -82,17 +83,17 @@ export const generateFilterOptions = (
 			if (fieldName === parentField && filterOptions?.filters) {
 				return filterOptions.filters.find(filter => filter.id === fieldName);
 			}
-			if(fieldName == 'categoryClass'){
+			if(fieldName == 'category'){
 				return {
 					id: fieldName,
 					title: siteConfig.fieldNames[fieldName],
 					items: getFilterOptions(allListings, allListings, fieldName)
 				};
 			}
-			if(fieldName == 'category' && selectedFilters.categoryClass){
-				const categoryClassKeys = Object.keys(selectedFilters.categoryClass);
+			if(fieldName == 'subCategory' && selectedFilters.category){
+				const categoryKeys = Object.keys(selectedFilters.category);
 				const filteredListings = allListings.filter(
-					x => categoryClassKeys.includes(x.fields?.categoryClass)
+					x => categoryKeys.includes(x.fields?.category)
 				);
 				return {
 					id: fieldName,
@@ -195,7 +196,7 @@ export const generateFilterOptions = (
 	return null;
 };
 
-export const applyFilters = (
+export const applyFilters = async (
 	allListings,
 	selectedFilters,
 	query,
@@ -239,7 +240,17 @@ export const applyFilters = (
 		}
 	}
 	if (query) {
-		results = searchResults(results, query);
+		// Use Algolia if available, otherwise fall back to Fuse.js
+		if (isAlgoliaAvailable()) {
+			try {
+				results = await filterListingsByAlgoliaSearch(results, query);
+			} catch (error) {
+				console.error('Algolia search failed, falling back to Fuse.js:', error);
+				results = searchResults(results, query);
+			}
+		} else {
+			results = searchResults(results, query);
+		}
 	}
 	const distinctItems = getDistinctItemsByProximity(results, listingEntities);
 	if (hasFavorite) {
@@ -255,9 +266,9 @@ function searchResults(results, query) {
 		'fields.posted',
 		'fields.subtitle',
 		'fields.education',
-		'fields.position',
+		'fields.title',
 		'fields.category',
-		'fields.categoryclass',
+		'fields.subCategory',
 		'fields.shift',
 		'fields.citystate',
 		'fields.city',