@abcagency/hc-ui-components 1.3.72 → 1.3.74

package/src/apis/hcApi.ts

@@ -1,109 +1,109 @@
-import { getClientAuthKey } from '~/clientToken';
-const baseURL = process.env.HC_API_BASE_URL as string;
-
-interface MemoryStorage {
-	authToken: string | null;
-	tokenExpiration: string | null;
-}
-
-const memoryStorage: MemoryStorage = {
-	authToken: null,
-	tokenExpiration: null
-};
-
-function setStorage(key: keyof MemoryStorage, value: string): void {
-	try {
-		sessionStorage.setItem(key, value);
-	} catch (error) {
-		memoryStorage[key] = value;
-	}
-}
-
-function getStorage(key: keyof MemoryStorage): string | null {
-	try {
-		return sessionStorage.getItem(key) || memoryStorage[key];
-	} catch (error) {
-		return memoryStorage[key];
-	}
-}
-
-interface AuthResponse {
-	token: string;
-	expiration: string;
-}
-
-const login = async (): Promise<AuthResponse> => {
-	const clientAuthKey = getClientAuthKey();
-
-	try {
-		const response = await fetch(`${baseURL}/auth/login`, {
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/json'
-			},
-			body: JSON.stringify({
-				clientAuthKey: clientAuthKey
-			})
-		});
-
-		if (!response.ok) {
-			throw new Error('Login failed');
-		}
-
-		const data = await response.json();
-
-		if (data.token && data.expiration) {
-			setStorage('authToken', data.token);
-			setStorage('tokenExpiration', data.expiration);
-			return { token: data.token, expiration: data.expiration };
-		} else {
-			throw new Error('Invalid login response');
-		}
-	} catch (error) {
-		console.error('Login failed:', error);
-		throw error;
-	}
-};
-
-const fetchWithAuth = async (url: string, options: RequestInit = {}): Promise<Response> => {
-	let token = getStorage('authToken');
-
-	const expirationDateTime = getStorage('tokenExpiration');
-	const currentTime = new Date();
-
-	if (!token || !expirationDateTime || new Date(expirationDateTime) <= currentTime) {
-		const authResponse = await login();
-		token = authResponse.token;
-	}
-
-	const headers = new Headers(options.headers || {});
-	headers.append('Authorization', `Bearer ${token}`);
-
-	const finalOptions = {
-		...options,
-		headers
-	};
-
-	const response = await fetch(`${baseURL}${url}`, finalOptions);
-
-	if (!response.ok) throw new Error('Network response was not ok.');
-
-	return response;
-};
-
-export default {
-	get: async <T>(url: string): Promise<T> => {
-		const response = await fetchWithAuth(url);
-		return await response.json() as T;
-	},
-	post: async <T>(url: string, data: any): Promise<T> => {
-		const response = await fetchWithAuth(url, {
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/json'
-			},
-			body: JSON.stringify(data)
-		});
-		return await response.json() as T;
-	}
-};
+import { getClientAuthKey } from '~/clientToken';
+const baseURL = process.env.HC_API_BASE_URL as string;
+
+interface MemoryStorage {
+	authToken: string | null;
+	tokenExpiration: string | null;
+}
+
+const memoryStorage: MemoryStorage = {
+	authToken: null,
+	tokenExpiration: null
+};
+
+function setStorage(key: keyof MemoryStorage, value: string): void {
+	try {
+		sessionStorage.setItem(key, value);
+	} catch (error) {
+		memoryStorage[key] = value;
+	}
+}
+
+function getStorage(key: keyof MemoryStorage): string | null {
+	try {
+		return sessionStorage.getItem(key) || memoryStorage[key];
+	} catch (error) {
+		return memoryStorage[key];
+	}
+}
+
+interface AuthResponse {
+	token: string;
+	expiration: string;
+}
+
+const login = async (): Promise<AuthResponse> => {
+	const clientAuthKey = getClientAuthKey();
+
+	try {
+		const response = await fetch(`${baseURL}/auth/login`, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({
+				clientAuthKey: clientAuthKey
+			})
+		});
+
+		if (!response.ok) {
+			throw new Error('Login failed');
+		}
+
+		const data = await response.json();
+
+		if (data.token && data.expiration) {
+			setStorage('authToken', data.token);
+			setStorage('tokenExpiration', data.expiration);
+			return { token: data.token, expiration: data.expiration };
+		} else {
+			throw new Error('Invalid login response');
+		}
+	} catch (error) {
+		console.error('Login failed:', error);
+		throw error;
+	}
+};
+
+const fetchWithAuth = async (url: string, options: RequestInit = {}): Promise<Response> => {
+	let token = getStorage('authToken');
+
+	const expirationDateTime = getStorage('tokenExpiration');
+	const currentTime = new Date();
+
+	if (!token || !expirationDateTime || new Date(expirationDateTime) <= currentTime) {
+		const authResponse = await login();
+		token = authResponse.token;
+	}
+
+	const headers = new Headers(options.headers || {});
+	headers.append('Authorization', `Bearer ${token}`);
+
+	const finalOptions = {
+		...options,
+		headers
+	};
+
+	const response = await fetch(`${baseURL}${url}`, finalOptions);
+
+	if (!response.ok) throw new Error('Network response was not ok.');
+
+	return response;
+};
+
+export default {
+	get: async <T>(url: string): Promise<T> => {
+		const response = await fetchWithAuth(url);
+		return await response.json() as T;
+	},
+	post: async <T>(url: string, data: any): Promise<T> => {
+		const response = await fetchWithAuth(url, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify(data)
+		});
+		return await response.json() as T;
+	}
+};

package/src/bundleIndex.js

@@ -1,14 +1,14 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import HireControlMap from '~/components/HireControlMap';
-
-const initializeComponent = (elementId, props) => {
-	const element = document.getElementById(elementId);
-	if (element) {
-		ReactDOM.render(<div className='hc-bundle'><HireControlMap {...props} /></div>, element);
-	} else {
-		console.error(`Element with id ${elementId} not found`);
-	}
-};
-
-export { HireControlMap, initializeComponent };
+import React from 'react';
+import ReactDOM from 'react-dom';
+import HireControlMap from '~/components/HireControlMap';
+
+const initializeComponent = (elementId, props) => {
+	const element = document.getElementById(elementId);
+	if (element) {
+		ReactDOM.render(<div className='hc-bundle'><HireControlMap {...props} /></div>, element);
+	} else {
+		console.error(`Element with id ${elementId} not found`);
+	}
+};
+
+export { HireControlMap, initializeComponent };

package/src/clientToken.js

@@ -1,9 +1,9 @@
-let clientAuthKey = null;
-
-export const setClientAuthKey = key => {
-	clientAuthKey = key;
-};
-
-export const getClientAuthKey = () => {
-	return clientAuthKey;
-};
+let clientAuthKey = null;
+
+export const setClientAuthKey = key => {
+	clientAuthKey = key;
+};
+
+export const getClientAuthKey = () => {
+	return clientAuthKey;
+};

package/src/components/HireControlMap.js

@@ -1,167 +1,191 @@
-import React, { useEffect, useState } from 'react';
-import { useLoadScript } from '@react-google-maps/api';
-import { twMerge } from 'tailwind-merge';
-
-import Grid from '~/components/modules/grid';
-import Filter from '~/components/containers/filter/filter-container';
-import MapList from '~/components/containers/maps/map-list-container';
-
-import { MapProvider } from '~/contexts/mapContext';
-import { PlacesProvider } from '~/contexts/placesContext';
-import { MapListProvider } from '~/contexts/mapListContext';
-import { TrackEventProvider } from '~/contexts/trackEventContext';
-
-import { getMapConfig } from '~/services/configService';
-import { setClientAuthKey } from '~/clientToken.js';
-
-import '../styles/index.css';
-import { ThemeProvider } from '~/contexts/themeContext';
-
-const libraries = ['places'];
-
-export const HireControlMap = ({
-	clientToken,
-	containerStyle = { height: '100vh' },
-	navigateToDetails = null,
-	navigateToEasyApply = null,
-	handleUrlUpdate = null,
-	Link = null,
-	linkFormat = '/jobs/[slug]',
-	easyApplyUrl = null,
-	easyApplyText = 'Easy Apply',
-	isIframe = false,
-	trackEvent = (eventType, eventObj) => {console.log(eventType); console.log(eventObj);},
-	listings = [],
-	entities = [],
-	defaultFilters = null,
-	hiddenFilters = null,
-	setFiltersUrl = null,
-	ExpandListComponent = null
-}) => {
-	const [siteConfig, setSiteconfig] = useState(null);
-	useEffect(() => {
-		setClientAuthKey(clientToken);
-		const fetchSiteConfig = async () => {
-			try {
-				const configData = await getMapConfig(clientToken);
-				setSiteconfig(configData);
-			} catch (error) {
-				console.error('Failed to fetch site configuration:', error);
-			}
-		};
-
-		fetchSiteConfig();
-	}, [clientToken]);
-
-	const { isLoaded } = useLoadScript({
-		googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY,
-		version: 'quarterly',
-		libraries: libraries
-	});
-
-	return (
-		<div>
-			{isLoaded && siteConfig && (
-				<HomeBody
-					siteConfig={siteConfig}
-					navigateToDetails={navigateToDetails}
-					navigateToEasyApply={navigateToEasyApply}
-					Link={Link}
-					linkFormat={linkFormat}
-					easyApplyUrl={easyApplyUrl}
-					easyApplyText={easyApplyText}
-					isIframe={isIframe}
-					trackEvent={trackEvent}
-					listings={listings}
-					entities={entities}
-					setFiltersUrl={setFiltersUrl}
-					hiddenFilters={hiddenFilters}
-					handleUrlUpdate={handleUrlUpdate}
-					defaultFilters={defaultFilters}
-					containerStyle={containerStyle}
-					ExpandListComponent={ExpandListComponent}
-				/>
-			)}
-		</div>
-	);
-};
-
-const HomeBody = ({ containerStyle, hiddenFilters, defaultFilters, siteConfig, navigateToDetails, navigateToEasyApply, Link, linkFormat, easyApplyUrl, easyApplyText, isIframe, trackEvent, listings, setFiltersUrl, handleUrlUpdate, ExpandListComponent }) => {
-	const resetFilters = false;
-
-	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}
-					resetFilters={resetFilters}
-					navigateToDetails={navigateToDetails}
-					navigateToEasyApply={navigateToEasyApply}
-					Link={Link}
-
-					linkFormat={linkFormat}
-					easyApplyUrl={easyApplyUrl}
-					easyApplyText={easyApplyText}
-					isIframe={isIframe}
-					listings={listings}
-					setFiltersUrl={setFiltersUrl}
-					hiddenFilters={hiddenFilters}
-					handleUrlUpdate={handleUrlUpdate}
-					defaultFilters={defaultFilters}
-					containerStyle={containerStyle}
-					ExpandListComponent={ExpandListComponent ?? null}
-				>
-					<MapProvider resetFilters={resetFilters}>
-						<PlacesProvider
-							placeMappings={siteConfig.pointsOfInterestConfig.placeMappings ?? {}}
-							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
-								}
-							}}
-						>
-							<Grid
-								as='section'
-								id='job-search-interface'
-								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 hc-divide-uiAccent/20'}
-							>
-								<Grid.Item className='hc-bg-gray-100'>
-									<Filter showMap={siteConfig.showMap} className='hc-hidden md:hc-block' />
-								</Grid.Item>
-								<MapList
-									containerStyle={containerStyle}
-									markerConfigs={{
-										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
-										}
-									}}
-									mapPosition={siteConfig.mapPosition}
-									showMap={siteConfig.showMap}
-									fieldsShown={siteConfig.fieldsShown}
-									specialFeatures={siteConfig.specialFeatures}
-									fieldNames={siteConfig.fieldNames}
-									placeMappings={siteConfig.pointsOfInterestConfig.placeMappings ?? {}}
-								/>
-							</Grid>
-						</PlacesProvider>
-					</MapProvider>
-				</MapListProvider>
-			</ThemeProvider>
-		</TrackEventProvider>
-	);
-};
-
-export default HireControlMap;
+import React, { useEffect, useState } from 'react';
+import { useLoadScript } from '@react-google-maps/api';
+
+import Grid from '~/components/modules/grid';
+import Filter from '~/components/containers/filter/filter-container';
+import MapList from '~/components/containers/maps/map-list-container';
+
+// Context imports
+import { MapProvider } from '~/contexts/mapContext';
+import { PlacesProvider } from '~/contexts/placesContext';
+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 '../styles/index.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(true);
+	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();
+		}
+	}, [clientToken]);
+
+	return { siteConfig, isLoading, error };
+}
+
+// Component to handle all context providers
+const ContextProviders = ({ children, siteConfig, trackEvent, ...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}
+						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
+//
+export const HireControlMap = ({
+	clientToken,
+	containerStyle = { height: '100vh' },
+	navigateToDetails = null,
+	navigateToEasyApply = null,
+	handleUrlUpdate = null,
+	Link = null,
+	linkFormat = '/jobs/[slug]',
+	easyApplyUrl = null,
+	easyApplyText = 'Easy Apply',
+	trackEvent = (eventType, eventObj) => {
+		console.log(eventType);
+		console.log(eventObj);
+	},
+	listings = [],
+	entities = [],
+	defaultFilters = null,
+	hiddenFilters = null,
+	setFiltersUrl = null,
+	ExpandListComponent = null,
+	additionalMapMarkers = [],
+	defaultZoomOverride = null,
+	siteConfiguration = null
+}) => {
+	// Load site configuration
+	const { siteConfig, error } = useSiteConfig(clientToken, siteConfiguration);
+
+	// Load Google Maps
+	const { isLoaded: isMapsLoaded } = useLoadScript({
+		googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY,
+		version: 'quarterly',
+		libraries: LIBRARIES
+	});
+
+	if (error || !siteConfig) {
+		return <div className="hc-p-4"></div>;
+	}
+
+	// Prepare props for MapListProvider
+	const mapListProps = {
+		resetFilters: false,
+		navigateToDetails,
+		navigateToEasyApply,
+		Link,
+		linkFormat,
+		easyApplyUrl,
+		easyApplyText,
+		listings,
+		entities,
+		setFiltersUrl,
+		hiddenFilters,
+		handleUrlUpdate,
+		defaultFilters,
+		defaultZoomOverride, // will usually fit bounds
+		containerStyle,
+		ExpandListComponent: ExpandListComponent ?? null,
+		additionalMapMarkers
+	};
+
+	// Prepare marker configuration
+	const markerConfigs = {
+		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
+		}
+	};
+
+	return (
+		<ContextProviders
+			siteConfig={siteConfig}
+			trackEvent={trackEvent}
+			{...mapListProps}
+		>
+			<Grid
+				as='section'
+				id='job-search-interface'
+				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 hc-divide-uiAccent/20'}
+			>
+				<Grid.Item className='hc-bg-gray-100'>
+					<Filter showMap={siteConfig.showMap} className='hc-hidden md:hc-block' />
+				</Grid.Item>
+				<MapList
+					containerStyle={containerStyle}
+					mapPosition={siteConfig.mapPosition}
+					showMap={siteConfig.showMap}
+					fieldsShown={siteConfig.fieldsShown}
+					specialFeatures={siteConfig.specialFeatures}
+					fieldNames={siteConfig.fieldNames}
+					placeMappings={siteConfig.pointsOfInterestConfig.placeMappings ?? {}}
+					markerConfigs={markerConfigs}
+				/>
+			</Grid>
+		</ContextProviders>
+	);
+};
+
+export default HireControlMap;