@abcagency/hc-ui-components 1.9.35 → 1.9.36

package/src/components/HireControlMap.js

@@ -11,54 +11,77 @@ import { PlacesProvider } from '~/contexts/placesContext';
 import { MapListProvider } from '~/contexts/mapListContext';
 import { TrackEventProvider } from '~/contexts/trackEventContext';
 import { ThemeProvider } from '~/contexts/themeContext';
-import { ComponentProvider } from '~/contexts/componentContext';
 
-import { initializeAlgoliaSearch } from '~/util/algoliaSearchUtil';
+import { getMapConfig } from '~/services/configService';
+import { setClientAuthKey } from '~/clientToken.js';
+
+import '../styles/index.css';
 
 // Libraries for Google Maps
 const LIBRARIES = ['places'];
 
-// Since all data is now passed in statically, no need to fetch config
+// Custom hook to fetch site configuration
+function useSiteConfig(clientToken, siteConfiguration = null) {
+	const [siteConfig, setSiteConfig] = useState(siteConfiguration);
+	const [isLoading, setIsLoading] = useState(true);
+	const [error, setError] = useState(null);
 
-// Component to handle all context providers
-const ContextProviders = ({ children, siteConfig, trackEvent, googleMapsApiKey, components, ...mapListProps }) => { return(
-	<ComponentProvider components={components}>
-		<TrackEventProvider trackEvent={trackEvent}>
-			<ThemeProvider
-				uiText={siteConfig.colors.uiText}
-				uiAccent={siteConfig.colors.uiAccent}
-				primary={siteConfig.colors.primary}
-				primaryDark={siteConfig.colors.primaryDark}
-				secondary={siteConfig.colors.secondary}
-				secondaryDark={siteConfig.colors.secondaryDark}
-				borderDefault={siteConfig.colors.borderDefault}
-			>
-				<MapListProvider siteConfig={siteConfig} googleMapsApiKey={googleMapsApiKey} {...mapListProps}>
-					<MapProvider resetFilters={mapListProps.resetFilters} defaultZoomOverride={mapListProps.defaultZoomOverride} localStorageKey={mapListProps.localStorageKey}>
-						<PlacesProvider
-							placeMappings={siteConfig.pointsOfInterestConfig.placeMappings ?? {}}
-							additionalMapMarkers={mapListProps.additionalMapMarkers}
-							googleMapsApiKey={googleMapsApiKey}
-							showAtZoomLevel={siteConfig.pointsOfInterestConfig.showAtZoomLevel ?? 12}
-							markerColors={{
-								fillColor: siteConfig.colors.primary,
-								strokeColor: siteConfig.colors.primaryDark,
-								selectedFillColor: siteConfig.colors.secondary,
-								selectedStrokeColor: siteConfig.colors.secondaryDark,
-								placeMarkers: {
-									colors: siteConfig.pointsOfInterestConfig.placeMarkerColors,
-									size: siteConfig.pointsOfInterestConfig.placeMarkerSize
-								}
+	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();
+		}
+	}, [clientToken]);
+
+	return { siteConfig, isLoading, error };
+}
 
-							}}
-						>
-							{children}
-						</PlacesProvider>
-					</MapProvider>
-				</MapListProvider>
-			</ThemeProvider>
-		</TrackEventProvider>
-	</ComponentProvider>
+// Component to handle all context providers
+const ContextProviders = ({ children, siteConfig, trackEvent, googleMapsApiKey, ...mapListProps }) => { return(
+	<TrackEventProvider trackEvent={trackEvent}>
+		<ThemeProvider
+			uiText={siteConfig.colors.uiText}
+			uiAccent={siteConfig.colors.uiAccent}
+			primary={siteConfig.colors.primary}
+			primaryDark={siteConfig.colors.primaryDark}
+			secondary={siteConfig.colors.secondary}
+			secondaryDark={siteConfig.colors.secondaryDark}
+		>
+			<MapListProvider siteConfig={siteConfig} {...mapListProps}>
+				<MapProvider resetFilters={mapListProps.resetFilters} defaultZoomOverride={mapListProps.defaultZoomOverride}>
+					<PlacesProvider
+						placeMappings={siteConfig.pointsOfInterestConfig.placeMappings ?? {}}
+						additionalMapMarkers={mapListProps.additionalMapMarkers}
+						googleMapsApiKey={googleMapsApiKey}
+						markerColors={{
+							fillColor: siteConfig.colors.primary,
+							strokeColor: siteConfig.colors.primaryDark,
+							selectedFillColor: siteConfig.colors.secondary,
+							selectedStrokeColor: siteConfig.colors.secondaryDark,
+							placeMarkers: {
+								colors: siteConfig.pointsOfInterestConfig.placeMarkerColors,
+								size: siteConfig.pointsOfInterestConfig.placeMarkerSize
+							}
+
+						}}
+					>
+						{children}
+					</PlacesProvider>
+				</MapProvider>
+			</MapListProvider>
+		</ThemeProvider>
+	</TrackEventProvider>
 );};
 
 // Main component
@@ -75,10 +98,6 @@ export const HireControlMap = ({
 	easyApplyUrl = null,
 	easyApplyText = 'Easy Apply',
 	isIframe = false,
-	hideMap = false, // Override to hide map even if siteConfig.showMap is true
-	hideFilters = false, // Hide the entire filter section
-	noEntities = false, // Skip entity fetching and hide entity-related filters
-	mobileDetailsCallback = null, // Optional callback for mobile job listing clicks - called instead of expanding accordion
 	trackEvent = (eventType, eventObj) => {
 		console.log(eventType);
 		console.log(eventObj);
@@ -95,89 +114,19 @@ export const HireControlMap = ({
 	defaultZoomOverride = null,
 	//Default site configuration file passed here stops need to fetch from api
 	siteConfiguration = null,
-	localStorageKey = 'defaultKey.',
-	// Algolia search configuration (optional)
-	algoliaAppId = null,
-	/**
-	 * Component overrides - allows customization of any component
-	 * @example
-	 * components={{
-	 *   Filter: MyCustomFilter,
-	 *   ListItem: MyCustomListItem,
-	 *   MapMarker: MyCustomMapMarker
-	 * }}
-	 */
-	components = {},
-	algoliaApiKey = null,
-	algoliaIndexName = null,
-	/**
-	 * Filter configuration (optional)
-	 * @param {boolean} hideZeroResults - Hide filter options with 0 results (default: false)
-	 * @param {boolean} dynamicCounts - Update counts based on active filters.
-	 *                                  If false, shows initial/total counts (default: true)
-	 * @param {boolean} showFavorites - Show favorites special feature filter (default: true)
-	 * @param {boolean} collapsedByDefault - Start with all filter sections collapsed (default: false)
-	 * @param {boolean} sortAlphabetically - Sort filter options alphabetically instead of by count (default: false)
-	 * @param {object} classNames - Custom Tailwind classes to apply to filter components
-	 * @param {string} classNames.filterContainer - Classes for the main filter container wrapper
-	 * @param {string} classNames.filterContent - Classes for the scrollable filter content area
-	 * @param {string} classNames.filterAccordion - Classes for each filter accordion section
-	 * @param {string} classNames.filterAccordionHeader - Classes for accordion header/trigger
-	 * @param {string} classNames.filterAccordionContent - Classes for accordion content area
-	 * @param {string} classNames.filterItem - Classes for individual filter items (checkboxes/options)
-	 * @param {string} classNames.filterItemLabel - Classes for filter item labels
-	 * @param {string} classNames.filterItemCheckbox - Classes for filter item checkboxes
-	 * @param {string} classNames.filterItemCount - Classes for filter item count badges
-	 * @param {string} classNames.searchInput - Classes for search input field
-	 * @param {string} classNames.resetButton - Classes for reset all button
-	 * @param {string} classNames.showJobsButton - Classes for show jobs button
-	 * @param {string} classNames.filterFooter - Classes for the footer containing buttons
-	 */
-	filterConfig = {
-		hideZeroResults: false, // Hide filter options with 0 results
-		dynamicCounts: true, // Update counts based on other active filters (false = show initial counts only)
-		showFavorites: true, // Show favorites filter
-		collapsedByDefault: false, // Start with all filter sections collapsed
-		sortAlphabetically: false, // Sort filter options alphabetically instead of by count
-		classNames: {
-			filterContainer: '', // Main filter container wrapper
-			filterContent: '', // Scrollable content area
-			filterAccordion: '', // Filter accordion section
-			filterAccordionHeader: '', // Accordion header/trigger
-			filterAccordionContent: '', // Accordion content body
-			filterItem: '', // Individual filter items
-			filterItemLabel: '', // Filter item labels
-			filterItemCheckbox: '', // Filter item checkboxes
-			filterItemCount: '', // Filter item count badges
-			searchInput: '', // Search input field
-			resetButton: '', // Reset all button
-			showJobsButton: '', // Show jobs button
-			filterFooter: '' // Footer with buttons
-		}
-	}
+	localStorageKey = 'defaultKey.'
 }) => {
-	// Initialize Algolia when credentials are provided (client-side only)
-	const [algoliaInitialized, setAlgoliaInitialized] = useState(false);
-
-	useEffect(() => {
-		if (algoliaAppId && algoliaApiKey && algoliaIndexName && typeof window !== 'undefined') {
-			initializeAlgoliaSearch(algoliaAppId, algoliaApiKey, algoliaIndexName).then(initialized => {
-				setAlgoliaInitialized(initialized);
-				if (initialized) {
-					console.log('Algolia search initialized successfully');
-				}
-			});
-		}
-	}, [algoliaAppId, algoliaApiKey, algoliaIndexName]);
+	// Load site configuration
+	const { siteConfig, error } = useSiteConfig(clientToken, siteConfiguration);
 
-	// Load Google Maps (non-blocking - map component will handle this)
+	// Load Google Maps
 	const { isLoaded: isMapsLoaded, loadError } = useLoadScript({
 		googleMapsApiKey: googleMapsApiKey,
 		version: 'quarterly',
 		libraries: LIBRARIES
 	});
 
-	// Only show errors for critical failures
+	// Show loading state or error if Google Maps hasn't loaded yet
 	if (!googleMapsApiKey) {
 		console.error('Google Maps API key is required');
 		return <div className="hc-p-4">Google Maps API key is required</div>;
@@ -188,13 +137,12 @@ export const HireControlMap = ({
 		return <div className="hc-p-4">Error loading Google Maps</div>;
 	}
 
-	// Don't block rendering - let filters and list show immediately
-	// Map container will handle its own loading state
+	if (!isMapsLoaded) {
+		return <div className="hc-p-4">Loading Maps...</div>;
+	}
 
-	// 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>;
+	if (error || !siteConfig) {
+		return <div className="hc-p-4"></div>;
 	}
 
 	// Prepare props for MapListProvider
@@ -208,7 +156,7 @@ export const HireControlMap = ({
 		easyApplyText,
 		listings,
 		entities,
-		siteConfig: siteConfiguration,
+		siteConfig,
 		getListingEntitiesCallback,
 		setFiltersUrl,
 		hiddenFilters,
@@ -219,60 +167,47 @@ export const HireControlMap = ({
 		ExpandListComponent: ExpandListComponent ?? null,
 		additionalMapMarkers,
 		isIframe,
-		localStorageKey,
-		hideMap,
-		hideFilters,
-		noEntities,
-		filterConfig,
-		mobileDetailsCallback
+		localStorageKey
 	};
 
-	// Calculate effective showMap value
-	const effectiveShowMap = hideMap ? false : siteConfiguration.showMap;
-
 	// Prepare marker configuration
 	const markerConfigs = {
-		fillColor: siteConfiguration.colors.primary,
-		strokeColor: siteConfiguration.colors.primaryDark,
-		selectedFillColor: siteConfiguration.colors.secondary,
-		selectedStrokeColor: siteConfiguration.colors.secondaryDark,
+		fillColor: siteConfig.colors.primary,
+		strokeColor: siteConfig.colors.primaryDark,
+		selectedFillColor: siteConfig.colors.secondary,
+		selectedStrokeColor: siteConfig.colors.secondaryDark,
 		placeMarkers: {
-			colors: siteConfiguration.pointsOfInterestConfig.placeMarkerColors,
-			size: siteConfiguration.pointsOfInterestConfig.placeMarkerSize
+			colors: siteConfig.pointsOfInterestConfig.placeMarkerColors,
+			size: siteConfig.pointsOfInterestConfig.placeMarkerSize
 		}
 	};
-
-	// Render immediately - individual components handle their own loading
-	// Only Google Maps components will wait for isMapsLoaded
+	//Desktop view of filter used below
 	return (
 		<ContextProviders
-			siteConfig={siteConfiguration}
+			siteConfig={siteConfig}
 			trackEvent={trackEvent}
 			googleMapsApiKey={googleMapsApiKey || process.env.GOOGLE_MAPS_API_KEY}
-			components={components}
 			{...mapListProps}
 		>
 			<Grid
 				as='section'
 				id='job-search-interface'
-				columns={hideFilters ? 'hc-grid-cols-1' : 'md:hc-grid-cols-[1fr_2.5fr] lg:hc-grid-cols-[1fr_3.5fr]'}
+				columns='md:hc-grid-cols-[1fr_2.5fr] lg:hc-grid-cols-[1fr_3.5fr]'
 				gap='hc-gap-0'
 				autoRows={false}
-				className={'hc-bundle hc-items-stretch hc-divide-x-0 md:hc-divide-x hc-divide-uiAccent/20'}
+				className={'hc-bundle hc-items-stretch hc-divide-x hc-divide-uiAccent/20'}
 			>
-				{!hideFilters && (
-					<Grid.Item className='hc-bg-gray-100'>
-						<Filter isDesktop={true} showMap={effectiveShowMap} className='hc-hidden md:hc-block' />
-					</Grid.Item>
-				)}
+				<Grid.Item className='hc-bg-gray-100'>
+					<Filter isDesktop={true} showMap={siteConfig.showMap} className='hc-hidden md:hc-block' />
+				</Grid.Item>
 				<MapList
 					containerStyle={containerStyle}
-					mapPosition={siteConfiguration.mapPosition}
-					showMap={effectiveShowMap}
-					fieldsShown={siteConfiguration.fieldsShown}
-					specialFeatures={siteConfiguration.specialFeatures}
-					fieldNames={siteConfiguration.fieldNames}
-					placeMappings={siteConfiguration.pointsOfInterestConfig.placeMappings ?? {}}
+					mapPosition={siteConfig.mapPosition}
+					showMap={siteConfig.showMap}
+					fieldsShown={siteConfig.fieldsShown}
+					specialFeatures={siteConfig.specialFeatures}
+					fieldNames={siteConfig.fieldNames}
+					placeMappings={siteConfig.pointsOfInterestConfig.placeMappings ?? {}}
 					markerConfigs={markerConfigs}
 				/>
 			</Grid>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useMapList } from '~/contexts/mapListContext';
-import { useComponents } from '~/contexts/componentContext';
+import AccordionFilters from '~/components/modules/accordions/filters';
 import AccordionFilterItem from '~/components/containers/accordions/filter-item-container';
 import FilterItem from '~/components/containers/filter/filter-item-container';
 
@@ -10,13 +10,9 @@ const AccordionFiltersContainer = ({
 	setDefaultValue,
 	setLocation,
 	setSelectedListItem,
-	SubcategoryRequireCategory,
-	handleReset
+	SubcategoryRequireCategory
 }) => {
-	// Get injected FiltersAccordion component from context
-	const { FiltersAccordion: AccordionFilters } = useComponents();
-	
-	const { filterOptions, selectedFilters, setSelectedFilters, siteConfig, hiddenFilters, noEntities } = useMapList();
+	const { filterOptions, selectedFilters, setSelectedFilters, siteConfig, hiddenFilters } = useMapList();
 
 	const handleSetSelectedFilters = prevFilters => {
 		setSelectedFilters(prevFilters);
@@ -29,17 +25,11 @@ const AccordionFiltersContainer = ({
 		 displayedFilters = filterOptions?.filters.filter(filter => !hiddenFilters.includes(filter.id));
 	}
 
-	// Hide entity-dependent filters when noEntities is true
-	if (noEntities && displayedFilters) {
-		displayedFilters = displayedFilters.filter(filter => filter.id !== 'entityName');
-	}
-
 	return (
 		<AccordionFilters
 			className={className}
 			defaultValue={defaultValue}
 			filterOptions={filterOptions}
-			handleReset={handleReset}
 		>
 			{displayedFilters?.map(filter => {
 				if(filter.id === 'category' && SubcategoryRequireCategory === true && (!selectedFilters.categoryClass || Object.keys(selectedFilters.categoryClass).length < 1)){
@@ -48,7 +38,7 @@ const AccordionFiltersContainer = ({
 					filter.items = filter.items.filter(item => item.count > 0);
 				}
 
-				else if(filter.id === 'specialFeatures' && !filter.items.some(item => item.name !== "Favorite" && item.count > 0)){
+				else if(filter.id === 'specialFeatures' && !filter.items.some(item => item.name !== "Favorite" && item.count > 1)){
 					const favorite = filter.items.find(item => item.name === "Favorite");
 					return 	<FilterItem
 						key={"Favorite"}

package/src/components/containers/accordions/filter-item-container.js

@@ -1,6 +1,7 @@
 import React, { memo } from 'react';
-import { useComponents } from '~/contexts/componentContext';
+import AccordionFilterItem from '~/components/modules/accordions/filterItem';
 import FilterItem from '~/components/containers/filter/filter-item-container';
+import ItemsPill from '~/components/modules/buttons/items-pill';
 
 const FilterItemContainer = ({
 	filter,
@@ -10,9 +11,6 @@ const FilterItemContainer = ({
 	subcategoryRequireCategory = false,
 	externalLinksInFilters
 }) => {
-	// Get injected components from context
-	const { FilterItemAccordion: AccordionFilterItem, ItemsPill } = useComponents();
-	
 	const externalLinks = externalLinksInFilters?.filter(x => x.fieldName == filter.id);
 	const fieldKey = filter.id;
 	const activeItemsCount = selectedFilters != null && selectedFilters[fieldKey]
@@ -23,8 +21,8 @@ const FilterItemContainer = ({
 		event.stopPropagation();
 		setSelectedFilters(prevFilters => {
 			const updatedFilters = { ...prevFilters };
-			if(subcategoryRequireCategory && fieldKey == 'category'){
-				delete updatedFilters['subCategory'];
+			if(subcategoryRequireCategory && fieldKey == 'categoryClass'){
+				delete updatedFilters['category'];
 			}
 			if(fieldKey == 'state' || fieldKey == 'city' || fieldKey == 'cityState'){
 				delete updatedFilters.entityId;
@@ -49,7 +47,7 @@ const FilterItemContainer = ({
 
 	const body = (
 		<>
-			{filter.items.filter(item => item != null).sort().map(item => (
+			{filter.items.sort().map(item => (
 				<FilterItem
 					key={item.name}
 					item={item}

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

@@ -3,11 +3,10 @@ import { useMap } from '~/contexts/mapContext';
 import { useMapList } from '~/contexts/mapListContext';
 import { useTrackEvent } from '~/contexts/trackEventContext';
 import { setStorageObject } from '~/util/localStorageUtil';
-import { useComponents } from '~/contexts/componentContext';
+import MapAccordionItem from '~/components/modules/accordions/MapAccordionItem';
 import ListItemContainer from '~/components/containers/list/list-item/list-item-container';
 
 const MapAccordionItemContainer = ({
-	showMap,
 	item,
 	itemRefs,
 	fieldsShown,
@@ -16,28 +15,18 @@ const MapAccordionItemContainer = ({
 	isActive,
 	index
 }) => {
-	// Get injected MapAccordionItem component from context
-	const { MapAccordionItem } = useComponents();
-	
-	const { mapItems, recruiters, siteConfig, mobileDetailsCallback } = useMapList();
+	const { mapItems, recruiters } = useMapList();
 	const { selectItem } = useMap();
 	const { trackEvent, eventTypes } = useTrackEvent();
-	const jobPinZoomLevel = siteConfig?.jobPinZoomLevel ?? 12;
 
 	const setSelectedItemAndZoomMap = (item, isActive) => {
 		if (isActive) {
-			if (typeof window !== 'undefined') {
-				localStorage.removeItem("selectedListItem");
-			}
+			localStorage.removeItem("selectedListItem");
 			selectItem(null, null, 9, { lat: 39.8283, lng: -98.5795 });
 		} else {
 			setStorageObject("selectedListItem", item);
-			console.log('mapItems here', mapItems);
-			//edited here for new structure of entity key
-			console.log('the item in questions is',item);
-			const location = mapItems.find(x => x.entityKey?.toLowerCase() === item.fields.entityKey?.toLowerCase()) || null;
-			console.log('location is', location);
-			selectItem(item, location, jobPinZoomLevel, {
+			const location = mapItems.find(x => Object.prototype.hasOwnProperty.call(x.items, item.id)) || null;
+			selectItem(item, location, 12, {
 				lat: location?.latitude,
 				lng: location?.longitude
 			});
@@ -46,20 +35,11 @@ const MapAccordionItemContainer = ({
 
 	const handleItemClick = item => {
 		trackEvent(eventTypes.JOB_LISTING_SELECTED, {
-			jobTitle: item.fields.title,
+			jobTitle: item.fields.position,
 			jobCategory: item.fields.category,
 			entityDisplayName: item?.mapDetails?.entityDisplayName
 		});
 
-		// Check if mobile and mobileDetailsCallback is provided
-		if (mobileDetailsCallback) {
-			const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
-			if (isMobile) {
-				mobileDetailsCallback(item);
-				return;
-			}
-		}
-
 		setSelectedItemAndZoomMap(item, isActive);
 	};
 
@@ -72,13 +52,12 @@ const MapAccordionItemContainer = ({
 			recruiter={recruiters[item.recruiterId]}
 		>
 			<ListItemContainer
-				showMap={showMap}
 				item={item}
 				fieldsShown={fieldsShown}
 				specialFeatures={specialFeatures}
 				isActive={isActive}
-				onClick={() => handleItemClick(item)}
 				index={index}
+				onClick={() => handleItemClick(item)}
 			/>
 		</MapAccordionItem>
 	);

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

@@ -4,12 +4,9 @@ import usePlacesAutocomplete, { getGeocode, getLatLng } from 'use-places-autocom
 import { useMapList } from '~/contexts/mapListContext';
 import { useTrackEvent } from '~/contexts/trackEventContext';
 import { getStorageItem } from '~/util/localStorageUtil';
-import { useComponents } from '~/contexts/componentContext';
+import FilterCommute from '~/components/modules/filter/commute';
 
 const FilterCommuteContainer = ({ className }) => {
-	// Get injected FilterCommute component from context
-	const { FilterCommute } = useComponents();
-	
 	const {
 		ready,
 		suggestions: { status, data },
@@ -26,19 +23,15 @@ const FilterCommuteContainer = ({ className }) => {
 	useEffect(() => {
 		if (commuteLocation !== null && commuteLocation !== '') return;
 		setIsCurrentLocation(false);
-		if (typeof window !== 'undefined') {
-			localStorage.removeItem('isCurrentLocation');
-			localStorage.removeItem('selectedCommute');
-		}
+		localStorage.removeItem('isCurrentLocation');
+		localStorage.removeItem('selectedCommute');
 		setSelected("");
 	}, [commuteLocation]);
 
 	const handleSelect = async (val, isCurrLocation = false) => {
 		setValue(val, false);
 		setSelected(val);
-		if (typeof window !== 'undefined') {
-			localStorage.setItem('selectedCommute', val);
-		}
+		localStorage.setItem('selectedCommute', val);
 		clearSuggestions();
 		if (isCurrLocation) return;
 		try {
@@ -52,10 +45,6 @@ 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/filter/filter-container.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useMap } from '~/contexts/mapContext';
 import { useMapList } from '~/contexts/mapListContext';
 import { useTrackEvent } from '~/contexts/trackEventContext';
-import { useComponents } from '~/contexts/componentContext';
+import Filter from '~/components/modules/filter/index';
 import FilterSearch from '~/components/containers/filter/search-container';
 import FiltersAccordion from '~/components/containers/accordions/filter-container';
 import FilterLocations from '~/components/containers/filter/location-container';
@@ -12,9 +12,6 @@ const FilterContainer = ({
 	showMap,
 	isDesktop = false
 }) => {
-	// Get injected Filter component from context
-	const { Filter } = useComponents();
-	
 	const { trackEvent, eventTypes } = useTrackEvent();
 	const [hasActiveFilters, setHasActiveFilters] = useState(false);
 
@@ -27,8 +24,7 @@ const FilterContainer = ({
 		handleSettingFavorites,
 		setQuery,
 		siteConfig,
-		containerStyle,
-		noEntities
+		containerStyle
 	} = useMapList();
 	const [defaultValue, setDefaultValue] = useState(siteConfig?.defaultFilterOpen ? siteConfig?.defaultFilterOpen : null);
 	const handleReset = () => {
@@ -42,12 +38,22 @@ const FilterContainer = ({
 	return (
 		<Filter
 			className={className}
+			showMap={showMap}
 			isDesktop={isDesktop}
 			hasActiveFilters={hasActiveFilters}
+			setHasActiveFilters={setHasActiveFilters}
+			defaultValue={defaultValue}
+			setDefaultValue={setDefaultValue}
+			setSelectedListItem={setSelectedListItem}
+			setLocation={setLocation}
 			filteredListings={filteredListings}
 			selectedFilters={selectedFilters}
+			setSelectedFilters={setSelectedFilters}
 			setMobileTab={setMobileTab}
+			handleReset={handleReset}
+			siteConfig={siteConfig}
 			style={containerStyle}
+
 		>
 			<FiltersAccordion
 				setHasActiveFilters={setHasActiveFilters}
@@ -56,10 +62,9 @@ const FilterContainer = ({
 				setLocation={setLocation}
 				setSelectedListItem={setSelectedListItem}
 				SubcategoryRequireCategory={siteConfig.subcategoryRequireCategory}
-				handleReset={handleReset}
 			/>
 			<FilterSearch />
-			{siteConfig.hideLocations !== true && !noEntities &&
+			{siteConfig.hideLocations !== true &&
 			<FilterLocations
 				setHasActiveFilters={setHasActiveFilters}
 				defaultValue={defaultValue}