@abcagency/hc-ui-components 1.3.18 → 1.3.20

package/src/components/modules/{maps/list → list}/field-mapper.js

@@ -1,112 +1,114 @@
-import React from 'react';
-
-import Grid from '~/components/modules/grid';
-import Icon from '~/components/modules/icon';
-import PillWrapper from '~/components/modules/buttons/pill-wrapper';
-
-import { capitalize } from '~/util/stringUtils';
-
-const FieldMapper = ({
-	item,
-	fieldsShown,
-	specialFeatures,
-	handleFavouriteClick,
-	isFavorite
-}) => {
-	const orderedFields = fieldsShown.filter(field => field in item.fields);
-
-	const specialFeaturePills = field => {
-		return field === 'position' && specialFeatures &&
-			Object.entries(specialFeatures).map(([featureKey, featureLabel]) => {
-				return item.fields[featureKey] === 1 && (
-					<PillWrapper key={featureKey}>{featureLabel}</PillWrapper>
-				);
-			});
-	};
-
-	return (
-		<>
-			{orderedFields.map(field => {
-				let value = item.fields[field];
-				return (
-					<Grid.Item
-						key={field}
-						className={`
-							hc-hidden md:hc-block
-							${field.toLowerCase() === "position" ? "hc-col-span-2 hc-text-balance hc-pr-2 hc-font-semibold" : "hc-col-span-1"}
-						`}
-					>
-						<span className="hc-sr-only">{capitalize(field)}</span>
-						{value}
-						<br />
-						{specialFeaturePills(field)}
-					</Grid.Item>
-				);
-			})}
-			<Grid.Item className="md:hc-hidden">
-				{fieldsShown.includes("position") &&
-					<>
-						<div className="hc-flex hc-items-start">
-							<div className="hc-flex hc-justify-between hc-items-center hc-min-w-[100%]"> {/* Use percentage for minimum width */}
-								<h3 className="hc-font-bold hc-mb-3 hc-flex-1">{item.fields.position}</h3>
-								<div className="hc-flex hc-justify-end hc-pb-2">
-									<Icon
-										icon={isFavorite ? "mdi:heart" : "mdi:heart-outline"}
-										size="hc-size-3.5"
-										iconClasses={isFavorite ? "hc-text-primary" : ""}
-										className={`hc-transition-opacity hc-duration-300 hc-cursor-pointer
-									${isFavorite ? "hc-opacity-100" : "hc-text-uiText/60 group-hover:hc-opacity-100"}
-									`}
-										onClick={e => handleFavouriteClick(e)}
-									/>
-								</div>
-							</div>
-						</div>
-						{specialFeatures && <div className='hc-pb-4'>{specialFeaturePills("position", true)} </div>}
-					</>
-				}
-
-				<ul className="hc-space-y-2 hc-text-xs">
-					{[
-						{
-							field: "category",
-							name: "Category",
-							icon: "icon-park-solid:tree-list"
-						},
-						{
-							field: "schedule",
-							name: "Schedule",
-							icon: "gravity-ui:clock-fill"
-						},
-						{
-							field: "cityState",
-							name: "Location",
-							icon: "fluent:location-16-filled"
-						},
-						{
-							field: "travelTime",
-							name: "Commute",
-							icon: "ri:pin-distance-fill"
-						}
-					].map(listItem => (
-						(fieldsShown.includes(listItem.field) && item.fields[listItem.field]) &&
-						<li
-							key={listItem.field}
-							className="hc-flex hc-gap-2"
-						>
-							<Icon
-								icon={listItem.icon}
-								size="hc-size-3.5"
-								className="hc-text-uiAccent/30"
-							/>
-							<span className="hc-sr-only">{listItem.name}</span>
-							{item.fields[listItem.field]}
-						</li>
-					))}
-				</ul>
-			</Grid.Item>
-		</>
-	);
-};
-
-export default FieldMapper;
+import React from 'react';
+
+import Grid from '~/components/modules/grid';
+import Icon from '~/components/modules/icon';
+import PillWrapper from '~/components/modules/buttons/pill-wrapper';
+
+import { capitalize } from '~/util/stringUtils';
+
+const FieldMapper = ({
+	item,
+	fieldsShown,
+	specialFeatures,
+	handleFavouriteClick,
+	isFavorite,
+	includeFavorite
+}) => {
+	const orderedFields = fieldsShown.filter(field => field in item.fields);
+
+	const specialFeaturePills = field => {
+		return field === 'position' && specialFeatures &&
+			Object.entries(specialFeatures).map(([featureKey, featureLabel]) => {
+				return item.fields[featureKey] === 1 && (
+					<PillWrapper key={featureKey}>{featureLabel}</PillWrapper>
+				);
+			});
+	};
+
+	return (
+		<>
+			{orderedFields.map(field => {
+				let value = item.fields[field];
+				return (
+					<Grid.Item
+						key={field}
+						className={`
+							hc-hidden md:hc-block
+							${field.toLowerCase() === "position" ? "hc-col-span-2 hc-text-balance hc-pr-2 hc-font-semibold" : "hc-col-span-1"}
+						`}
+					>
+						<span className="hc-sr-only">{capitalize(field)}</span>
+						{value}
+						<br />
+						{specialFeaturePills(field)}
+					</Grid.Item>
+				);
+			})}
+			<Grid.Item className="md:hc-hidden">
+				{fieldsShown.includes("position") &&
+					<>
+						<div className="hc-flex hc-items-start">
+							<div className="hc-flex hc-justify-between hc-items-center hc-min-w-[100%]"> {/* Use percentage for minimum width */}
+								<h3 className="hc-font-bold hc-mb-3 hc-flex-1">{item.fields.position}</h3>
+								{includeFavorite && <div className="hc-flex hc-justify-end hc-pb-2">
+									<Icon
+										icon={isFavorite ? "mdi:heart" : "mdi:heart-outline"}
+										size="hc-size-3.5"
+										iconClasses={isFavorite ? "hc-text-primary" : ""}
+										className={`hc-transition-opacity hc-duration-300 hc-cursor-pointer
+									${isFavorite ? "hc-opacity-100" : "hc-text-uiText/60 group-hover:hc-opacity-100"}
+									`}
+										onClick={e => handleFavouriteClick(e)}
+									/>
+								</div>
+								}
+							</div>
+						</div>
+						{specialFeatures && <div className='hc-pb-4'>{specialFeaturePills("position", true)} </div>}
+					</>
+				}
+
+				<ul className="hc-space-y-2 hc-text-xs">
+					{[
+						{
+							field: "category",
+							name: "Category",
+							icon: "icon-park-solid:tree-list"
+						},
+						{
+							field: "schedule",
+							name: "Schedule",
+							icon: "gravity-ui:clock-fill"
+						},
+						{
+							field: "cityState",
+							name: "Location",
+							icon: "fluent:location-16-filled"
+						},
+						{
+							field: "travelTime",
+							name: "Commute",
+							icon: "ri:pin-distance-fill"
+						}
+					].map(listItem => (
+						(fieldsShown.includes(listItem.field) && item.fields[listItem.field]) &&
+						<li
+							key={listItem.field}
+							className="hc-flex hc-gap-2"
+						>
+							<Icon
+								icon={listItem.icon}
+								size="hc-size-3.5"
+								className="hc-text-uiAccent/30"
+							/>
+							<span className="hc-sr-only">{listItem.name}</span>
+							{item.fields[listItem.field]}
+						</li>
+					))}
+				</ul>
+			</Grid.Item>
+		</>
+	);
+};
+
+export default FieldMapper;

package/src/components/modules/{maps/list → list}/header.js

@@ -1,47 +1,49 @@
-import React from 'react';
-import { twMerge } from 'tailwind-merge';
-
-import Grid from '~/components/modules/grid';
-import HeaderItem from '~/components/modules/maps/list/header-item';
-
-const ListHeader = ({
-	className,
-	fieldsShown,
-	fieldNames,
-	fieldIsSortable = true,
-	setSortSetting,
-	sortSetting
-}) => {
-	return (
-		<Grid
-			columns="hc-grid-flow-col hc-auto-cols-fr"
-			gap="hc-gap-0"
-			isAnimated={false}
-			className={twMerge`
-				hc-hidden md:hc-grid hc-bg-uiAccent/10 hc-border-b hc-border-uiAccent/10 hc-sticky hc-top-0 hc-z-10
-				${className ?? ""}
-			`}
-		>
-			{fieldsShown.map(field => (
-				<HeaderItem
-					key={field}
-					isSortable={fieldIsSortable}
-					sortSetting={sortSetting}
-					field={field}
-					setSortSetting={setSortSetting}
-				>
-					{fieldNames[field]}
-				</HeaderItem>
-			))}
-			<HeaderItem key={"favorite"}
-				isSortable={false}
-				field={"favorite"}
-			>
-				Favorite
-			</HeaderItem>
-
-		</Grid>
-	);
-};
-
-export default ListHeader;
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import Grid from '~/components/modules/grid';
+import HeaderItem from '~/components/modules/list/header-item';
+
+const ListHeader = ({
+	className,
+	fieldsShown,
+	fieldNames,
+	fieldIsSortable = true,
+	setSortSetting,
+	sortSetting,
+	includeFavorite = false
+}) => {
+	return (
+		<Grid
+			columns="hc-grid-flow-col hc-auto-cols-fr"
+			gap="hc-gap-0"
+			isAnimated={false}
+			className={twMerge`
+				hc-hidden md:hc-grid hc-bg-uiAccent/10 hc-border-b hc-border-uiAccent/10 hc-sticky hc-top-0 hc-z-10
+				${className ?? ""}
+			`}
+		>
+			{fieldsShown.map(field => (
+				<HeaderItem
+					key={field}
+					isSortable={fieldIsSortable}
+					sortSetting={sortSetting}
+					field={field}
+					setSortSetting={setSortSetting}
+				>
+					{fieldNames[field]}
+				</HeaderItem>
+			))}
+			{ includeFavorite == true &&
+			<HeaderItem key={"favorite"}
+				isSortable={false}
+				field={"favorite"}
+			>
+				Favorite
+			</HeaderItem>
+			}
+		</Grid>
+	);
+};
+
+export default ListHeader;

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;