@abcagency/hc-ui-components 1.3.18 → 1.3.20

package/src/contexts/mapListContext.tsx

@@ -0,0 +1,297 @@
+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>
+	);
+};

package/src/enums/SectionType.ts

@@ -0,0 +1,9 @@
+export enum SectionType {
+	Default = -1,
+	Company = 1,
+	Category = 2,
+	CategoryClass = 3,
+	Entity = 4,
+	CustomVar = 5,
+	REGION = 7
+  }

package/src/services/{configService.js → configService.ts}

@@ -1,16 +1,16 @@
-import api from '~/apis/hcApi';
-
-export const getMapConfig = async () => {
-
-	try {
-		const response = await api.get(`/MapConfig`);
-		return response;
-	} catch (error) {
-		console.error("Error retrieving map configuration:", error);
-		throw error;
-	}
-};
-
-export default {
-	getMapConfig
-};
+import api from '~/apis/hcApi';
+import { MapConfig } from '~/types/config/MapConfig';
+
+export const getMapConfig = async (): Promise<MapConfig> => {
+	try {
+		const response = await api.get<MapConfig>(`/MapConfig`);
+		return response;
+	} catch (error) {
+		console.error("Error retrieving map configuration:", error);
+		throw error;
+	}
+};
+
+export default {
+	getMapConfig
+};

package/src/services/{googlePlacesNearbyService.js → googlePlacesNearbyService.ts}

@@ -1,8 +1,17 @@
-export const searchNearbyPlaces = async (typesArray, location, radius) => {
+export interface Location {
+	latitude: number;
+	longitude: number;
+}
+
+export const searchNearbyPlaces = async (
+	typesArray: string[],
+	location: Location,
+	radius: number
+): Promise<any> => {
 	const url = 'https://places.googleapis.com/v1/places:searchNearby';
 	const headers = {
 		'Content-Type': 'application/json',
-		'X-Goog-Api-Key': process.env.GOOGLE_MAPS_API_KEY,
+		'X-Goog-Api-Key': process.env.GOOGLE_MAPS_API_KEY as string,
 		'X-Goog-FieldMask': 'places.location,places.displayName,places.types'
 	};
 	const data = {

package/src/services/listingAggregatorService.ts

@@ -0,0 +1,76 @@
+import { getListings } from '~/services/listingService';
+import { getRecruiters } from '~/services/recruiterService';
+import { getListingEntities } from '~/services/listingEntityService';
+
+import { getDistinctItemsByProximity } from '~/util/mapUtil';
+import { Listing } from '~/types/Listings';
+import { Recruiter } from '~/types/Recruiter';
+import { ListingEntity } from '~/types/ListingEntity';
+import { MapConfig } from '~/types/config/MapConfig';
+//import { ICommuteLocation } from '~/interfaces/ICommute';
+
+interface SiteConfig {
+  companyId: number;
+}
+
+interface FetchListingsResult {
+  listingsResult: Listing[];
+  fetchedRecruiters: Recruiter[];
+  fetchedEntities: Record<number, ListingEntity>;
+  distinctItems: any; // Update this type based on the return type of getDistinctItemsByProximity
+}
+
+const fetchListings = async (
+	query: string,
+	siteConfig: MapConfig,
+	commuteLocation: any | null = null
+): Promise<FetchListingsResult> => {
+	try {
+		const listingsResult = await getListings(
+
+		);
+
+		const recruiterIds: number[] = [
+			...new Set(listingsResult.map(listing => listing.recruiterId))
+		] as number[];
+
+		const fetchedRecruiters = await getRecruiters(recruiterIds);
+
+		const distinctEntityIds: number[] = [
+			...new Set(listingsResult.map(listing => listing.entityId))
+		] as number[];
+
+		const fetchedEntities = !commuteLocation
+			? await getListingEntities(distinctEntityIds)
+			: await getListingEntities(
+				distinctEntityIds,
+				`${commuteLocation.lat}, ${commuteLocation.lng}`
+			);
+		for (let i = 0; i < listingsResult.length; i++) {
+			const listing = listingsResult[i];
+			if (listing.entityId && listing.entityId !== -1 && listing.fields) {
+				const entity = fetchedEntities[listing.entityId];
+				if (entity) {
+					listing.fields.travelTime = entity.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/services/listingEntityService.ts

@@ -0,0 +1,16 @@
+import api from '~/apis/hcApi';
+import { ListingEntity } from '~/types/ListingEntity';
+
+export const getListingEntities = async (entityIds: number[], origin = ''): Promise<ListingEntity[]> => {
+	try {
+		const response = await api.post<ListingEntity[]>(`/ListingEntities?origin=${origin}`, entityIds);
+		return response;
+	} catch (error) {
+		console.error("Error fetching listing entities:", error);
+		throw error;
+	}
+};
+
+export default {
+	getListingEntities
+};

package/src/services/listingService.ts

@@ -0,0 +1,40 @@
+// listingService.ts
+import { GetListingsParams } from '~/types/GetListingParams';
+import api from '../apis/hcApi';
+import { Listing } from '../types/Listings';
+
+export const getListings = async (params?: GetListingsParams): Promise<Listing[]> => {
+	try {
+		const query = new URLSearchParams();
+
+		if (params) {
+			if (params.location) params.location.forEach(loc => query.append('location', loc));
+			if (params.category) params.category.forEach(cat => query.append('category', cat));
+			if (params.categoryClass) params.categoryClass.forEach(catClass => query.append('categoryClass', catClass));
+			if (params.education) params.education.forEach(edu => query.append('education', edu));
+			if (params.city) params.city.forEach(cty => query.append('city', cty));
+			if (params.state) params.state.forEach(st => query.append('state', st));
+		}
+
+		const response = await api.get(`/Listings?${query.toString()}`);
+		return response as Listing[];
+	} catch (error) {
+		console.error(error);
+		throw error;
+	}
+};
+
+export const getListingDetails = async (listingId: string) => {
+	try {
+		const response = await api.get(`/ListingDetails/${listingId}`);
+		return response;
+	} catch (error) {
+		console.error(error);
+		throw error;
+	}
+};
+
+export default {
+	getListings,
+	getListingDetails
+};

package/src/services/{recruiterService.js → recruiterService.ts}

@@ -1,17 +1,18 @@
-import api from '~/apis/hcApi';
-
-export const getRecruiters = async recruiterIds => {
-	try {
-		const params = recruiterIds.map(id => `recruiterIds=${id}`).join("&");
-
-		const response = await api.get(`/Recruiters?${params}`);
-		return response.data;
-	} catch (error) {
-		console.error("Error fetching recruiters:", error);
-		throw error;
-	}
-};
-
-export default {
-	getRecruiters
-};
+import api from '~/apis/hcApi';
+import { Recruiter } from '~/types/Recruiter';
+
+export const getRecruiters = async (recruiterIds: number[]): Promise<Recruiter[]> => {
+	try {
+		const params = recruiterIds.map(id => `recruiterIds=${id}`).join("&");
+
+		const response = await api.get<Recruiter[]>(`/Recruiters?${params}`);
+		return response;
+	} catch (error) {
+		console.error("Error fetching recruiters:", error);
+		throw error;
+	}
+};
+
+export default {
+	getRecruiters
+};

package/src/types/Address.ts

@@ -0,0 +1,7 @@
+export type Address = {
+	location?: string;
+	street?: string;
+	city?: string;
+	state?: string;
+	zip?: string;
+  }

package/src/types/ContentSection.ts

@@ -0,0 +1,9 @@
+import { SectionType } from '../enums/SectionType';
+
+export type ContentSection = {
+  title?: string;
+  contentFormatted?: string;
+  contentRaw?: string;
+  sectionType: SectionType;
+  sortIndex: number;
+}

package/src/types/GetListingParams.ts

@@ -0,0 +1,8 @@
+export type GetListingsParams = {
+	location?: string[];
+	category?: string[];
+	categoryClass?: string[];
+	education?: string[];
+	city?: string[];
+	state?: string[];
+  };

package/src/types/LatLng.ts

@@ -0,0 +1,4 @@
+export type LatLng = {
+	lat: number;
+	lng: number;
+  }

package/src/types/ListingEntity.ts

@@ -0,0 +1,11 @@
+import { Address } from './Address';
+
+export type ListingEntity = {
+  id: number;
+  listingId: number;
+  latitude: number;
+  longitude: number;
+  entityDisplayName?: string;
+  address?: Address;
+  travelTime?: string;
+}

package/src/types/ListingFields.ts

@@ -0,0 +1,20 @@
+export type ListingFields = {
+	posted?: string;
+	subTitle?: string;
+	education?: string;
+	position?: string;
+	category?: string;
+	categoryClass?: string;
+	shift?: string;
+	cityState?: string;
+	city?: string;
+	state?: string;
+	schedule?: string;
+	customFlag1?: number;
+	bonus?: number;
+	remote?: number;
+	useClientJobUrl?: boolean;
+	dateCreated: Date;
+	dateLastEdited?: Date;
+	travelTime?: string;
+  }

package/src/types/Listings.ts

@@ -0,0 +1,32 @@
+import { ListingFields } from './ListingFields';
+import { Recruiter } from './Recruiter';
+import { ListingEntity } from './ListingEntity';
+import { ContentSection } from './ContentSection';
+import { SimilarListing } from './SimilarListing';
+
+export type Listing = {
+  id: number;
+  fields?: ListingFields;
+  entityId?: number;
+  applyUrl?: string;
+  applyOnline?: number;
+  detailsUrl?: string;
+  displayOnSite: number;
+  displayRecruiter: number;
+  recruiterId?: number;
+  description1?: string;
+  description2?: string;
+  description3?: string;
+  description4?: string;
+  custom1: string;
+  custom2: string;
+  custom3: string;
+  custom4: string;
+  custom5: string;
+  customFlag1: number;
+  slug?: string;
+  recruiter?: Recruiter;
+  entity?: ListingEntity;
+  contentSections?: ContentSection[];
+  similarListings?: SimilarListing[];
+}

package/src/types/Recruiter.ts

@@ -0,0 +1,9 @@
+export type Recruiter = {
+	id?: number;
+	email?: string;
+	firstName?: string;
+	lastName?: string;
+	linkedInUrl?: string;
+	mobilePhone?: string;
+	headshot?: string;
+  }

package/src/types/SimilarListing.ts

@@ -0,0 +1,24 @@
+export type SimilarListing = {
+	id: number;
+	city: string;
+	companyName: string;
+	companyId: number;
+	domain: string;
+	refreshedPubDate?: Date;
+	clientJobUrl: string;
+	refreshNum: number;
+	requestURI: string;
+	schedule: string;
+	scheduleId?: number;
+	shift: string;
+	sponsored: boolean;
+	stateAbbrev: string;
+	subTitle: string;
+	title: string;
+	uniqueId: string;
+	zip: string;
+	slug?: string;
+	dateCreated: Date;
+	categoryId: number;
+	categoryClassId: number;
+  };

package/src/types/config/Colors.ts

@@ -0,0 +1,8 @@
+export type Colors = {
+	uiText: string;
+	uiAccent: string;
+	primary: string;
+	primaryDark: string;
+	secondary: string;
+	secondaryDark: string;
+  }