@abcagency/hc-ui-components 1.3.17 → 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;