@abcagency/hc-ui-components 1.3.18 → 1.3.20

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { useMap } from '~/contexts/mapContext';
+import { useMapList } from '~/contexts/mapListContext';
+import { useTrackEvent } from '~/contexts/trackEventContext';
+import { setStorageObject } from '~/util/localStorageUtil';
+import MapAccordionItem from '~/components/modules/accordions/MapAccordionItem';
+import ListItemContainer from '~/components/modules/list/list-item/list-item-container';
+
+const MapAccordionItemContainer = ({
+	showMap,
+	item,
+	itemRefs,
+	fieldsShown,
+	itemExpandedContent,
+	specialFeatures,
+	isActive,
+	hasListItemSelected
+}) => {
+	const { mapItems } = useMapList();
+	const { selectItem } = useMap();
+	const { trackEvent, eventTypes } = useTrackEvent();
+
+	const setSelectedItemAndZoomMap = (item, isActive) => {
+		if (isActive) {
+			localStorage.removeItem("selectedListItem");
+			const location = mapItems.find(x => Object.prototype.hasOwnProperty.call(x.items, item.id)) || null;
+			selectItem(null, null, 9, { lat: 39.8283, lng: -98.5795 });
+		} else {
+			setStorageObject("selectedListItem", item);
+			const location = mapItems.find(x => Object.prototype.hasOwnProperty.call(x.items, item.id)) || null;
+			selectItem(item, location, 12, {
+				lat: location?.latitude,
+				lng: location?.longitude
+			});
+		}
+	};
+
+	const handleItemClick = item => {
+		trackEvent(eventTypes.JOB_LISTING_SELECTED, {
+			jobTitle: item.fields.position,
+			jobCategory: item.fields.category,
+			entityDisplayName: item?.mapDetails?.entityDisplayName
+		});
+
+		setSelectedItemAndZoomMap(item, isActive);
+	};
+
+	return (
+		<MapAccordionItem
+			item={item}
+			itemRefs={itemRefs}
+			itemExpandedContent={itemExpandedContent}
+			isActive={isActive}
+
+		>
+			<ListItemContainer
+				showMap={showMap}
+				item={item}
+				itemRefs={itemRefs}
+				fieldsShown={fieldsShown}
+				specialFeatures={specialFeatures}
+				isActive={isActive}
+				hasListItemSelected={hasListItemSelected}
+				onClick={() => handleItemClick(item)}
+			/>
+		</MapAccordionItem>
+	);
+};
+
+export default MapAccordionItemContainer;

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

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { useMapList } from '~/contexts/mapListContext';
+import { useTrackEvent } from '~/contexts/trackEventContext';
+import ListItem from '~/components/modules/list/list-item/list-item';
+
+const ListItemContainer = ({
+	isActive,
+	showMap,
+	item,
+	itemRefs,
+	fieldsShown,
+	specialFeatures,
+	className,
+	bodyClassName,
+	onItemSelected,
+	...props
+}) => {
+	const { siteConfig, favorites, handleSettingFavorites, setMobileTab } = useMapList();
+	const { trackEvent, eventTypes } = useTrackEvent();
+
+	return (
+		<ListItem
+			isActive={isActive}
+			showMap={showMap}
+			item={item}
+			itemRefs={itemRefs}
+			fieldsShown={fieldsShown}
+			specialFeatures={specialFeatures}
+			className={isActive ? "!hc-border-secondary hc-border hc-border-b-0" : "hc-opacity-85"}
+			bodyClassName={bodyClassName}
+			onItemSelected={onItemSelected}
+			setMobileTab={setMobileTab}
+			siteConfig={siteConfig}
+			trackEvent={trackEvent}
+			eventTypes={eventTypes}
+			favorites={favorites}
+			handleSettingFavorites={handleSettingFavorites}
+			{...props}
+		/>
+	);
+};
+
+export default ListItemContainer;

package/src/components/modules/{maps/list/list-item/index.js → list/list-item/list-item.js}

@@ -1,11 +1,7 @@
-import React, { forwardRef } from 'react';
-
+import React, { forwardRef, useState } from 'react';
 import Grid from '~/components/modules/grid';
 import Icon from '~/components/modules/icon';
-import FieldMapper from '~/components/modules/maps/list/field-mapper';
-
-import { useMapList } from '~/contexts/mapListContext';
-import { useTrackEvent } from '~/contexts/trackEventContext';
+import FieldMapper from '~/components/modules/list/field-mapper';
 
 const ListItem = forwardRef(
 	(
@@ -19,45 +15,45 @@ const ListItem = forwardRef(
 			onItemSelected,
 			showMap,
 			setMobileTab,
+			handleSettingFavorites,
 			favorites,
-			setFavorites,
+			includeFavorite = false,
+			siteConfig,
+			trackEvent,
+			eventTypes,
 			...props
 		},
 		ref
 	) => {
-		const { siteConfig } = useMapList();
-		const { trackEvent, eventTypes } = useTrackEvent();
-		const mapPinColor = siteConfig.colors.primary.replace("#", "");
+		const mapPinColor = !showMap ? null : siteConfig.colors.primary.replace("#", "");
 
 		const handleClick = () => {
 			if (onItemSelected) {
 				onItemSelected(item);
 			}
 		};
-
 		let isFavorite = favorites.includes(item.id);
 
-		const handleFavouriteClick = event => {
+		const handleFavouriteClick = (event, item) => {
+			if(!includeFavorite)return;
 			event.stopPropagation();
 			let updatedFavorites;
 			if (isFavorite) {
 				updatedFavorites = favorites.filter(fav => fav !== item.id);
 			} else {
-				trackEvent(eventTypes.FAVORITE_SELECTED, { jobTitle: item.fields.position, jobCategory: item.fields.category, entityDisplayName: item?.mapDetails?.entityDisplayName });
 				updatedFavorites = [...favorites, item.id];
 			}
 			isFavorite = !isFavorite;
-			setFavorites(updatedFavorites);
+			handleSettingFavorites(updatedFavorites);
 		};
-
 		return (
 			<button
 				ref={ref}
-				onClick={handleClick}
+				onClick={() => { handleClick(); }}
 				className={`
-					hc-group hc-relative hc-flex md:hc-flex-col hc-w-full md:hc-pl-4 hc-text-left hc-bg-clip-border hc-border hc-border-transparent hc-break-words hc-overflow-hidden hc-cursor-pointer hc-transition-colors hover:hc-bg-uiAccent/5 focus:hover:hc-bg-uiAccent/5
-					${isActive ? "hc-bg-uiAccent/5 hc-border-secondary hc-border" : "hc-text-uiText hc-bg-white"}
-					${className ?? ""}
+          hc-group hc-relative hc-flex md:hc-flex-col hc-w-full md:hc-pl-4 hc-text-left hc-bg-clip-border hc-border hc-border-transparent hc-break-words hc-overflow-hidden hc-cursor-pointer hc-transition-colors hover:hc-bg-uiAccent/5 focus:hover:hc-bg-uiAccent/5
+          ${isActive ? "hc-bg-uiAccent/5 hc-border-secondary hc-border" : "hc-text-uiText hc-bg-white"}
+          ${className ?? ""}
         `}
 				{...props}
 			>
@@ -66,9 +62,9 @@ const ListItem = forwardRef(
 					gap="hc-gap-2"
 					isAnimated={false}
 					className={`
-						hc-block md:hc-grid hc-p-2 hc-ps-4 hc-w-full hc-grow hc-leading-tight hc-text-sm md:hc-text-xs lg:hc-text-sm
-						${bodyClassName ?? ""}
-					`}
+            hc-block md:hc-grid hc-p-2 hc-ps-4 hc-w-full hc-grow hc-leading-tight hc-text-sm md:hc-text-xs lg:hc-text-sm
+            ${bodyClassName ?? ""}
+          `}
 				>
 					<Grid.Item className="hc-hidden md:hc-block md:hc-absolute md:hc-left-1.5 hc-top-1.5">
 						<span className="hc-sr-only">Expand row</span>
@@ -76,20 +72,20 @@ const ListItem = forwardRef(
 							icon="fluent-emoji-high-contrast:plus"
 							size="hc-size-2.5"
 							className={`
-								hc-opacity-0 hc-text-uiText/60 hc-transition group-hover:hc-opacity-100 group-active:hc-opacity-100
-								${isActive ? "hc-opacity-100 hc-rotate-45" : ""}
-							`}
+                hc-opacity-0 hc-text-uiText/60 hc-transition group-hover:hc-opacity-100 group-active:hc-opacity-100
+                ${isActive ? "hc-opacity-100 hc-rotate-45" : ""}
+              `}
 						/>
-
 					</Grid.Item>
-
 					<FieldMapper
 						item={item}
 						fieldsShown={fieldsShown}
 						specialFeatures={specialFeatures}
 						isFavorite={isFavorite}
+						includeFavorite={includeFavorite}
 						handleFavouriteClick={handleFavouriteClick}
 					/>
+					{includeFavorite &&
 					<Grid.Item
 						key={"favorites"}
 						className="hc-hidden md:hc-block hc-col-span-1"
@@ -99,14 +95,12 @@ const ListItem = forwardRef(
 							size="hc-size-3.5"
 							iconClasses={isFavorite ? "hc-text-primary" : ""}
 							title={!isFavorite ? 'Add job to favorites' : 'Remove job from favorites'}
-							className={`
-							hc-pr-2 hc-transition-opacity hc-duration-300 hc-cursor-pointer hc-opacity-100"
-						`}
-							onClick={e => handleFavouriteClick(e)}
+							className="hc-pr-2 hc-transition-opacity hc-duration-300 hc-cursor-pointer hc-opacity-100"
+							onClick={e => {handleFavouriteClick(e, item);}}
 						/>
 					</Grid.Item>
+					}
 				</Grid>
-
 				{showMap && (
 					<div onClick={() => { setMobileTab("mapTab"); handleClick(); }} className="md:hc-hidden hc-w-2/5 sm:hc-w-1/3 hc-p-1.5 hc-my-1 hc-bg-uiAccent/5 hc-border hc-border-uiAccent/10 hc-rounded-sm">
 						<img
@@ -125,11 +119,11 @@ ListItem.displayName = "ListItem";
 
 export default React.memo(ListItem, (prevProps, nextProps) => {
 	return (
-		(prevProps.isActive === nextProps.isActive ||
-			prevProps.isActive !== nextProps.isActive) &&
-		prevProps.bodyClassName === nextProps.bodyClassName &&
-		prevProps.className === nextProps.className &&
-		prevProps.fieldsShown === nextProps.fieldsShown &&
-		prevProps.item.id === nextProps.item.id
+		prevProps.isActive === nextProps.isActive &&
+		prevProps.favorites === nextProps.favorites &&
+    prevProps.item.id === nextProps.item.id &&
+    prevProps.fieldsShown === nextProps.fieldsShown &&
+    prevProps.bodyClassName === nextProps.bodyClassName &&
+    prevProps.className === nextProps.className
 	);
 });

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

@@ -1,74 +1,74 @@
-import React from 'react';
-
-import List from '~/components/modules/maps/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} />;
-	return (
-		<>
-			<div
-				className={`
-					${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>{showMap && map}</div>
-			</div>
-			<div className="md:hc-hidden">
-				<Tabs
-					showMap={showMap}
-					list={<List {...listProps} />}
-					map={!loading && showMap && map}
-					filter={
-						<Filter
-							showMap={showMap}
-							className="md:hc-hidden"
-						/>
-					}
-				/>
-			</div>
-		</>
-	);
-};
-
-export default MapList;
+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} />;
+	return (
+		<>
+			<div
+				className={`
+					${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>{showMap && map}</div>
+			</div>
+			<div className="md:hc-hidden">
+				<Tabs
+					showMap={showMap}
+					list={<List {...listProps} />}
+					map={!loading && showMap && map}
+					filter={
+						<Filter
+							showMap={showMap}
+							className="md:hc-hidden"
+						/>
+					}
+				/>
+			</div>
+		</>
+	);
+};
+
+export default MapList;

package/src/contexts/mapContext.tsx

@@ -0,0 +1,129 @@
+import React, { createContext, useState, useContext, useEffect, useRef, ReactNode } from 'react';
+import { getStorageObject, setStorageObject } from '~/util/localStorageUtil';
+import { Listing } from '~/types/Listings';
+import { LatLng } from '~/types/LatLng';
+interface IMapContext {
+  selectedListItem: Listing | null;
+  setSelectedListItem: (item: Listing | null) => void;
+  location: any | null;
+  setLocation: (location: LatLng | null) => void;
+  center: LatLng;
+  setCenter: (center: LatLng) => void;
+  zoom: number;
+  setZoom: (zoom: number) => void;
+  selectedPlaces: string[];
+  setSelectedPlaces: (places: string[]) => void;
+  mapInteracted: boolean;
+  setMapInteracted: (interacted: boolean) => void;
+  userSetZoom: React.MutableRefObject<boolean>;
+  firstLoadListItem: any;
+  selectItem: (item: Listing, itemLocation: LatLng | null, zoom: number, center: LatLng) => void;
+  filterReset: () => void;
+  selectLocationEntity: (location: LatLng) => void;
+}
+
+const MapContext = createContext<IMapContext | undefined>(undefined);
+
+export const useMap = () => {
+	const context = useContext(MapContext);
+	if (!context) {
+		throw new Error("useMap must be used within a MapProvider");
+	}
+	return context;
+};
+
+interface MapProviderProps {
+  children: ReactNode;
+  resetFilters: boolean;
+}
+
+export const MapProvider: React.FC<MapProviderProps> = ({ children, resetFilters }) => {
+	const [selectedListItem, setSelectedListItem] = useState<Listing | null>(getStorageObject('selectedListItem'));
+	const [location, setLocation] = useState<any>(getStorageObject('location'));
+	const [center, setCenter] = useState<LatLng>(getStorageObject("center", { lat: 39.8283, lng: -98.5795 }) || { lat: 39.8283, lng: -98.5795 });
+	const [zoom, setZoom] = useState<number>(getStorageObject("zoom", 10) || 10);
+	const [selectedPlaces, setSelectedPlaces] = useState<string[]>([]);
+	const [mapInteracted, setMapInteracted] = useState<boolean>(false);
+	const [firstLoadListItem] = useState<any>(getStorageObject('selectedListItem', { id: "defaultId" }));
+	const userSetZoom = useRef<boolean>(true);
+
+	useEffect(() => {
+		setStorageObject("selectedListItem", selectedListItem);
+	}, [selectedListItem]);
+
+	useEffect(() => {
+		localStorage.setItem("zoom", zoom.toString());
+	}, [zoom]);
+
+	useEffect(() => {
+		if (location == null) {
+			localStorage.removeItem("location");
+		} else {
+			setStorageObject("location", location);
+		}
+	}, [location]);
+
+	useEffect(() => {
+		setStorageObject("center", center);
+	}, [center]);
+
+	const selectItem = (item: Listing, itemLocation: LatLng | null, zoom: number, center: LatLng) => {
+		setSelectedListItem(item);
+		if (mapInteracted === false && itemLocation != null) {
+			setLocation(itemLocation);
+		}
+		if (mapInteracted === false || itemLocation != null) {
+			setLocation(itemLocation);
+			setCenter(center);
+		}
+		if (mapInteracted === false) {
+			setZoom(zoom);
+		}
+	};
+
+	const filterReset = () => {
+		setSelectedPlaces([]);
+		setSelectedListItem(null);
+		setLocation(null);
+		setZoom(8);
+		setMapInteracted(false);
+	};
+
+	useEffect(() => {
+		if (resetFilters === true) {
+			filterReset();
+		}
+	}, [resetFilters]);
+
+	const selectLocationEntity = (location: LatLng) => {
+		localStorage.removeItem("selectedListItem");
+		setTimeout(() => setLocation(location), 200);
+		setSelectedListItem(null);
+	};
+
+	return (
+		<MapContext.Provider
+			value={{
+				selectedListItem,
+				setSelectedListItem,
+				location,
+				center,
+				setCenter,
+				zoom,
+				setZoom,
+				selectItem,
+				setSelectedPlaces,
+				selectedPlaces,
+				selectLocationEntity,
+				setLocation,
+				setMapInteracted,
+				mapInteracted,
+				userSetZoom,
+				firstLoadListItem,
+				filterReset
+			}}
+		>
+			{children}
+		</MapContext.Provider>
+	);
+};