@abcagency/hc-ui-components 1.3.20 → 1.3.22

package/src/components/modules/list/item-list.tsx

@@ -1,117 +1,7 @@
-// import React, { RefObject } from 'react';
-// import Accordion from '~/components/modules/accordions/default';
-// import Header from '~/components/modules/list/header';
-// import MapAccordionItemContainer from '~/components/modules/list/list-item';
-// import Sort from '~/components/modules/filter/sort';
-// import ListingDetails from '~/components/modules/jobListing/listing-details';
-// import Loading from "~/util/loading";
-// import { dynamicSort } from '~/util/sortUtil';
-// import { IListing } from '~/interfaces/IListings';
-// import { IMapConfig } from '~/interfaces/config/IMapConfig';
-
-// interface ItemsListProps {
-//   fieldNames: Record<string, string>;
-//   showMap: boolean;
-//   fieldsShown: string[];
-//   specialFeatures: any;
-//   mapItems: any;
-//   filteredListings: IListing[];
-//   loading: boolean;
-//   sortSetting: any;
-//   setSortSetting: (setting: any) => void;
-//   itemLimit: number;
-//   loader: RefObject<HTMLDivElement>;
-//   scrollContainerRef: RefObject<HTMLDivElement>;
-//   itemRefs: any;
-//   selectedListItem: IListing | null;
-//   itemExpandedContent: (item: IListing, recruiters: any) => JSX.Element | null;
-// }
-
-// const ItemsList: React.FC<ItemsListProps> = ({
-// 	fieldNames,
-// 	showMap,
-// 	fieldsShown,
-// 	specialFeatures,
-// 	mapItems,
-// 	filteredListings,
-// 	loading,
-// 	sortSetting,
-// 	setSortSetting,
-// 	itemLimit,
-// 	loader,
-// 	scrollContainerRef,
-// 	itemRefs,
-// 	selectedListItem,
-// 	itemExpandedContent
-// }) => (
-// 	<div className="hc-relative hc-bg-white md:hc-px-4 hc-flex hc-flex-col">
-// 		<div className="hc-flex hc-flex-wrap hc-items-center hc-justify-between hc-gap-4 md:hc-mb-2 hc-p-3 md:hc-p-0 hc-bg-uiAccent/10 md:hc-bg-transparent hc-border-b md:hc-border-none hc-border-uiAccent/20">
-// 			<h2 className="hc-text-gray-500 hc-font-semibold hc-text-xs md:hc-text-sm">
-// 				{loading && <span>Loading...</span>}
-// 				{!loading && <span>{filteredListings.length} results</span>}
-// 			</h2>
-// 			<div className="hc-block md:hc-hidden">
-// 				<Sort
-// 					className={''}
-// 					fields={fieldsShown}
-// 					setSortSetting={setSortSetting}
-// 					fieldNames={fieldNames}
-// 				/>
-// 			</div>
-// 		</div>
-// 		<div>
-// 			<Header
-// 				className={''}
-// 				setSortSetting={setSortSetting}
-// 				sortSetting={sortSetting}
-// 				fieldsShown={fieldsShown}
-// 				fieldNames={fieldNames}
-// 			/>
-// 		</div>
-// 		<div
-// 			ref={scrollContainerRef}
-// 			className={`
-//         hc-flex-grow hc-overflow-y-auto
-//         ${showMap ? "md:hc-max-h-45vh hc-max-h-[100vh]" : "md:hc-max-h-95vh hc-max-h-[95vh]"}
-//       `}
-// 		>
-// 			{loading ? (
-// 				<div className="hc-flex hc-justify-center hc-items-center hc-pt-20">
-// 					<Loading />
-// 				</div>
-// 			) : (
-// 				<Accordion className="hc-divide-y hc-divide-uiAccent/10 hc-z-[1000]" defaultValue={selectedListItem?.id}>
-// 					{(sortSetting ? dynamicSort(filteredListings, sortSetting.field, sortSetting.type) : filteredListings).slice(0, itemLimit).map((item: IListing) => (
-// 						<MapAccordionItemContainer
-// 							key={item.id}
-// 							showMap={showMap}
-// 							item={item}
-// 							itemRefs={itemRefs}
-// 							fieldsShown={fieldsShown}
-// 							itemExpandedContent={itemExpandedContent}
-// 							specialFeatures={specialFeatures}
-// 							mapItems={mapItems}
-// 							isActive={selectedListItem?.id === item.id}
-// 							hasListItemSelected={selectedListItem != null}
-// 						/>
-// 					))}
-
-// 				</Accordion>
-// 			)}
-// 			<div ref={loader} style={{ height: "100px", textAlign: "center" }}>
-// 				{filteredListings.length >= itemLimit && <Loading />}
-// 			</div>
-// 		</div>
-// 	</div>
-// );
-
-// export default ItemsList;
 import React, { RefObject, ReactNode } from 'react';
 import Header from '~/components/modules/list/header';
-import MapAccordionItemContainer from '~/components/modules/list/list-item';
 import Sort from '~/components/modules/filter/sort';
 import Loading from "~/util/loading";
-import { dynamicSort } from '~/util/sortUtil';
 import { Listing } from '~/types/Listings';
 
 interface ItemsListProps {
@@ -127,7 +17,6 @@ interface ItemsListProps {
   scrollContainerRef: RefObject<HTMLDivElement>;
   itemRefs: any;
   selectedListItem: Listing | null;
-  itemExpandedContent: (item: Listing, recruiters: any) => JSX.Element | null;
   children: ReactNode;
   includeFavorite: boolean;
 }
@@ -143,11 +32,8 @@ const ItemsList: React.FC<ItemsListProps> = ({
 	itemLimit,
 	loader,
 	scrollContainerRef,
-	itemRefs,
-	selectedListItem,
-	itemExpandedContent,
 	includeFavorite = false,
-	children // Destructure children
+	children
 }) => (
 	<div className="hc-relative hc-bg-white md:hc-px-4 hc-flex hc-flex-col">
 		<div className="hc-flex hc-flex-wrap hc-items-center hc-justify-between hc-gap-4 md:hc-mb-2 hc-p-3 md:hc-p-0 hc-bg-uiAccent/10 md:hc-bg-transparent hc-border-b md:hc-border-none hc-border-uiAccent/20">

package/src/components/modules/list/list-item/list-item.js

@@ -17,7 +17,7 @@ const ListItem = forwardRef(
 			setMobileTab,
 			handleSettingFavorites,
 			favorites,
-			includeFavorite = false,
+			includeFavorite = true,
 			siteConfig,
 			trackEvent,
 			eventTypes,
@@ -122,6 +122,7 @@ export default React.memo(ListItem, (prevProps, nextProps) => {
 		prevProps.isActive === nextProps.isActive &&
 		prevProps.favorites === nextProps.favorites &&
     prevProps.item.id === nextProps.item.id &&
+	prevProps.item.fields.travelTime === nextProps.item.fields.travelTime &&
     prevProps.fieldsShown === nextProps.fieldsShown &&
     prevProps.bodyClassName === nextProps.bodyClassName &&
     prevProps.className === nextProps.className

package/src/components/modules/maps/info-window-content.js

@@ -1,81 +1,35 @@
-import React from 'react';
-
-import { useMapList } from '~/contexts/mapListContext';
-import { useTrackEvent } from '~/contexts/trackEventContext';
-
-const InfoWindowContent = ({
-	item,
-	filterListingsByLocation
-}) => {
-	const { trackEvent, eventTypes } = useTrackEvent();
-	const { setSelectedFilters, setMobileTab, selectedFilters, siteConfig } = useMapList();
-	const fieldsShown = siteConfig.fieldsShown;
-	let items = item && item.items ? Object.values(item.items) : null;
-
-	if (!items || items.length < 0) {
-		return;
-	}
-	const addressParts = [
-		items[0].mapDetails?.address?.street,
-		items[0].mapDetails?.address?.city,
-		items[0].mapDetails?.address?.state,
-		items[0].mapDetails?.address?.zip
-	];
-	const fullAddress = addressParts.filter(Boolean).join(', ');
-
-	return (
-		<div className="hc-flex-auto hc-p-2">
-			<div>
-				<div>
-					<h4 className="hc-text-lg hc-font-bold hc-leading-tight hc-mb-3">
-						{items[0].mapDetails?.entityDisplayName}
-					</h4>
-					<p>
-						{fullAddress}
-					</p>
-					<div className="hc-pt-2">
-						<button
-							className="hc-cursor-pointer hover:hc-opacity-70 hc-text-primary"
-							onClick={() => {
-
-								setMobileTab("listTab");
-								const newFilters = { ...selectedFilters };
-								let filters = [];
-
-								if (fieldsShown.includes('cityState')) {
-									newFilters.cityState = {
-										[items[0].fields.cityState]: true
-									};
-									filters.push({ filterType: 'cityState', filterChecked: items[0].fields.cityState });
-								}
-
-								if (fieldsShown.includes('city')) {
-									newFilters.city = {
-										[items[0].fields.city]: true
-									};
-									filters.push({ filterType: 'city', filterChecked: items[0].fields.city });
-								}
-
-								if (fieldsShown.includes('state')) {
-									newFilters.state = {
-										[items[0].fields.state]: true
-									};
-									filters.push({ filterType: 'state', filterChecked: items[0].fields.state });
-								}
-								trackEvent(eventTypes.VIEW_JOBS_AT_Location, { filtersApplied: filters });
-								setSelectedFilters(newFilters);
-								filterListingsByLocation();
-							}}
-						>
-							{items.length > 1
-								? `View All ${items.length} jobs at this location`
-								: `View job at this location`}
-						</button>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-};
-
-export default InfoWindowContent;
+import React from 'react';
+
+const InfoWindowContent = ({
+	items,
+	fullAddress,
+	applyFilters
+}) => {
+	if (!items || items.length < 0) {
+		return null;
+	}
+	return (
+		<div className="hc-flex-auto hc-p-2">
+			<div>
+				<div>
+					<h4 className="hc-text-lg hc-font-bold hc-leading-tight hc-mb-3">
+						{items[0].mapDetails?.entityDisplayName}
+					</h4>
+					<p>{fullAddress}</p>
+					<div className="hc-pt-2">
+						<button
+							className="hc-cursor-pointer hover:hc-opacity-70 hc-text-primary"
+							onClick={applyFilters}
+						>
+							{items.length > 1
+								? `View All ${items.length} jobs at this location`
+								: `View job at this location`}
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default InfoWindowContent;

package/src/components/modules/maps/map-list.js

@@ -1,70 +1,24 @@
 import React from 'react';
-
-import List from '~/components/modules/list';
-import Map from '~/components/modules/maps/map';
 import Tabs from '~/components/modules/maps/tabs';
-import Filter from '~/components/modules/filter';
-
-const MapList = ({
-	loading = false,
-	mapDetails,
-	markerConfigs,
-	itemExpandedContent,
-	fieldsShown,
-	specialFeatures,
-	fieldNames,
-	showMap,
-	placeMappings
-}) => {
-
-	const listProps = {
-		fieldsShown: fieldsShown,
-		fieldNames: fieldNames,
-		itemExpandedContent: itemExpandedContent,
-		loading: loading,
-		showMap: showMap,
-		specialFeatures: specialFeatures
-	};
-
-	const mapProps = {
-		mapDetails: mapDetails,
-		markerConfigs: markerConfigs,
-		placeMappings: placeMappings,
-		clusterGridSize: 60,
-		showMap: showMap
-	};
 
-	// useEffect(() => {
-	// 	if (selectedItem !== null) {
-	// 		trackEvent("Map", "View Location", selectedItem[titlePropName]);
-	// 	}
-	// 	// eslint-disable-next-line react-hooks/exhaustive-deps
-	// }, []);
-	const map = <Map {...mapProps} />;
+const MapList = ({ showMap, loading, list, map, filter }) => {
 	return (
 		<>
 			<div
 				className={`
-					${showMap == false ? "md:hc-grid-rows-[100vh]" : "md:hc-grid-rows-[50vh_50vh]"}
+					${showMap === false ? "md:hc-grid-rows-[100vh]" : "md:hc-grid-rows-[50vh_50vh]"}
 					md:hc-grid md:hc-pt-4 hc-overflow-hidden hc-relative bg-gray-100
 				`}
 			>
-				<div>
-					<List {...listProps} />
-				</div>
+				<div>{list}</div>
 				<div>{showMap && map}</div>
 			</div>
 			<div className="md:hc-hidden">
 				<Tabs
 					showMap={showMap}
-					list={<List {...listProps} />}
+					list={list}
 					map={!loading && showMap && map}
-					filter={
-						<Filter
-							showMap={showMap}
-							className="md:hc-hidden"
-						/>
-					}
+					filter={filter}
 				/>
 			</div>
 		</>

package/src/components/modules/maps/map-marker.js

@@ -1,88 +1,29 @@
-import React, { useEffect, useRef } from 'react';
-import { MarkerF, InfoWindow } from '@react-google-maps/api';
-
-import InfoWindowCard from '~/components/modules/maps/info-window-card';
-import InfoWindowContent from "~/components/modules/maps/info-window-content";
-
-import { useMap } from "~/contexts/mapContext";
-import { useMapList } from "~/contexts/mapListContext";
-import { useTrackEvent } from '~/contexts/trackEventContext';
-
-const MapMarker = ({
-	item,
-	markerRefs,
-	infoWindowClasses,
-	markerClickHandler,
-	clusterer,
-	markerIconSelected,
-	markerIcon,
-	selectedLocation,
-	setMapInteracted
-}) => {
-	const { setLocation, commuteLocation } = useMap();
-	const isSelected = item.id === selectedLocation?.id;
-	const markerRef = useRef(null);
-	const { trackEvent, eventTypes } = useTrackEvent();
-	const {
-		handleFilterListingsByLocation
-	} = useMapList();
-
-	useEffect(() => {
-		markerRefs.current[item.id] = markerRef.current;
-	}, []);
-
-	const onMarkerClick = () => {
-		trackEvent(eventTypes.MAP_MARKER_CLICKED, { entityDisplayName: item.entityDisplayName, lat: item.latitude, lng: item.longitude, travelTime: item.travelTime });
-		setMapInteracted(true);
-		markerClickHandler(item);
-	};
-
-	const getInfoWindow = () => {
-		if (!isSelected || !item || !item.id || !selectedLocation) {
-			return;
-		}
-		//Direct dom removal of empty info windows
-		document.querySelectorAll("div.gm-style-iw.gm-style-iw-c").forEach(x => { if (!x.innerHTML.includes(item.id)) x.parentElement.remove(); });
-		return (
-			<InfoWindow
-				position={{ lat: item.latitude, lng: item.longitude }}
-				anchor={markerRefs.current[item.id]}
-				onCloseClick={() => {
-					setMapInteracted(true);
-					setLocation(null);
-				}}
-				options={{ maxWidth: 400 }}
-			>
-				<InfoWindowCard
-					className={infoWindowClasses}
-					id={item.id}
-					content={<InfoWindowContent
-						item={item}
-						commuteLocation={commuteLocation}
-						filterListingsByLocation={() =>
-							handleFilterListingsByLocation(selectedLocation)
-						}
-					/>}
-				/>
-			</InfoWindow>
-		);
-	};
-	return (
-		<MarkerF
-			key={item.id}
-			position={{ lat: item.latitude, lng: item.longitude }}
-			title={item.name}
-			options={{
-				icon: isSelected ? markerIconSelected : markerIcon
-			}}
-			zIndex={isSelected ? 9999 : 1}
-			onLoad={marker => (markerRef.current = marker)}
-			onClick={onMarkerClick}
-			clusterer={clusterer}
-		>
-			{isSelected && getInfoWindow()}
-		</MarkerF>
-	);
-};
-
-export default MapMarker;
+import React from 'react';
+import { MarkerF } from '@react-google-maps/api';
+
+const MapMarker = ({
+	position,
+	title,
+	icon,
+	zIndex,
+	onLoad,
+	onClick,
+	clusterer,
+	children
+}) => {
+	return (
+		<MarkerF
+			position={position}
+			title={title}
+			options={{ icon: icon }}
+			zIndex={zIndex}
+			onLoad={onLoad}
+			onClick={onClick}
+			clusterer={clusterer}
+		>
+			{children}
+		</MarkerF>
+	);
+};
+
+export default MapMarker;