@abcagency/hc-ui-components 1.3.18 → 1.3.19

package/src/components/modules/list/index.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import useListLogic from '~/hooks/useList';
+import { useMap } from '~/contexts/mapContext';
+import { useMapList } from '~/contexts/mapListContext';
+import { useTrackEvent } from '~/contexts/trackEventContext';
+import ItemsList from '~/components/modules/list/item-list';
+import Accordion from '~/components/modules/accordions/default';
+import MapAccordionItemContainer from '~/components/modules/list/list-item';
+import { dynamicSort } from '~/util/sortUtil';
+import { Listing } from '~/types/Listings';
+import ListingDetailsContainer from '../jobListing/listing-details-container';
+
+interface ItemsListContainerProps {
+  fieldNames: Record<string, string>;
+  showMap: boolean;
+  fieldsShown: string[];
+  specialFeatures: any;
+}
+
+const ItemsListContainer: React.FC<ItemsListContainerProps> = ({
+	fieldNames,
+	showMap,
+	fieldsShown,
+	specialFeatures
+}) => {
+	const { mapItems, filteredListings, loading, commuteLocation, sortSetting, setSortSetting } = useMapList();
+	const { itemLimit, loader, scrollContainerRef, itemRefs } = useListLogic(filteredListings as any);
+	const { selectedListItem } = useMap();
+	const { trackEvent, eventTypes } = useTrackEvent() as any;
+	const itemExpandedContent = (item: any, recruiters: any) =>
+		item ? <ListingDetailsContainer item={item} recruiters={recruiters} /> : null;
+
+	if (!fieldsShown.includes('travelTime') && commuteLocation != null && Object.entries(commuteLocation).length > 0) {
+		fieldsShown.push('travelTime');
+		fieldNames['travelTime'] = 'Commute';
+	} else if (fieldsShown.includes('travelTime') && !commuteLocation) {
+		fieldsShown = fieldsShown.filter(x => x !== 'travelTime');
+	}
+
+	const setTrackedSortSetting = (sortSetting: { field: string; type: string }) => {
+		trackEvent(eventTypes.LIST_SORTED, sortSetting);
+		setSortSetting(sortSetting);
+	};
+
+	return (
+		<ItemsList
+			fieldNames={fieldNames}
+			showMap={showMap}
+			fieldsShown={fieldsShown}
+			filteredListings={filteredListings}
+			loading={loading}
+			sortSetting={sortSetting}
+			setSortSetting={setTrackedSortSetting}
+			itemLimit={itemLimit}
+			loader={loader}
+			scrollContainerRef={scrollContainerRef}
+			itemRefs={itemRefs}
+			selectedListItem={selectedListItem}
+			itemExpandedContent={itemExpandedContent}
+			includeFavorite={true}
+		>
+			<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: Listing) => (
+						<MapAccordionItemContainer
+							key={item.id}
+							showMap={showMap}
+							item={item}
+							itemRefs={itemRefs}
+							fieldsShown={fieldsShown}
+							itemExpandedContent={itemExpandedContent}
+							specialFeatures={specialFeatures}
+							isActive={selectedListItem?.id === item.id}
+							hasListItemSelected={selectedListItem != null}
+						/>
+					))}
+			</Accordion>
+		</ItemsList>
+	);
+};
+
+export default ItemsListContainer;

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

@@ -1,22 +1,24 @@
-import React from 'react';
-import { twMerge } from 'tailwind-merge';
-
-const CardItemExpand = ({
-	className,
-	content,
-	...props
-}) => {
-	return (
-		<div
-			className={twMerge(
-				'hc-flex hc-flex-col lg:hc-flex-row hc-flex-wrap hc-items-stretch hc-gap-x-4 hc-w-full lg:hc-pt-2 hc-border-t hc-border-uiAccent/20',
-				className ?? ''
-			)}
-			{...props}
-		>
-			{content}
-		</div>
-	);
-};
-
-export default CardItemExpand;
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+
+const CardItemExpand = ({
+	className,
+	content,
+	...props
+}) => {
+	console.log(content);
+	console.log("cardItem render");
+	return (
+		<div
+			className={twMerge(
+				'hc-flex hc-flex-col lg:hc-flex-row hc-flex-wrap hc-items-stretch hc-gap-x-4 hc-w-full lg:hc-pt-2 hc-border-t hc-border-uiAccent/20',
+				className ?? ''
+			)}
+			{...props}
+		>
+			{content}
+		</div>
+	);
+};
+
+export default CardItemExpand;

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

@@ -0,0 +1,198 @@
+// 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 {
+  fieldNames: Record<string, string>;
+  showMap: boolean;
+  fieldsShown: string[];
+  filteredListings: Listing[];
+  loading: boolean;
+  sortSetting: any;
+  setSortSetting: (setting: any) => void;
+  itemLimit: number;
+  loader: RefObject<HTMLDivElement>;
+  scrollContainerRef: RefObject<HTMLDivElement>;
+  itemRefs: any;
+  selectedListItem: Listing | null;
+  itemExpandedContent: (item: Listing, recruiters: any) => JSX.Element | null;
+  children: ReactNode;
+  includeFavorite: boolean;
+}
+
+const ItemsList: React.FC<ItemsListProps> = ({
+	fieldNames,
+	showMap,
+	fieldsShown,
+	filteredListings,
+	loading,
+	sortSetting,
+	setSortSetting,
+	itemLimit,
+	loader,
+	scrollContainerRef,
+	itemRefs,
+	selectedListItem,
+	itemExpandedContent,
+	includeFavorite = false,
+	children // Destructure 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">
+			<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}
+				includeFavorite={includeFavorite}
+			/>
+		</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>
+			) : (
+				children
+			)}
+			<div ref={loader} style={{ height: "100px", textAlign: "center" }}>
+				{filteredListings.length >= itemLimit && <Loading />}
+			</div>
+		</div>
+	</div>
+);
+
+export default ItemsList;

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
 	);
 });