@abcagency/hc-ui-components 1.9.8 → 1.9.10

package/src/contexts/mapListContext.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useState, useEffect, useContext, useRef, ReactNode } from 'react';
 
-import { generateFilterOptions, applyFilters, filterListingsByLocation } from '~/util/filterUtil';
+import { generateFilterOptions, applyFilters, filterListingsByLocation, getFieldValue } from '~/util/filterUtil';
 import { getStorageObject, setStorageObject } from '~/util/localStorageUtil';
 import { updateURLWithFilters, filtersFromURL } from '~/util/urlFilterUtil';
 
@@ -223,13 +223,13 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 		if (setFiltersUrl === true && urlData?.query) {
 			return urlData.query;
 		}
-		
+
 		// Only fall back to localStorage if there's NO query param in URL
 		// This prevents localStorage from overriding empty query params
 		if (setFiltersUrl === true && typeof urlData?.query !== 'undefined') {
 			return null; // URL has query param but it's empty/null
 		}
-		
+
 		// Fall back to localStorage only if URL has no query param at all
 		return getQuery(localStorageKey);
 	}
@@ -252,17 +252,17 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 			const storedMapItems = getStorageObject(localStorageKey + 'mapItems', []) || [];
 			const storedSortSetting = getStorageObject(localStorageKey + 'sortSetting', { field: 'position', type: 'asc' }) || { field: 'position', type: 'asc' };
 			const storedCommuteLocation = getStorageObject(localStorageKey + 'commuteLocation');
-			
+
 			setMapItems(storedMapItems);
 			setSortSetting(storedSortSetting);
 			if (storedCommuteLocation) setCommuteLocation(storedCommuteLocation);
-			
+
 			// Load filters and query
 			if (!resetFilters) {
 				setSelectedFilters(firstLoadFilters());
 				setQuery(firstLoadQuery());
 			}
-			
+
 			setHasMounted(true);
 		}
 	}, [localStorageKey]);
@@ -305,11 +305,11 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 				if (!getListingEntitiesCallback) {
 					return;
 				}
-				
+
 				const fetchedEntities = await getListingEntitiesCallback(`${commuteLocation.lat}, ${commuteLocation.lng}`);
 				console.log('Fetched entities with travel times:', fetchedEntities);
 				setListingEntities(fetchedEntities);
-				
+
 				// Update travelTime on ALL listings (both allListings and filteredListings)
 				const updatedAllListings = allListings.map(listing => {
 					if (
@@ -333,7 +333,7 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 					}
 					return listing;
 				});
-				
+
 				console.log('Updated listings with travel times:', updatedAllListings.slice(0, 2));
 				setAllListings(updatedAllListings);
 			} catch (error) {
@@ -349,9 +349,9 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 	// Note: Commute location changes will fetch updated entities with travel times via separate useEffect
 	useEffect(() => {
 		if (!entities || entitiesInitialized.current) return;
-		
+
 		entitiesInitialized.current = true;
-		
+
 		// Handle both object (production format) and array (for backwards compatibility)
 		if (Array.isArray(entities)) {
 			// Convert array to object
@@ -389,50 +389,49 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 			let processedListings = listings;
 			if (defaultFilters) {
 				processedListings = listings.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 = getFieldValue(listing, filterKey);
+					return filterValues.includes(listingValue);
 				});
-			}
-
-			setAllListings(processedListings);
-			console.log('Set allListings to', processedListings.length, 'items');
-			
-			// Map items will be set when entities are processed
-			// For now, just set empty object - will be populated when entities arrive
-			setMapItems({});
-		} catch (error) {
-			console.error('Error processing listings:', error);
+			});
 		}
-		
-		setLoading(false);
-	}, [listings]);
 
-	useEffect(() => {
-		const processListings = async () => {
-			// Don't process if allListings hasn't been loaded yet
-			if (allListings.length === 0) {
-				console.log('processListings: Skipping - allListings is empty');
-				return;
-			}
+		setAllListings(processedListings);
+		console.log('Set allListings to', processedListings.length, 'items');
+		
+		// Map items will be set when entities are processed
+		// For now, just set empty object - will be populated when entities arrive
+		setMapItems({});
+	} catch (error) {
+		console.error('Error processing listings:', error);
+	}
+	
+	setLoading(false);
+}, [listings]);
+
+useEffect(() => {
+	const processListings = async () => {
+		// Don't process if allListings hasn't been loaded yet
+		if (allListings.length === 0) {
+			console.log('processListings: Skipping - allListings is empty');
+			return;
+		}
 
-			let filteredListings: Listing[];
-			let tempSelectedFilters = selectedFilters;
-			let tempQuery = query;
+		let filteredListings: Listing[];
+		let tempSelectedFilters = selectedFilters;
+		let tempQuery = query;
 
-			console.log('processListings: Running with query:', tempQuery, 'and', allListings.length, 'listings');
+		console.log('processListings: Running with query:', tempQuery, 'and', allListings.length, 'listings');
 
-			const { mapItems, filteredListings: tempFilteredListings } = await applyFilters(
+		const { mapItems, filteredListings: tempFilteredListings } = await applyFilters(
 				allListings,
 				tempSelectedFilters,
 				tempQuery,
 				listingEntities,
 				favorites,
-				siteConfig
+				siteConfig,
+				firstLoad
 			);
 			filteredListings = tempFilteredListings;
 

package/src/util/algoliaSearchUtil.js

@@ -1,6 +1,7 @@
 let algoliaClient = null;
 let algoliaIndexName = null;
 let algoliaSearchModule = null;
+let algoliaInitializing = false;
 
 /**
  * Lazy load algoliasearch to avoid SSR issues
@@ -26,17 +27,21 @@ export const initializeAlgoliaSearch = async (appId, apiKey, indexName) => {
 		return false;
 	}
 
+	algoliaInitializing = true;
 	try {
 		const algoliasearch = await getAlgoliaSearch();
 		if (!algoliasearch) {
 			console.warn('Algolia search not available (SSR context)');
+			algoliaInitializing = false;
 			return false;
 		}
 		algoliaClient = algoliasearch(appId, apiKey);
 		algoliaIndexName = indexName;
+		algoliaInitializing = false;
 		return true;
 	} catch (error) {
 		console.error('Failed to initialize Algolia:', error);
+		algoliaInitializing = false;
 		return false;
 	}
 };
@@ -48,6 +53,13 @@ export const isAlgoliaAvailable = () => {
 	return algoliaClient !== null && algoliaIndexName !== null;
 };
 
+/**
+ * Check if Algolia is currently initializing
+ */
+export const isAlgoliaInitializing = () => {
+	return algoliaInitializing;
+};
+
 /**
  * Search using Algolia and return matching listing IDs with their order
  * @param {string} query - Search query

package/src/util/fieldMapper.js

@@ -3,12 +3,16 @@ import React from 'react';
 import Grid from '~/components/modules/grid';
 
 import { capitalize } from '~/util/stringUtils';
+import { getFieldValue } from '~/util/filterUtil';
 
 const mapFieldsToGridItems = (item, fieldsShown) => {
-	const orderedFields = fieldsShown.filter(field => field in item.fields);
+	const orderedFields = fieldsShown.filter(field => {
+		const value = getFieldValue(item, field);
+		return value !== undefined && value !== null;
+	});
 
 	return orderedFields.map(field => {
-		let value = item.fields[field];
+		let value = getFieldValue(item, field);
 
 		return (
 			<Grid.Item key={field}>

package/src/util/filterUtil.js

@@ -1,14 +1,35 @@
 /* eslint-disable no-undef */
 import { getDistinctItemsByProximity } from '~/util/mapUtil';
-import { isAlgoliaAvailable, filterListingsByAlgoliaSearch } from '~/util/algoliaSearchUtil';
+import { isAlgoliaAvailable, isAlgoliaInitializing, filterListingsByAlgoliaSearch } from '~/util/algoliaSearchUtil';
 
 import Fuse from 'fuse.js';
 
+// Helper function to get field value from either fields or customFields
+export const getFieldValue = (listing, fieldKey) => {
+	// First check in fields
+	if (listing.fields && listing.fields[fieldKey] !== undefined && listing.fields[fieldKey] !== null) {
+		return listing.fields[fieldKey];
+	}
+	
+	// Then check in customFields array
+	if (listing.customFields && Array.isArray(listing.customFields)) {
+		const customField = listing.customFields.find(
+			cf => cf.id === fieldKey || cf.name === fieldKey
+		);
+		if (customField) {
+			return customField.value;
+		}
+	}
+	
+	return undefined;
+};
+
 export const getFilterOptions = (listings, filteredListings, field, excludeZeroCount = false) => {
 	const options = new Set();
 	listings.forEach(listing => {
-		if (listing.fields && listing.fields[field]) {
-			options.add(listing.fields[field]);
+		const value = getFieldValue(listing, field);
+		if (value) {
+			options.add(value);
 		}
 	});
 
@@ -18,8 +39,7 @@ export const getFilterOptions = (listings, filteredListings, field, excludeZeroC
 	});
 
 	filteredListings.forEach(listing => {
-		if (!listing.fields) return;
-		const value = listing.fields[field];
+		const value = getFieldValue(listing, field);
 		if (value && Object.prototype.hasOwnProperty.call(optionCounts, value)) {
 			optionCounts[value] += 1;
 		}
@@ -48,7 +68,8 @@ export const getSpecialFeatureOptions = (listings, filteredListings, siteConfig,
 
 	filteredListings.forEach(listing => {
 		Object.entries(specialFeatures).forEach(([featureKey, featureName]) => {
-			if (listing.fields[featureKey] == 1) {
+			const value = getFieldValue(listing, featureKey);
+			if (value == 1) {
 				featureCounts[featureName] += 1;
 			}
 		});
@@ -146,7 +167,8 @@ export const generateFilterOptions = (
 				locationFilteredListings = allListings.filter(listing => {
 					return Object.entries(selectedFilters).every(([key, value]) => {
 						if (siteConfig.locationFiltersShown.includes(key)) return true;
-						if (value && typeof value === 'object' && value[listing.fields[key]] === true) {
+						const fieldValue = getFieldValue(listing, key);
+						if (value && typeof value === 'object' && value[fieldValue] === true) {
 							return true;
 						}
 						return false;
@@ -242,7 +264,8 @@ export const applyFilters = async (
 	query,
 	listingEntities,
 	favorites,
-	siteConfig
+	siteConfig,
+	isFirstLoad = false
 ) => {
 	let results = allListings;
 	let invertedSpecialFeaturesMap;
@@ -270,16 +293,29 @@ export const applyFilters = async (
 			results = results.filter(listing => {
 				return Object.entries(filterItems).some(([filterName, filterValue]) => {
 					const listingFieldName = invertedSpecialFeaturesMap[filterName];
-					return filterValue && listing.fields[listingFieldName] == 1;
+					const value = getFieldValue(listing, listingFieldName);
+					return filterValue && value == 1;
 				});
 			});
 		} else if (Object.keys(filterItems).length > 0) {
-			results = results.filter(listing =>
-				Object.prototype.hasOwnProperty.call(filterItems, listing.fields[formattedField])
-			);
+			results = results.filter(listing => {
+				const value = getFieldValue(listing, formattedField);
+				return Object.prototype.hasOwnProperty.call(filterItems, value);
+			});
 		}
 	}
 	if (query) {
+		// Wait for Algolia to finish initializing ONLY on first load (from URL/localStorage)
+		// Don't wait on subsequent manual searches to avoid slowing down the interface
+		if (isFirstLoad && isAlgoliaInitializing()) {
+			// Wait up to 500ms for Algolia to initialize on first load
+			let attempts = 0;
+			while (isAlgoliaInitializing() && attempts < 10) {
+				await new Promise(resolve => setTimeout(resolve, 50));
+				attempts++;
+			}
+		}
+		
 		// Use Algolia if available, otherwise fall back to Fuse.js
 		if (isAlgoliaAvailable()) {
 			try {