@abcagency/hc-ui-components 1.3.15 → 1.3.17

package/src/hooks/useList.js

@@ -1,89 +1,89 @@
-import { useEffect, useState, useRef } from 'react';
-
-import { getStorageObject } from '~/util/localStorageUtil';
-
-const getDefaultItemId = () => {
-	let item = getStorageObject("selectedListItem");
-	if (item?.expanded == true) {
-		return item.id;
-	} else {
-		return null;
-	}
-};
-
-const useListLogic = filteredListings => {
-	const [itemLimit, setItemLimit] = useState(100);
-	const [expandedId] = useState(getDefaultItemId());
-	const [sortSetting, setSortSetting] = useState(getStorageObject('sortSetting', null));
-	const [scrollPosition, setScrollPosition] = useState(getStorageObject('scrollPosition', 0));
-	const loader = useRef(null);
-	const scrollContainerRef = useRef(null);
-	const itemRefs = useRef({});
-	const observer = useRef(null);
-
-	useEffect(() => {
-		observer.current = new IntersectionObserver(handleObserver, {
-			root: scrollContainerRef.current,
-			rootMargin: "100px 0px",
-			threshold: 0.5
-		});
-		const { current } = loader;
-		if (current) {
-			observer.current.observe(current);
-		}
-		return () => {
-			if (observer.current && current) {
-				observer.current.unobserve(current);
-			}
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [filteredListings.length, itemLimit]);
-
-	useEffect(() => {
-		localStorage.setItem('scrollPosition', scrollPosition.toString());
-	}, [scrollPosition]);
-
-	useEffect(() => {
-		const savedScrollPosition = scrollPosition;
-		if (parseInt(savedScrollPosition) > 3000) {
-			setItemLimit(savedScrollPosition / 10);
-		}
-		if (savedScrollPosition && scrollContainerRef.current) {
-			setTimeout(() => {
-				scrollContainerRef.current.scrollTop = parseInt(savedScrollPosition, 10);
-			}, 300);
-		}
-	}, []);
-
-	useEffect(() => {
-		const { current } = scrollContainerRef;
-		if (current) {
-			current.addEventListener('scroll', handleScroll);
-		}
-		return () => {
-			if (current) {
-				current.removeEventListener('scroll', handleScroll);
-			}
-		};
-	}, []);
-
-	const handleObserver = entities => {
-		const target = entities[0];
-		if (!target.isIntersecting) return;
-		if (filteredListings.length > itemLimit) {
-			setItemLimit(prevLimit => prevLimit + 100);
-		} else if (observer.current) {
-			observer.current.disconnect();
-		}
-	};
-
-	const handleScroll = () => {
-		if (scrollContainerRef.current) {
-			setScrollPosition(scrollContainerRef.current.scrollTop);
-		}
-	};
-
-	return { itemLimit, expandedId, sortSetting, scrollPosition, loader, scrollContainerRef, itemRefs, setSortSetting, setScrollPosition, filteredListings };
-};
-
-export default useListLogic;
+import { useEffect, useState, useRef } from 'react';
+
+import { getStorageObject } from '~/util/localStorageUtil';
+
+const getDefaultItemId = () => {
+	let item = getStorageObject("selectedListItem");
+	if (item?.expanded == true) {
+		return item.id;
+	} else {
+		return null;
+	}
+};
+
+const useListLogic = filteredListings => {
+	const [itemLimit, setItemLimit] = useState(100);
+	const [expandedId] = useState(getDefaultItemId());
+	const [sortSetting, setSortSetting] = useState(getStorageObject('sortSetting', null));
+	const [scrollPosition, setScrollPosition] = useState(getStorageObject('scrollPosition', 0));
+	const loader = useRef(null);
+	const scrollContainerRef = useRef(null);
+	const itemRefs = useRef({});
+	const observer = useRef(null);
+
+	useEffect(() => {
+		observer.current = new IntersectionObserver(handleObserver, {
+			root: scrollContainerRef.current,
+			rootMargin: "100px 0px",
+			threshold: 0.5
+		});
+		const { current } = loader;
+		if (current) {
+			observer.current.observe(current);
+		}
+		return () => {
+			if (observer.current && current) {
+				observer.current.unobserve(current);
+			}
+		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [filteredListings.length, itemLimit]);
+
+	useEffect(() => {
+		localStorage.setItem('scrollPosition', scrollPosition.toString());
+	}, [scrollPosition]);
+
+	useEffect(() => {
+		const savedScrollPosition = scrollPosition;
+		if (parseInt(savedScrollPosition) > 3000) {
+			setItemLimit(savedScrollPosition / 10);
+		}
+		if (savedScrollPosition && scrollContainerRef.current) {
+			setTimeout(() => {
+				scrollContainerRef.current.scrollTop = parseInt(savedScrollPosition, 10);
+			}, 300);
+		}
+	}, []);
+
+	useEffect(() => {
+		const { current } = scrollContainerRef;
+		if (current) {
+			current.addEventListener('scroll', handleScroll);
+		}
+		return () => {
+			if (current) {
+				current.removeEventListener('scroll', handleScroll);
+			}
+		};
+	}, []);
+
+	const handleObserver = entities => {
+		const target = entities[0];
+		if (!target.isIntersecting) return;
+		if (filteredListings.length > itemLimit) {
+			setItemLimit(prevLimit => prevLimit + 100);
+		} else if (observer.current) {
+			observer.current.disconnect();
+		}
+	};
+
+	const handleScroll = () => {
+		if (scrollContainerRef.current) {
+			setScrollPosition(scrollContainerRef.current.scrollTop);
+		}
+	};
+
+	return { itemLimit, expandedId, sortSetting, scrollPosition, loader, scrollContainerRef, itemRefs, setSortSetting, setScrollPosition, filteredListings };
+};
+
+export default useListLogic;

package/src/services/listingAggregatorService.js

@@ -1,50 +1,50 @@
-import { getListings } from '~/services/listingService';
-import { getRecruiters } from '~/services/recruiterService';
-import { getListingEntities } from '~/services/listingEntityService';
-
-import { getDistinctItemsByProximity } from '~/util/mapUtil';
-
-const fetchListings = async (query, siteConfig, commuteLocation = null) => {
-	try {
-		const listingsResult = await getListings(
-			siteConfig.companyId,
-			5000,
-			1,
-			query
-		);
-		const recruiterIds = [
-			// eslint-disable-next-line no-undef
-			...new Set(listingsResult.map(listing => listing.recruiterId))
-		];
-		const fetchedRecruiters = await getRecruiters(recruiterIds);
-
-		const distinctEntityIds = [
-			// eslint-disable-next-line no-undef
-			...new Set(listingsResult.map(listing => listing.entityId))
-		];
-
-		const fetchedEntities = !commuteLocation ? await getListingEntities(
-			distinctEntityIds) :  await getListingEntities(
-			distinctEntityIds,`${commuteLocation.lat}, ${commuteLocation.lng}`);
-		for (var i = 0; i < listingsResult.length; i++) {
-			if (listingsResult[i].entityId != -1) {
-				listingsResult[i].fields.travelTime = fetchedEntities[listingsResult[i].entityId].travelTime;
-			}
-		}
-		const distinctItems = getDistinctItemsByProximity(
-			listingsResult,
-			fetchedEntities
-		);
-		return {
-			listingsResult,
-			fetchedRecruiters,
-			fetchedEntities,
-			distinctItems
-		};
-	} catch (error) {
-		console.error("Error fetching listings:", error);
-		throw error;
-	}
-};
-
-export default fetchListings;
+import { getListings } from '~/services/listingService';
+import { getRecruiters } from '~/services/recruiterService';
+import { getListingEntities } from '~/services/listingEntityService';
+
+import { getDistinctItemsByProximity } from '~/util/mapUtil';
+
+const fetchListings = async (query, siteConfig, commuteLocation = null) => {
+	try {
+		const listingsResult = await getListings(
+			siteConfig.companyId,
+			5000,
+			1,
+			query
+		);
+		const recruiterIds = [
+			// eslint-disable-next-line no-undef
+			...new Set(listingsResult.map(listing => listing.recruiterId))
+		];
+		const fetchedRecruiters = await getRecruiters(recruiterIds);
+
+		const distinctEntityIds = [
+			// eslint-disable-next-line no-undef
+			...new Set(listingsResult.map(listing => listing.entityId))
+		];
+
+		const fetchedEntities = !commuteLocation ? await getListingEntities(
+			distinctEntityIds) :  await getListingEntities(
+			distinctEntityIds,`${commuteLocation.lat}, ${commuteLocation.lng}`);
+		for (var i = 0; i < listingsResult.length; i++) {
+			if (listingsResult[i].entityId != -1) {
+				listingsResult[i].fields.travelTime = fetchedEntities[listingsResult[i].entityId].travelTime;
+			}
+		}
+		const distinctItems = getDistinctItemsByProximity(
+			listingsResult,
+			fetchedEntities
+		);
+		return {
+			listingsResult,
+			fetchedRecruiters,
+			fetchedEntities,
+			distinctItems
+		};
+	} catch (error) {
+		console.error("Error fetching listings:", error);
+		throw error;
+	}
+};
+
+export default fetchListings;

package/src/util/mapIconUtil.js

@@ -10,8 +10,8 @@ const customSVGIcon = (
 ) => {
 	let svg = "";
 	switch (type) {
-	case placeTypes.FOOD:
-		svg = `
+		case placeTypes.FOOD:
+			svg = `
 					<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 						viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
 					<style type="text/css">
@@ -25,9 +25,9 @@ const customSVGIcon = (
 						c1.1-2.4,3.9-4,5.6-4C40,18.3,40,52.4,40,52.4z"/>
 					</svg>
 					`;
-		break;
-	case placeTypes.TOURIST_ATTRACTION:
-		svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+			break;
+		case placeTypes.TOURIST_ATTRACTION:
+			svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 					viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
 					<style type="text/css">
 					.st0{fill:${fillColor}; stroke:${strokeColor};}
@@ -41,9 +41,9 @@ const customSVGIcon = (
 						S32.3,28.7,30.4,28.7z"/>
 					</svg>
 					`;
-		break;
-	case placeTypes.SCHOOL:
-		svg = `
+			break;
+		case placeTypes.SCHOOL:
+			svg = `
 					<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 						viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
 					<style type="text/css">
@@ -55,9 +55,9 @@ const customSVGIcon = (
 					<polygon class="st0" points="44.4,40.4 41.8,40.4 41.8,31.4 30.1,37.8 15.8,30 30.1,22.2 44.4,30 "/>
 					</svg>
 					`;
-		break;
-	case placeTypes.STORE:
-		svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+			break;
+		case placeTypes.STORE:
+			svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 					viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
 					<style type="text/css">
 					.st0{fill:${fillColor}; stroke:${strokeColor};}
@@ -75,9 +75,9 @@ const customSVGIcon = (
 					<path d="M24,45.5c0-0.4-0.3-0.7-0.7-0.7s-0.7,0.3-0.7,0.7C22.6,46.2,24,46.2,24,45.5z"/>
 					</svg>
 					`;
-		break;
-	case placeTypes.TRANSIT_STATION:
-		svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+			break;
+		case placeTypes.TRANSIT_STATION:
+			svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 					viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
 					<style type="text/css">
 					.st0{fill:${fillColor}; stroke:${strokeColor};}
@@ -97,9 +97,9 @@ const customSVGIcon = (
 					<polygon points="31,30.2 29.6,34.4 42.4,34.4 40.9,30.2 "/>
 					</svg>
 					`;
-		break;
-	case placeTypes.PLACE_OF_WORSHIP:
-		svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+			break;
+		case placeTypes.PLACE_OF_WORSHIP:
+			svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 					viewBox="0 0 60.8 89.6" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
 					<style type="text/css">
 					.st0{fill:${fillColor}; stroke:${strokeColor};}
@@ -113,7 +113,7 @@ const customSVGIcon = (
 					<path class="st0" d="M45.6,38.5c0,1.3-1,2.3-2.3,2.3h-3.8V29.5l4.9,2.7c0.7,0.4,1.2,1.2,1.2,2C45.6,34.2,45.6,38.5,45.6,38.5z"/>
 					</svg>
 					`;
-		break;
+			break;
 	}
 
 	const iconUrl = `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;

package/src/util/urlFilterUtil.js

@@ -1,90 +1,90 @@
-export const updateURLWithFilters = (filters, location, navigate, query) => {
-	const searchParams = new URLSearchParams(location.search);
-
-	Object.keys(Object.fromEntries(searchParams)).forEach(key => {
-		if (!key.includes('.') && key !== 'query') {
-			searchParams.set(key, searchParams.get(key));
-		}
-	});
-
-	if (query) {
-		searchParams.set('query', query);
-	}
-
-	Object.keys(filters).forEach(category => {
-		Object.keys(filters[category]).forEach(filter => {
-			const key = `${category}.${filter}`;
-			if (filters[category][filter]) {
-				searchParams.set(key, 'true');
-			} else {
-				searchParams.delete(key);
-			}
-		});
-	});
-
-	navigate({
-		search: searchParams.toString()
-	}, { replace: true });
-
-	notifyParentOfUrlChange();
-};
-
-function notifyParentOfUrlChange() {
-	setTimeout(() => {
-		var message = {
-			type: 'URL_CHANGE',
-			url: window.location.href
-		};
-		window.parent.postMessage(message, "*");
-	}, 500);
-}
-
-export const parseQueryParams = search => {
-	const queryParams = {};
-	if (!search) return queryParams;
-	let queryString = search.split('?')[1];
-	if (!queryString) {
-		return queryParams;
-	}
-	queryString = queryString.replaceAll('+', ' ');
-	queryString.split('&').forEach(param => {
-		const [key, value] = param.split('=');
-		queryParams[decodeURIComponent(key)] = decodeURIComponent(value);
-	});
-	return queryParams;
-};
-
-export const filtersFromURL = location => {
-	if (!location || !location.search) return;
-	const filters = {};
-	let queryParam = null;
-	const queryParams = parseQueryParams(location.search);
-	if (!queryParams) return;
-	Object.keys(queryParams).forEach(key => {
-		if (key && key.includes('.')) {
-			const [category, filter] = key.split('.');
-			if (!filters[category]) {
-				filters[category] = {};
-			}
-			filters[category][filter] = queryParams[key] === 'true';
-		} else if (key === 'query') {
-			queryParam = queryParams[key];
-		}
-	});
-
-	return { filters, query: queryParam };
-};
-
-export const hasFiltersInURL = location => {
-	if (!location || !location.search) return;
-	const queryParams = parseQueryParams(location.search);
-	if (!queryParams) return;
-	return Object.keys(queryParams).some(key => key.includes('.'));
-};
-
-export const hasQueryInUrl = location => {
-	if (!location || !location.search) return;
-	const queryParams = parseQueryParams(location.search);
-	if (!queryParams) return;
-	return Object.keys(queryParams).includes('query');
-};
+export const updateURLWithFilters = (filters, location, navigate, query) => {
+	const searchParams = new URLSearchParams(location.search);
+
+	Object.keys(Object.fromEntries(searchParams)).forEach(key => {
+		if (!key.includes('.') && key !== 'query') {
+			searchParams.set(key, searchParams.get(key));
+		}
+	});
+
+	if (query) {
+		searchParams.set('query', query);
+	}
+
+	Object.keys(filters).forEach(category => {
+		Object.keys(filters[category]).forEach(filter => {
+			const key = `${category}.${filter}`;
+			if (filters[category][filter]) {
+				searchParams.set(key, 'true');
+			} else {
+				searchParams.delete(key);
+			}
+		});
+	});
+
+	navigate({
+		search: searchParams.toString()
+	}, { replace: true });
+
+	notifyParentOfUrlChange();
+};
+
+function notifyParentOfUrlChange() {
+	setTimeout(() => {
+		var message = {
+			type: 'URL_CHANGE',
+			url: window.location.href
+		};
+		window.parent.postMessage(message, "*");
+	}, 500);
+}
+
+export const parseQueryParams = search => {
+	const queryParams = {};
+	if (!search) return queryParams;
+	let queryString = search.split('?')[1];
+	if (!queryString) {
+		return queryParams;
+	}
+	queryString = queryString.replaceAll('+', ' ');
+	queryString.split('&').forEach(param => {
+		const [key, value] = param.split('=');
+		queryParams[decodeURIComponent(key)] = decodeURIComponent(value);
+	});
+	return queryParams;
+};
+
+export const filtersFromURL = location => {
+	if (!location || !location.search) return;
+	const filters = {};
+	let queryParam = null;
+	const queryParams = parseQueryParams(location.search);
+	if (!queryParams) return;
+	Object.keys(queryParams).forEach(key => {
+		if (key && key.includes('.')) {
+			const [category, filter] = key.split('.');
+			if (!filters[category]) {
+				filters[category] = {};
+			}
+			filters[category][filter] = queryParams[key] === 'true';
+		} else if (key === 'query') {
+			queryParam = queryParams[key];
+		}
+	});
+
+	return { filters, query: queryParam };
+};
+
+export const hasFiltersInURL = location => {
+	if (!location || !location.search) return;
+	const queryParams = parseQueryParams(location.search);
+	if (!queryParams) return;
+	return Object.keys(queryParams).some(key => key.includes('.'));
+};
+
+export const hasQueryInUrl = location => {
+	if (!location || !location.search) return;
+	const queryParams = parseQueryParams(location.search);
+	if (!queryParams) return;
+	return Object.keys(queryParams).includes('query');
+};