@abcagency/hc-ui-components 1.3.20 → 1.3.22

package/src/contexts/mapListContext.tsx

@@ -1,297 +1,311 @@
-import React, { createContext, useState, useEffect, useContext, ReactNode } from 'react';
-
-import { generateFilterOptions, applyFilters, filterListingsByLocation } from '~/util/filterUtil';
-import { getStorageObject, setStorageObject } from '~/util/localStorageUtil';
-
-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';
-import { MapConfig, MapConfig as SiteConfig } from '~/types/config/MapConfig';
-
-interface MapListContextProps {
-  loading: boolean;
-  allListings: Listing[];
-  filteredListings: Listing[];
-  mapItems: any;
-  query: string | null;
-  setNewFilteredListings: (filteredListings: Listing[]) => void;
-  setQuery: (query: string | null) => void;
-  listingEntities: Record<number, ListingEntity> | null;
-  selectedFilters: Record<string, any>;
-  setSelectedFilters: (filters: Record<string, any>) => void;
-  filterOptions: any;
-  recruiters: Record<number, Recruiter>;
-  handleFilterListingsByLocation: (selectedLocation: any) => void;
-  filterDialogIsOpen: boolean;
-  setFilterDialogIsOpen: (isOpen: boolean) => void;
-  setMobileTab: (tab: string) => void;
-  mobileTab: string;
-  siteConfig: SiteConfig;
-  favorites: number[];
-  handleSettingFavorites: (favorites: number[] | null) => void;
-  setFilterByFavorites: (filter: boolean) => void;
-  filterByFavorites: boolean;
-  commuteLocation: any | null;
-  setCommuteLocation: (location: any | null) => void;
-  navigateToDetails: (id: number) => void;
-  navigateToEasyApply: (id: number) => void;
-  Link: React.ComponentType<any>;
-  linkFormat: string;
-  sortSetting: { field: string; type: string };
-  setSortSetting: (setting: { field: string; type: string }) => void;
-  trackEvent: (event: string) => void;
-}
-
-const MapListContext = createContext<MapListContextProps | undefined>(undefined);
-
-export const useMapList = () => {
-	const context = useContext(MapListContext);
-	if (!context) {
-		throw new Error('useMapList must be used within a MapListProvider');
-	}
-	return context;
-};
-
-const getQuery = (): string | null => {
-	let query: string | null = null;
-	if (typeof window !== 'undefined') {
-		query = localStorage.getItem('query');
-	}
-	return query;
-};
-
-interface MapListProviderProps {
-  children: ReactNode;
-  siteConfig: MapConfig;
-  resetFilters: boolean;
-  navigateToDetails: (id: number) => void;
-  navigateToEasyApply: (id: number) => void;
-  Link: React.ComponentType<any>;
-  linkFormat: string;
-  trackEvent: (event: string) => void;
-  listings?: Listing[];
-}
-
-export const MapListProvider: React.FC<MapListProviderProps> = ({
-	children,
-	siteConfig,
-	resetFilters,
-	navigateToDetails,
-	navigateToEasyApply,
-	Link,
-	linkFormat,
-	trackEvent,
-	listings = []
-}) => {
-	const [allListings, setAllListings] = useState<Listing[]>(getStorageObject("listings", listings) || []);
-	const [filteredListings, setFilteredListings] = useState<Listing[]>([]);
-	const [loading, setLoading] = useState<boolean>(false);
-	const [mapItems, setMapItems] = useState<any>(getStorageObject('mapItems', []) || []);
-	const [query, setQuery] = useState<string | null>(() => resetFilters ? null : getQuery());
-	const [sortSetting, setSortSetting] = useState<{ field: string; type: string }>(getStorageObject('sortSetting', { field: 'position', type: 'asc' }) || { field: 'position', type: 'asc' });
-	const [listingEntities, setListingEntities] = useState<Record<number, ListingEntity> | null>(getStorageObject("listingEntities", null));
-	const [firstLoad, setFirstLoad] = useState<boolean>(true);
-	const [commuteLocation, setCommuteLocation] = useState<any | null>(getStorageObject('commuteLocation'));
-	const [selectedFilters, setSelectedFilters] = useState<Record<string, any>>(() => resetFilters ? {} : getStorageObject('selectedFilters', {}) || {});
-	const [filterOptions, setFilterOptions] = useState<any>();
-	const [recruiters, setRecruiters] = useState<Record<number, Recruiter>>(getStorageObject("recruiters", {}) || {});
-	const [filterDialogIsOpen, setFilterDialogIsOpen] = useState<boolean>(false);
-	const [mobileTab, setMobileTab] = useState<string>("listTab");
-	const [favorites, setFavorites] = useState<number[]>([]);
-	const [filterByFavorites, setFilterByFavorites] = useState<boolean>(false);
-
-	const setNewFilteredListings = (filteredListings: Listing[]) => {
-		setFilteredListings(filteredListings);
-	};
-
-	useEffect(() => {
-		if (!sortSetting) return;
-		localStorage.setItem('sortSetting', JSON.stringify(sortSetting));
-		setNewFilteredListings(filteredListings);
-	}, [sortSetting]);
-
-	useEffect(() => {
-		const loadedFavorites = JSON.parse(localStorage.getItem('favorites') || '[]');
-		setFavorites(loadedFavorites);
-	}, []);
-
-	useEffect(() => {
-		setStorageObject("commuteLocation", commuteLocation);
-	}, [commuteLocation]);
-
-	useEffect(() => {
-		if (!commuteLocation) return;
-
-		async function fetchEntities() {
-			const distinctEntityIds = [
-				...new Set(allListings.map(listing => listing.entityId ?? -1))
-			];
-			try {
-				const fetchedEntities = await getListingEntities(
-					distinctEntityIds,
-					`${commuteLocation.lat}, ${commuteLocation.lng}`
-				);
-				setListingEntities(fetchedEntities);
-				const newFilteredListings: Listing[] = [...filteredListings] ?? [];
-				for (let i = 0; i < allListings.length; i++) {
-					const listing = newFilteredListings[i];
-					if (
-						listing &&
-						listing.fields &&
-						listing.entityId !== undefined &&
-						listing.entityId !== -1
-					) {
-						const entityId = listing.entityId;
-						const travelTime = fetchedEntities[entityId]?.travelTime;
-
-						if (travelTime !== undefined && listing.fields) {
-							listing.fields.travelTime = travelTime;
-						}
-					}
-				}
-
-				setNewFilteredListings(newFilteredListings);
-			} catch (error) {
-				console.error("Failed to fetch listing entities:", error);
-			}
-		}
-
-		fetchEntities();
-	}, [commuteLocation, allListings, siteConfig.companyId]);
-
-	useEffect(() => {
-		const handleFetchListings = async () => {
-			if (!getStorageObject('listings') ?? [].length) {
-				setLoading(true);
-			}
-
-			try {
-				const {
-					listingsResult,
-					fetchedRecruiters,
-					fetchedEntities,
-					distinctItems
-				} = await fetchListings(query ?? '', siteConfig, commuteLocation);
-				setAllListings(listingsResult);
-				setRecruiters(fetchedRecruiters);
-				setListingEntities(fetchedEntities);
-				setMapItems(distinctItems);
-				setStorageObject("mapItems", distinctItems);
-				setStorageObject("listingEntities", fetchedEntities);
-				setStorageObject("recruiters", fetchedRecruiters);
-				setStorageObject("listings", listingsResult);
-			} catch (error) {
-				console.log(error);
-			}
-			setLoading(false);
-		};
-		handleFetchListings();
-	}, [query, siteConfig]);
-
-	useEffect(() => {
-		const processListings = () => {
-			let filteredListings: Listing[];
-			const { mapItems, filteredListings: tempFilteredListings } = applyFilters(
-				allListings,
-				selectedFilters,
-				query,
-				listingEntities,
-				favorites,
-				siteConfig
-			);
-			filteredListings = tempFilteredListings;
-
-			if (filterByFavorites) {
-				filteredListings = filteredListings.filter((x: Listing) => favorites.includes(x.id));
-			}
-			setNewFilteredListings(filteredListings);
-			if (firstLoad && selectedFilters) {
-				// Update URL with filters if needed
-			} else if (Object.keys(selectedFilters).length === 0 && !firstLoad) {
-				localStorage.removeItem('selectedFilters');
-			} else if (!firstLoad) {
-				setStorageObject('selectedFilters', selectedFilters);
-			}
-			query != null ? localStorage.setItem('query', query) : localStorage.removeItem('query');
-			setMapItems(mapItems);
-
-			if (selectedFilters) {
-				const keys = Object.keys(selectedFilters);
-				const lastKey = keys[keys.length - 1];
-				const options = generateFilterOptions(
-					firstLoad ? allListings : filteredListings,
-					allListings,
-					siteConfig,
-					filterOptions,
-					lastKey,
-					favorites
-				);
-				if (options) {
-					setFilterOptions(options);
-					if (firstLoad) setFirstLoad(false);
-				}
-			}
-		};
-
-		processListings();
-	}, [selectedFilters, query, listingEntities, filterByFavorites, favorites]);
-
-	const handleFilterListingsByLocation = (selectedLocation: any) => {
-		const { filteredListings } = filterListingsByLocation(
-			allListings,
-			selectedLocation,
-			listingEntities
-		);
-		setNewFilteredListings(filteredListings);
-	};
-
-	const handleSettingFavorites = (newFavorites: number[] | null) => {
-		if (newFavorites == null) {
-			localStorage.removeItem('favorites');
-		} else {
-			setFavorites(newFavorites);
-			localStorage.setItem('favorites', JSON.stringify(newFavorites));
-		}
-	};
-
-	return (
-		<MapListContext.Provider value={{
-			loading,
-			allListings,
-			filteredListings,
-			mapItems,
-			query,
-			setNewFilteredListings,
-			setQuery,
-			listingEntities,
-			selectedFilters,
-			setSelectedFilters,
-			filterOptions,
-			recruiters,
-			handleFilterListingsByLocation,
-			filterDialogIsOpen,
-			setFilterDialogIsOpen,
-			setMobileTab,
-			mobileTab,
-			siteConfig,
-			favorites,
-			handleSettingFavorites,
-			setFilterByFavorites,
-			filterByFavorites,
-			commuteLocation,
-			setCommuteLocation,
-			navigateToDetails,
-			navigateToEasyApply,
-			Link,
-			linkFormat,
-			sortSetting,
-			setSortSetting,
-			trackEvent
-		}}>
-			{children}
-		</MapListContext.Provider>
-	);
-};
+import React, { createContext, useState, useEffect, useContext, ReactNode } from 'react';
+
+import { generateFilterOptions, applyFilters, filterListingsByLocation } from '~/util/filterUtil';
+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';
+import { MapConfig, MapConfig as SiteConfig } from '~/types/config/MapConfig';
+
+interface MapListContextProps {
+  loading: boolean;
+  allListings: Listing[];
+  filteredListings: Listing[];
+  mapItems: any;
+  query: string | null;
+  setNewFilteredListings: (filteredListings: Listing[]) => void;
+  setQuery: (query: string | null) => void;
+  listingEntities: Record<number, ListingEntity> | null;
+  selectedFilters: Record<string, any>;
+  setSelectedFilters: (filters: Record<string, any>) => void;
+  filterOptions: any;
+  recruiters: Record<number, Recruiter>;
+  handleFilterListingsByLocation: (selectedLocation: any) => void;
+  filterDialogIsOpen: boolean;
+  setFilterDialogIsOpen: (isOpen: boolean) => void;
+  setMobileTab: (tab: string) => void;
+  mobileTab: string;
+  siteConfig: SiteConfig;
+  favorites: number[];
+  handleSettingFavorites: (favorites: number[] | null) => void;
+  setFilterByFavorites: (filter: boolean) => void;
+  filterByFavorites: boolean;
+  commuteLocation: any | null;
+  setCommuteLocation: (location: any | null) => void;
+  navigateToDetails: (id: number) => void;
+  navigateToEasyApply: (id: number) => void;
+  Link: React.ComponentType<any>;
+  linkFormat: string;
+  sortSetting: { field: string; type: string };
+  setSortSetting: (setting: { field: string; type: string }) => void;
+  trackEvent: (event: string) => void;
+}
+
+const MapListContext = createContext<MapListContextProps | undefined>(undefined);
+
+export const useMapList = () => {
+	const context = useContext(MapListContext);
+	if (!context) {
+		throw new Error('useMapList must be used within a MapListProvider');
+	}
+	return context;
+};
+
+const getQuery = (): string | null => {
+	let query: string | null = null;
+	if (typeof window !== 'undefined') {
+		query = localStorage.getItem('query');
+	}
+	return query;
+};
+
+interface MapListProviderProps {
+  children: ReactNode;
+  siteConfig: MapConfig;
+  resetFilters: boolean;
+  navigateToDetails: (id: number) => void;
+  navigateToEasyApply: (id: number) => void;
+  Link: React.ComponentType<any>;
+  linkFormat: string;
+  trackEvent: (event: string) => void;
+  listings?: Listing[];
+  setFiltersUrl?:boolean;
+}
+
+export const MapListProvider: React.FC<MapListProviderProps> = ({
+	children,
+	siteConfig,
+	resetFilters,
+	navigateToDetails,
+	navigateToEasyApply,
+	Link,
+	linkFormat,
+	trackEvent,
+	listings = [],
+	setFiltersUrl
+}) => {
+	const firstLoadFilters = () =>{
+		let urlFilters = filtersFromURL(window.location)?.filters;
+		return  (setFiltersUrl === true && urlFilters && Object.keys(urlFilters).length > 0) ? urlFilters  : getStorageObject('selectedFilters', {}) || {}
+	}
+	const [allListings, setAllListings] = useState<Listing[]>(getStorageObject("listings", listings) || []);
+	const [filteredListings, setFilteredListings] = useState<Listing[]>([]);
+	const [loading, setLoading] = useState<boolean>(false);
+	const [mapItems, setMapItems] = useState<any>(getStorageObject('mapItems', []) || []);
+	const [query, setQuery] = useState<string | null>(() => resetFilters ? null : getQuery());
+	const [sortSetting, setSortSetting] = useState<{ field: string; type: string }>(getStorageObject('sortSetting', { field: 'position', type: 'asc' }) || { field: 'position', type: 'asc' });
+	const [listingEntities, setListingEntities] = useState<Record<number, ListingEntity> | null>(getStorageObject("listingEntities", null));
+	const [firstLoad, setFirstLoad] = useState<boolean>(true);
+	const [commuteLocation, setCommuteLocation] = useState<any | null>(getStorageObject('commuteLocation'));
+	const [selectedFilters, setSelectedFilters] = useState<Record<string, any>>(() => resetFilters ? {} : firstLoadFilters());
+	const [filterOptions, setFilterOptions] = useState<any>();
+	const [recruiters, setRecruiters] = useState<Record<number, Recruiter>>(getStorageObject("recruiters", {}) || {});
+	const [filterDialogIsOpen, setFilterDialogIsOpen] = useState<boolean>(false);
+	const [mobileTab, setMobileTab] = useState<string>("listTab");
+	const [favorites, setFavorites] = useState<number[]>([]);
+	const [filterByFavorites, setFilterByFavorites] = useState<boolean>(false);
+
+	const setNewFilteredListings = (filteredListings: Listing[]) => {
+		setFilteredListings(filteredListings);
+	};
+
+
+
+	useEffect(() => {
+		if (!sortSetting) return;
+		localStorage.setItem('sortSetting', JSON.stringify(sortSetting));
+		setNewFilteredListings(filteredListings);
+	}, [sortSetting]);
+
+	useEffect(() => {
+		const loadedFavorites = JSON.parse(localStorage.getItem('favorites') || '[]');
+		setFavorites(loadedFavorites);
+	}, []);
+
+	useEffect(() => {
+		setStorageObject("commuteLocation", commuteLocation);
+	}, [commuteLocation]);
+
+	useEffect(() => {
+		if (!commuteLocation) return;
+
+		async function fetchEntities() {
+			const distinctEntityIds = [
+				...new Set(allListings.map(listing => listing.entityId ?? -1))
+			];
+			try {
+				const fetchedEntities = await getListingEntities(
+					distinctEntityIds,
+					`${commuteLocation.lat}, ${commuteLocation.lng}`
+				);
+				setListingEntities(fetchedEntities);
+				const newFilteredListings: Listing[] = [...filteredListings] ?? [];
+				for (let i = 0; i < allListings.length; i++) {
+					const listing = newFilteredListings[i];
+					if (
+						listing &&
+						listing.fields &&
+						listing.entityId !== undefined &&
+						listing.entityId !== -1
+					) {
+						const entityId = listing.entityId;
+						const travelTime = fetchedEntities[entityId]?.travelTime;
+
+						if (travelTime !== undefined && listing.fields) {
+							listing.fields.travelTime = travelTime;
+						}
+					}
+				}
+			} catch (error) {
+				console.error("Failed to fetch listing entities:", error);
+			}
+		}
+
+		fetchEntities();
+	}, [commuteLocation, allListings, siteConfig.companyId]);
+
+	useEffect(() => {
+		const handleFetchListings = async () => {
+			if (!getStorageObject('listings') ?? [].length) {
+				setLoading(true);
+			}
+
+			try {
+				const {
+					listingsResult,
+					fetchedRecruiters,
+					fetchedEntities,
+					distinctItems
+				} = await fetchListings(query ?? '', siteConfig, commuteLocation);
+				setAllListings(listingsResult);
+				setRecruiters(fetchedRecruiters);
+				setListingEntities(fetchedEntities);
+				setMapItems(distinctItems);
+				setStorageObject("mapItems", distinctItems);
+				setStorageObject("listingEntities", fetchedEntities);
+				setStorageObject("recruiters", fetchedRecruiters);
+				setStorageObject("listings", listingsResult);
+			} catch (error) {
+				console.log(error);
+			}
+			setLoading(false);
+		};
+		handleFetchListings();
+	}, [query, siteConfig]);
+
+	useEffect(() => {
+		const processListings = () => {
+			let filteredListings: Listing[];
+			let tempSelectedFilters = selectedFilters;
+			let tempQuery = query;
+
+			const { mapItems, filteredListings: tempFilteredListings } = applyFilters(
+				allListings,
+				tempSelectedFilters,
+				tempQuery,
+				listingEntities,
+				favorites,
+				siteConfig
+			);
+			filteredListings = tempFilteredListings;
+
+			if (filterByFavorites) {
+				filteredListings = filteredListings.filter((x: Listing) => favorites.includes(x.id));
+			}
+			setNewFilteredListings(filteredListings);
+			if (firstLoad && tempSelectedFilters) {
+				// Update URL with filters if needed
+			} else if (Object.keys(tempSelectedFilters).length === 0 && !firstLoad) {
+				localStorage.removeItem('selectedFilters');
+			} else if (!firstLoad) {
+				setStorageObject('selectedFilters', tempSelectedFilters);
+			}
+			if(setFiltersUrl === true)
+			{
+				updateURLWithFilters(tempSelectedFilters, window.location, tempQuery);
+			}
+			tempQuery != null ? localStorage.setItem('query', tempQuery) : localStorage.removeItem('query');
+			setMapItems(mapItems);
+
+			if (tempSelectedFilters) {
+				const keys = Object.keys(tempSelectedFilters);
+				const lastKey = keys[keys.length - 1];
+				const options = generateFilterOptions(
+					firstLoad ? allListings : filteredListings,
+					allListings,
+					siteConfig,
+					filterOptions,
+					lastKey,
+					favorites
+				);
+				if (options) {
+					setFilterOptions(options);
+					if (firstLoad) setFirstLoad(false);
+				}
+			}
+		};
+
+		processListings();
+	}, [selectedFilters, query, listingEntities, filterByFavorites, favorites]);
+
+	const handleFilterListingsByLocation = (selectedLocation: any) => {
+		const { filteredListings } = filterListingsByLocation(
+			allListings,
+			selectedLocation,
+			listingEntities
+		);
+		setNewFilteredListings(filteredListings);
+	};
+
+	const handleSettingFavorites = (newFavorites: number[] | null) => {
+		if (newFavorites == null) {
+			localStorage.removeItem('favorites');
+		} else {
+			setFavorites(newFavorites);
+			localStorage.setItem('favorites', JSON.stringify(newFavorites));
+		}
+	};
+
+	return (
+		<MapListContext.Provider value={{
+			loading,
+			allListings,
+			filteredListings,
+			mapItems,
+			query,
+			setNewFilteredListings,
+			setQuery,
+			listingEntities,
+			selectedFilters,
+			setSelectedFilters,
+			filterOptions,
+			recruiters,
+			handleFilterListingsByLocation,
+			filterDialogIsOpen,
+			setFilterDialogIsOpen,
+			setMobileTab,
+			mobileTab,
+			siteConfig,
+			favorites,
+			handleSettingFavorites,
+			setFilterByFavorites,
+			filterByFavorites,
+			commuteLocation,
+			setCommuteLocation,
+			navigateToDetails,
+			navigateToEasyApply,
+			Link,
+			linkFormat,
+			sortSetting,
+			setSortSetting,
+			trackEvent
+		}}>
+			{children}
+		</MapListContext.Provider>
+	);
+};