@abcagency/hc-ui-components 1.7.4 → 1.7.6

package/dist/util/filterUtil.js

@@ -1,7 +1,7 @@
 import { slicedToArray as _slicedToArray, typeof as _typeof, toConsumableArray as _toConsumableArray, objectSpread2 as _objectSpread2, createForOfIteratorHelper as _createForOfIteratorHelper, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime, defineProperty as _defineProperty } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { getDistinctItemsByProximity } from './mapUtil.js';
 import { isAlgoliaAvailable, filterListingsByAlgoliaSearch } from './algoliaSearchUtil.js';
-import Fuse from '../node_modules/fuse.js/dist/fuse.js';
+import Fuse from 'fuse.js';
 
 var getFilterOptions = function getFilterOptions(listings, filteredListings, field) {
   var excludeZeroCount = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;

package/dist/util/twMerge.js

@@ -1,4 +1,4 @@
-import { extendTailwindMerge } from '../node_modules/tailwind-merge/dist/bundle-mjs.js';
+import { extendTailwindMerge } from 'tailwind-merge';
 
 // Create a custom tailwind-merge that understands the hc- prefix
 var twMerge = extendTailwindMerge({

package/package.json

@@ -1,8 +1,11 @@
 {
 	"name": "@abcagency/hc-ui-components",
-	"version": "1.7.4",
+	"version": "1.7.6",
 	"description": "UI Components for HireControl",
 	"main": "dist/index.js",
+	"module": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"sideEffects": false,
 	"files": [
 		"dist",
 		"src"

package/src/apis/hcApi.ts

@@ -13,7 +13,11 @@ const memoryStorage: MemoryStorage = {
 
 function setStorage(key: keyof MemoryStorage, value: string): void {
 	try {
-		sessionStorage.setItem(key, value);
+		if (typeof window !== 'undefined' && window.sessionStorage) {
+			sessionStorage.setItem(key, value);
+		} else {
+			memoryStorage[key] = value;
+		}
 	} catch (error) {
 		memoryStorage[key] = value;
 	}
@@ -21,7 +25,10 @@ function setStorage(key: keyof MemoryStorage, value: string): void {
 
 function getStorage(key: keyof MemoryStorage): string | null {
 	try {
-		return sessionStorage.getItem(key) || memoryStorage[key];
+		if (typeof window !== 'undefined' && window.sessionStorage) {
+			return sessionStorage.getItem(key) || memoryStorage[key];
+		}
+		return memoryStorage[key];
 	} catch (error) {
 		return memoryStorage[key];
 	}

package/src/components/HireControlMap.js

@@ -12,43 +12,12 @@ import { MapListProvider } from '~/contexts/mapListContext';
 import { TrackEventProvider } from '~/contexts/trackEventContext';
 import { ThemeProvider } from '~/contexts/themeContext';
 
-import { getMapConfig } from '~/services/configService';
-import { setClientAuthKey } from '~/clientToken.js';
 import { initializeAlgoliaSearch } from '~/util/algoliaSearchUtil';
 
-import '../styles/components.css';
-
 // Libraries for Google Maps
 const LIBRARIES = ['places'];
 
-// Custom hook to fetch site configuration
-function useSiteConfig(clientToken, siteConfiguration = null) {
-	const [siteConfig, setSiteConfig] = useState(siteConfiguration);
-	const [isLoading, setIsLoading] = useState(!siteConfiguration); // If config provided, not loading
-	const [error, setError] = useState(null);
-
-	useEffect(() => {
-		const fetchSiteConfig = async () => {
-			try {
-				setClientAuthKey(clientToken);
-				const configData = await getMapConfig(clientToken);
-				setSiteConfig(configData);
-			} catch (err) {
-				console.error('Failed to fetch site configuration:', err);
-				setError(err);
-			} finally {
-				setIsLoading(false);
-			}
-		};
-		if(!siteConfig){
-			fetchSiteConfig();
-		} else {
-			setIsLoading(false); // Config already provided
-		}
-	}, [clientToken, siteConfig]);
-
-	return { siteConfig, isLoading, error };
-}
+// Since all data is now passed in statically, no need to fetch config
 
 // Component to handle all context providers
 const ContextProviders = ({ children, siteConfig, trackEvent, googleMapsApiKey, ...mapListProps }) => { return(
@@ -171,9 +140,6 @@ export const HireControlMap = ({
 		}
 	}
 }) => {
-	// Load site configuration (non-blocking)
-	const { siteConfig, isLoading: isConfigLoading, error } = useSiteConfig(clientToken, siteConfiguration);
-
 	// Initialize Algolia immediately if credentials are provided
 	const [algoliaInitialized, setAlgoliaInitialized] = useState(() => {
 		if (algoliaAppId && algoliaApiKey && algoliaIndexName) {
@@ -204,13 +170,10 @@ export const HireControlMap = ({
 		return <div className="hc-p-4">Error loading Google Maps</div>;
 	}
 
-	if (error) {
-		return <div className="hc-p-4">Error loading configuration</div>;
-	}
-
-	// Render immediately even if config is loading - use defaults or provided siteConfiguration
-	if (!siteConfig) {
-		return null; // Brief flash, config should load very quickly
+	// siteConfiguration is now required - all data passed in statically
+	if (!siteConfiguration) {
+		console.error('Site configuration is required');
+		return <div className="hc-p-4">Site configuration is required</div>;
 	}
 
 	// Prepare props for MapListProvider
@@ -224,7 +187,7 @@ export const HireControlMap = ({
 		easyApplyText,
 		listings,
 		entities,
-		siteConfig,
+		siteConfig: siteConfiguration,
 		getListingEntitiesCallback,
 		setFiltersUrl,
 		hiddenFilters,
@@ -243,17 +206,17 @@ export const HireControlMap = ({
 	};
 
 	// Calculate effective showMap value
-	const effectiveShowMap = hideMap ? false : siteConfig.showMap;
+	const effectiveShowMap = hideMap ? false : siteConfiguration.showMap;
 
 	// Prepare marker configuration
 	const markerConfigs = {
-		fillColor: siteConfig.colors.primary,
-		strokeColor: siteConfig.colors.primaryDark,
-		selectedFillColor: siteConfig.colors.secondary,
-		selectedStrokeColor: siteConfig.colors.secondaryDark,
+		fillColor: siteConfiguration.colors.primary,
+		strokeColor: siteConfiguration.colors.primaryDark,
+		selectedFillColor: siteConfiguration.colors.secondary,
+		selectedStrokeColor: siteConfiguration.colors.secondaryDark,
 		placeMarkers: {
-			colors: siteConfig.pointsOfInterestConfig.placeMarkerColors,
-			size: siteConfig.pointsOfInterestConfig.placeMarkerSize
+			colors: siteConfiguration.pointsOfInterestConfig.placeMarkerColors,
+			size: siteConfiguration.pointsOfInterestConfig.placeMarkerSize
 		}
 	};
 
@@ -261,7 +224,7 @@ export const HireControlMap = ({
 	// Only Google Maps components will wait for isMapsLoaded
 	return (
 		<ContextProviders
-			siteConfig={siteConfig}
+			siteConfig={siteConfiguration}
 			trackEvent={trackEvent}
 			googleMapsApiKey={googleMapsApiKey || process.env.GOOGLE_MAPS_API_KEY}
 			{...mapListProps}
@@ -281,12 +244,12 @@ export const HireControlMap = ({
 				)}
 				<MapList
 					containerStyle={containerStyle}
-					mapPosition={siteConfig.mapPosition}
+					mapPosition={siteConfiguration.mapPosition}
 					showMap={effectiveShowMap}
-					fieldsShown={siteConfig.fieldsShown}
-					specialFeatures={siteConfig.specialFeatures}
-					fieldNames={siteConfig.fieldNames}
-					placeMappings={siteConfig.pointsOfInterestConfig.placeMappings ?? {}}
+					fieldsShown={siteConfiguration.fieldsShown}
+					specialFeatures={siteConfiguration.specialFeatures}
+					fieldNames={siteConfiguration.fieldNames}
+					placeMappings={siteConfiguration.pointsOfInterestConfig.placeMappings ?? {}}
 					markerConfigs={markerConfigs}
 				/>
 			</Grid>

package/src/components/containers/accordions/map-accordion-item-container.js

@@ -21,7 +21,9 @@ const MapAccordionItemContainer = ({
 
 	const setSelectedItemAndZoomMap = (item, isActive) => {
 		if (isActive) {
-			localStorage.removeItem("selectedListItem");
+			if (typeof window !== 'undefined') {
+				localStorage.removeItem("selectedListItem");
+			}
 			selectItem(null, null, 9, { lat: 39.8283, lng: -98.5795 });
 		} else {
 			setStorageObject("selectedListItem", item);

package/src/components/containers/filter/commute-container.js

@@ -23,15 +23,19 @@ const FilterCommuteContainer = ({ className }) => {
 	useEffect(() => {
 		if (commuteLocation !== null && commuteLocation !== '') return;
 		setIsCurrentLocation(false);
-		localStorage.removeItem('isCurrentLocation');
-		localStorage.removeItem('selectedCommute');
+		if (typeof window !== 'undefined') {
+			localStorage.removeItem('isCurrentLocation');
+			localStorage.removeItem('selectedCommute');
+		}
 		setSelected("");
 	}, [commuteLocation]);
 
 	const handleSelect = async (val, isCurrLocation = false) => {
 		setValue(val, false);
 		setSelected(val);
-		localStorage.setItem('selectedCommute', val);
+		if (typeof window !== 'undefined') {
+			localStorage.setItem('selectedCommute', val);
+		}
 		clearSuggestions();
 		if (isCurrLocation) return;
 		try {
@@ -45,6 +49,10 @@ const FilterCommuteContainer = ({ className }) => {
 	};
 
 	const fetchLocation = () => {
+		if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+			console.error("Geolocation is not available in this environment.");
+			return;
+		}
 		if (!navigator.geolocation) {
 			console.error("Geolocation is not supported by this browser.");
 			return;

package/src/components/containers/maps/map-container.js

@@ -145,6 +145,7 @@ const MapContainer = ({ markerConfigs, infoWindowClasses, clusterGridSize = 60 }
 
 	const fitBounds = (map, overload = false) => {
 		if ((mapInteracted === false || overload) && mapItems != null) {
+			if (typeof window === 'undefined' || !window.google) return;
 			const bounds = new window.google.maps.LatLngBounds();
 
 			mapItems.forEach(item => {
@@ -229,6 +230,7 @@ const MapContainer = ({ markerConfigs, infoWindowClasses, clusterGridSize = 60 }
 		}
 
 		setTimeout(() => {
+			if (typeof window === 'undefined' || !window.google) return;
 			const bounds = new window.google.maps.LatLngBounds();
 
 			markers.forEach(marker => {

package/src/components/containers/maps/map-list-container.js

@@ -1,10 +1,22 @@
-import React from 'react';
+import React, { useState, useEffect, lazy, Suspense } from 'react';
 
 import List from '~/components/containers/list/item-list-container';
-import Map from '~/components/containers/maps/map-container';
 import Filter from '~/components/containers/filter/filter-container';
 import MapList from '~/components/modules/maps/map-list';
 
+// Dynamically import the Map container (Google Maps is heavy)
+const Map = lazy(() => import('~/components/containers/maps/map-container'));
+
+// Loading placeholder that maintains layout
+const MapLoadingPlaceholder = () => (
+	<div className="hc-w-full hc-h-full hc-bg-gray-100 hc-flex hc-items-center hc-justify-center">
+		<div className="hc-text-center hc-p-8">
+			<div className="hc-animate-spin hc-rounded-full hc-h-12 hc-w-12 hc-border-b-2 hc-border-gray-900 hc-mx-auto"></div>
+			<p className="hc-mt-4 hc-text-gray-600">Loading map...</p>
+		</div>
+	</div>
+);
+
 const MapListContainer = ({
 	loading = false,
 	containerStyle,
@@ -18,6 +30,12 @@ const MapListContainer = ({
 	placeMappings,
 	mapPosition
 }) => {
+	const [isClient, setIsClient] = useState(false);
+
+	// Only load map on client side
+	useEffect(() => {
+		setIsClient(true);
+	}, []);
 
 	const listProps = {
 		fieldsShown,
@@ -36,13 +54,22 @@ const MapListContainer = ({
 		showMap
 	};
 
+	// Render map only after client-side hydration
+	const mapComponent = isClient && showMap ? (
+		<Suspense fallback={<MapLoadingPlaceholder />}>
+			<Map {...mapProps} />
+		</Suspense>
+	) : (
+		showMap ? <MapLoadingPlaceholder /> : null
+	);
+
 	return (
 		<MapList
 			showMap={showMap}
 			containerStyle={containerStyle}
 			loading={loading}
 			list={<List {...listProps} />}
-			map={<Map {...mapProps} />}
+			map={mapComponent}
 			filter={<Filter showMap={showMap} className="md:hc-hidden" />}
 			mapPosition={mapPosition}
 		/>

package/src/components/modules/filter/commute.js

@@ -57,12 +57,14 @@ const FilterCommute = ({
 							size="sqsm"
 							onClick={() => {
 								setIsCurrentLocation(!isCurrentLocation);
+							if (typeof window !== 'undefined') {
 								localStorage.setItem('isCurrentLocation', !isCurrentLocation);
-								if (isCurrentLocation || commuteLocation) {
-									setCommuteLocation("");
-									setSelected("");
-								} else if (!commuteLocation) { fetchLocation(); }
-							}}
+							}
+							if (isCurrentLocation || commuteLocation) {
+								setCommuteLocation("");
+								setSelected("");
+							} else if (!commuteLocation) { fetchLocation(); }
+						}}
 
 							className=""
 						>

package/src/components/modules/filter/index.js

@@ -23,6 +23,8 @@ const Filter = ({
 	const transitionTimeoutRef = useRef(null);
 
 	useEffect(() => {
+		if (typeof window === 'undefined') return;
+		
 		const checkOverflow = () => {
 			if (contentRef.current) {
 				// Add a small tolerance (5px) to avoid false positives from rounding/padding

package/src/components/modules/filter/item.js

@@ -28,6 +28,7 @@ const FilterItem = ({
 		  onClick={() =>
 			{
 				if(!isExternalLink) return;
+				if (typeof window === 'undefined') return;
 			    trackEvent(eventTypes.EXTERNAL_LINK_CLICKED, { link: externalLinkUrl });
 				window.location.href = externalLinkUrl;
 			}}

package/src/components/modules/list/list-item/list-item.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useState, useEffect, useRef } from 'react';
 import Grid from '~/components/modules/grid';
 import Icon from '~/components/modules/icon';
 import FieldMapper from '~/components/modules/list/field-mapper-desktop';
@@ -19,35 +19,104 @@ const ListItem = forwardRef(
 			favorites,
 			includeFavorite = true,
 			siteConfig,
-			googleMapsApiKey,
+			index,
 			...props
 		},
 		ref
 	) => {
 		const mapPinColor = !showMap ? null : siteConfig.colors.primary.replace("#", "");
 
-		const handleClick = () => {
-			if (onItemSelected) {
-				onItemSelected(item);
-			}
+		// Mobile detection for bandwidth optimization
+		const [isMobile, setIsMobile] = useState(false);
+
+		// Individual item loading based on scroll position
+		const [isMapLoaded, setIsMapLoaded] = useState(false);
+		const itemRef = useRef(null);
+
+		useEffect(() => {
+		if (typeof window === 'undefined') return;
+		
+		const checkIsMobile = () => {
+			setIsMobile(window.innerWidth < 768); // md breakpoint in Tailwind
 		};
-		let isFavorite = favorites.includes(item.id);
-
-		const handleFavouriteClick = (event, item) => {
-			if(!includeFavorite)return;
-			event.stopPropagation();
-			let updatedFavorites;
-			if (isFavorite) {
-				updatedFavorites = favorites.filter(fav => fav !== item.id);
-			} else {
-				updatedFavorites = [...favorites, item.id];
+
+		checkIsMobile();
+		window.addEventListener('resize', checkIsMobile);
+
+		return () => window.removeEventListener('resize', checkIsMobile);
+	}, []);
+
+	// Load individual map when item comes into view
+	useEffect(() => {
+		if (typeof window === 'undefined') return;
+		if (!isMobile || !showMap || !itemRef.current || isMapLoaded) return;
+
+		const checkIfInView = () => {
+			if (!itemRef.current || isMapLoaded) return;
+
+			const rect = itemRef.current.getBoundingClientRect();
+			const windowHeight = window.innerHeight;
+
+			// Load only when item is actually visible or very close to viewport
+			// Much more conservative - only load what's immediately needed
+			const isInView = rect.top < windowHeight && rect.bottom > 0;
+
+			if (isInView) {
+				setIsMapLoaded(true);
 			}
-			isFavorite = !isFavorite;
-			handleSettingFavorites(updatedFavorites);
 		};
+
+		// Check immediately
+		checkIfInView();
+
+		// Only check on scroll, not continuously
+		let scrollTimeout;
+		const handleScroll = () => {
+			clearTimeout(scrollTimeout);
+			scrollTimeout = setTimeout(checkIfInView, 300); // Much less frequent
+		};
+
+		window.addEventListener('scroll', handleScroll, { passive: true });
+
+		return () => {
+			window.removeEventListener('scroll', handleScroll);
+			clearTimeout(scrollTimeout);
+		};
+	}, [isMobile, showMap, isMapLoaded]);
+
+	const handleClick = () => {
+		if (onItemSelected) {
+			onItemSelected(item);
+		}
+	};
+	let isFavorite = favorites.includes(item.id);
+
+	const handleFavouriteClick = (event, item) => {
+		if(!includeFavorite)return;
+		event.stopPropagation();
+		let updatedFavorites;
+		if (isFavorite) {
+			updatedFavorites = favorites.filter(fav => fav !== item.id);
+		} else {
+			updatedFavorites = [...favorites, item.id];
+		}
+		isFavorite = !isFavorite;
+		handleSettingFavorites(updatedFavorites);
+	};
 		return (
 			<button
-				ref={ref}
+				ref={(el) => {
+					// Forward the ref to the parent component
+					if (ref) {
+						if (typeof ref === 'function') {
+							ref(el);
+						} else {
+							ref.current = el;
+						}
+					}
+					// Also store our own ref for scroll detection
+					itemRef.current = el;
+				}}
 				onClick={() => { handleClick(); }}
 				className={`
 				hc-group hc-relative hc-flex md:hc-flex-col hc-w-full hc-text-left hc-bg-clip-border hc-border hc-border-transparent hc-break-words hc-overflow-hidden hc-cursor-pointer hc-transition-colors hover:hc-bg-uiAccent/5 focus:hover:hc-bg-uiAccent/5
@@ -111,12 +180,16 @@ const ListItem = forwardRef(
 					}
 				</Grid>
 				{/* MOBILE ONLY: This map section is visible on mobile and hidden on desktop (md:hc-hidden) */}
-				{showMap && item.mapDetails && googleMapsApiKey && (
-					<div onClick={() => { setMobileTab("mapTab"); handleClick(); }} className="md:hc-hidden hc-w-2/5 sm:hc-w-1/3 hc-p-1.5 hc-my-1 hc-bg-uiAccent/5 hc-border hc-border-uiAccent/10 hc-rounded-sm">
+				{showMap && item.mapDetails?.staticMapUrl && (
+					<div 
+						onClick={() => { setMobileTab("mapTab"); handleClick(); }} 
+						className="md:hc-hidden hc-w-2/5 sm:hc-w-1/3 hc-p-1.5 hc-my-1 hc-bg-uiAccent/5 hc-border hc-border-uiAccent/10 hc-rounded-sm"
+					>
 						<img
-							src={`https://maps.googleapis.com/maps/api/staticmap?scale=2&center=${item.mapDetails.latitude},${item.mapDetails.longitude}&zoom=10&size=240x180&maptype=roadmap&markers=color:0x${mapPinColor}%7Clabel:•%7C${item.mapDetails.latitude},${item.mapDetails.longitude}&key=${googleMapsApiKey}`}
-							alt={`Map of location for ${item.fields?.position || item.fields?.title || 'job'}`}
+							src={item.mapDetails.staticMapUrl}
+							alt={`Map of location for ${item.fields.position}`}
 							className="hc-w-full hc-h-full hc-object-cover"
+							loading="lazy"
 						/>
 					</div>
 				)}
@@ -137,4 +210,4 @@ export default React.memo(ListItem, (prevProps, nextProps) => {
     prevProps.bodyClassName === nextProps.bodyClassName &&
     prevProps.className === nextProps.className
 	);
-});
+});

package/src/contexts/mapListContext.tsx

@@ -4,9 +4,6 @@ import { generateFilterOptions, applyFilters, filterListingsByLocation } from '~
 import { getStorageObject, setStorageObject } from '~/util/localStorageUtil';
 import { updateURLWithFilters, filtersFromURL } from '~/util/urlFilterUtil';
 
-import { getListingEntities } from "~/services/listingEntityService";
-import fetchListings from '~/services/listingAggregatorService';
-
 import { Listing } from '~/types/Listings';
 import { ListingEntity } from '~/types/ListingEntity';
 import { Recruiter } from '~/types/Recruiter';
@@ -252,10 +249,13 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 
 	useEffect(() => {
 		if (!sortSetting) return;
-		localStorage.setItem(localStorageKey + 'sortSetting', JSON.stringify(sortSetting));
+		if (typeof window !== 'undefined') {
+			localStorage.setItem(localStorageKey + 'sortSetting', JSON.stringify(sortSetting));
+		}
 	}, [sortSetting, localStorageKey]);
 
 	useEffect(() => {
+		if (typeof window === 'undefined') return;
 		const loadedFavorites = JSON.parse(localStorage.getItem(localStorageKey + 'favorites') || '[]');
 		setFavorites(loadedFavorites);
 	}, [localStorageKey]);
@@ -270,12 +270,12 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 
 		async function fetchEntities() {
 			try {
-				let fetchedEntities;
-				if (getListingEntitiesCallback) {
-					fetchedEntities = await getListingEntitiesCallback(`${commuteLocation.lat}, ${commuteLocation.lng}`);
-				} else {
-					fetchedEntities = await getListingEntities(`${commuteLocation.lat}, ${commuteLocation.lng}`);
+				// Only fetch if callback is provided
+				if (!getListingEntitiesCallback) {
+					return;
 				}
+				
+				const fetchedEntities = await getListingEntitiesCallback(`${commuteLocation.lat}, ${commuteLocation.lng}`);
 				setListingEntities(fetchedEntities);
 				// Update travelTime on listings
 				const newFilteredListings: Listing[] = [...filteredListings];
@@ -303,42 +303,42 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 		fetchEntities();
 	}, [commuteLocation, allListings, siteConfig.companyId, getListingEntitiesCallback, noEntities]);
 
+	// Set listings from passed-in data
 	useEffect(() => {
-		const handleFetchListings = async () => {
-		if (!(getStorageObject(localStorageKey + 'listings', []) || []).length) {
-			setLoading(true);
+		if (!listings || listings.length === 0) {
+			setLoading(false);
+			return;
 		}
 
+		setLoading(true);
+
 		try {
-			const {
-				listingsResult,
-				entitiesByKey,
-				distinctItems
-			} = await fetchListings(commuteLocation, entities, listings, getListingEntitiesCallback, noEntities);
+			// Apply default filters if provided
+			let processedListings = listings;
 			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);
+				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);
+					});
 				});
-			});
-			setAllListings(filteredListings);
-		} else {
-			setAllListings(listingsResult);
-		}
-			console.log('handleFetchListings: Set allListings to', listingsResult.length, 'items');
-			setListingEntities(entitiesByKey);
-				setMapItems(distinctItems);
-			} catch (error) {
-				console.log(error);
 			}
-			setLoading(false);
-		};
-		handleFetchListings();
-	}, [siteConfig, commuteLocation]);
+
+			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, defaultFilters]);
 
 	useEffect(() => {
 		const processListings = async () => {
@@ -451,6 +451,7 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 	}
 
 	const handleSettingFavorites = (newFavorites: number[] | null) => {
+		if (typeof window === 'undefined') return;
 		if (newFavorites == null) {
 			localStorage.removeItem(localStorageKey + 'favorites');
 		} else {

package/src/index.js

@@ -1,3 +1,4 @@
 import HireControlMap from '~/components/HireControlMap';
+import '~/styles/index.css';
 
 export { HireControlMap };