@abcagency/hc-ui-components 1.3.13 → 1.3.15

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

@@ -1,91 +1,91 @@
-import React, { useState, useEffect } from 'react';
-
-import Button from '~/components/modules/buttons/default';
-
-const SORT_STATE = {
-	notSorted: "not-sorted",
-	sortedAsc: "sorted-asc",
-	sortedDesc: "sorted-desc"
-};
-
-const HeaderItem = ({
-	className,
-	children,
-	field,
-	setSortSetting,
-	sortSetting,
-	isSortable,
-	...rest
-}) => {
-	const [isSorted, setIsSorted] = useState(SORT_STATE.notSorted);
-
-	const handleChange = field => {
-		if (isSortable === false)
-			return;
-		let setting = {
-			field: field,
-			type: isSorted === SORT_STATE.sortedAsc ? "desc" : "asc"
-		};
-		setSortSetting(setting);
-		isSorted === SORT_STATE.notSorted
-			? setIsSorted(SORT_STATE.sortedAsc)
-			: isSorted === SORT_STATE.sortedAsc
-				? setIsSorted(SORT_STATE.sortedDesc)
-				: setIsSorted(SORT_STATE.sortedAsc);
-	};
-
-	useEffect(() => {
-		if (sortSetting?.field != null && sortSetting.field != field) {
-			setIsSorted(SORT_STATE.notSorted);
-		} else if (
-			sortSetting?.field != null &&
-			isSorted == SORT_STATE.notSorted &&
-			sortSetting.field == field
-		) {
-			setIsSorted(
-				sortSetting.type == "asc"
-					? SORT_STATE.sortedAsc
-					: SORT_STATE.sortedDesc
-			);
-		}
-	}, [sortSetting, isSorted, field]);
-
-	return (
-		<Button.Btn
-			onClick={() => handleChange(field)}
-			variant="none"
-			className={`
-				hc-p-2 hc-rounded-none hc-text-left hc-normal-case hover:hc-bg-uiAccent/5 focus:hc-bg-uiAccent/5
-				${field.toLowerCase() === "position" ? "hc-col-span-2" : "hc-col-span-1"}
-				${className ?? ""}
-			`}
-			{...rest}
-		>
-			<Button.Body>
-				<span className="hc-font-semibold">{children}</span>
-				{isSortable && (
-					<div className="hc-flex hc-flex-col hc-pr-2">
-						<Button.Icon
-							icon="bi:caret-up-fill"
-							size="hc-size-2.5"
-							className={`
-							hc-transition-opacity
-								${isSorted === "sorted-asc" ? "hc-opacity-100 hc-text-primary" : "hc-opacity-30"}
-							`}
-						/>
-						<Button.Icon
-							icon="bi:caret-down-fill"
-							size="hc-size-2.5"
-							className={`
-								transition-opacity
-								${isSorted === "sorted-desc" ? "hc-opacity-100" : "hc-opacity-30"}
-							`}
-						/>
-					</div>
-				)}
-			</Button.Body>
-		</Button.Btn>
-	);
-};
-
-export default HeaderItem;
+import React, { useState, useEffect } from 'react';
+
+import Button from '~/components/modules/buttons/default';
+
+const SORT_STATE = {
+	notSorted: "not-sorted",
+	sortedAsc: "sorted-asc",
+	sortedDesc: "sorted-desc"
+};
+
+const HeaderItem = ({
+	className,
+	children,
+	field,
+	setSortSetting,
+	sortSetting,
+	isSortable,
+	...rest
+}) => {
+	const [isSorted, setIsSorted] = useState(SORT_STATE.notSorted);
+
+	const handleChange = field => {
+		if (isSortable === false)
+			return;
+		let setting = {
+			field: field,
+			type: isSorted === SORT_STATE.sortedAsc ? "desc" : "asc"
+		};
+		setSortSetting(setting);
+		isSorted === SORT_STATE.notSorted
+			? setIsSorted(SORT_STATE.sortedAsc)
+			: isSorted === SORT_STATE.sortedAsc
+				? setIsSorted(SORT_STATE.sortedDesc)
+				: setIsSorted(SORT_STATE.sortedAsc);
+	};
+
+	useEffect(() => {
+		if (sortSetting?.field != null && sortSetting.field != field) {
+			setIsSorted(SORT_STATE.notSorted);
+		} else if (
+			sortSetting?.field != null &&
+			isSorted == SORT_STATE.notSorted &&
+			sortSetting.field == field
+		) {
+			setIsSorted(
+				sortSetting.type == "asc"
+					? SORT_STATE.sortedAsc
+					: SORT_STATE.sortedDesc
+			);
+		}
+	}, [sortSetting, isSorted, field]);
+
+	return (
+		<Button.Btn
+			onClick={() => handleChange(field)}
+			variant="none"
+			className={`
+				hc-p-2 hc-rounded-none hc-text-left hc-normal-case hover:hc-bg-uiAccent/5 focus:hc-bg-uiAccent/5
+				${field.toLowerCase() === "position" ? "hc-col-span-2" : "hc-col-span-1"}
+				${className ?? ""}
+			`}
+			{...rest}
+		>
+			<Button.Body>
+				<span className="hc-font-semibold">{children}</span>
+				{isSortable && (
+					<div className="hc-flex hc-flex-col hc-pr-2">
+						<Button.Icon
+							icon="bi:caret-up-fill"
+							size="hc-size-2.5"
+							className={`
+							hc-transition-opacity
+								${isSorted === "sorted-asc" ? "hc-opacity-100 hc-text-primary" : "hc-opacity-30"}
+							`}
+						/>
+						<Button.Icon
+							icon="bi:caret-down-fill"
+							size="hc-size-2.5"
+							className={`
+								transition-opacity
+								${isSorted === "sorted-desc" ? "hc-opacity-100" : "hc-opacity-30"}
+							`}
+						/>
+					</div>
+				)}
+			</Button.Body>
+		</Button.Btn>
+	);
+};
+
+export default HeaderItem;

package/src/components/modules/maps/list/header.js

@@ -1,47 +1,47 @@
-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/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;

package/src/components/modules/maps/list/index.js

@@ -13,23 +13,23 @@ import Loading from "~/util/loading";
 import { useMap } from '~/contexts/mapContext';
 import { useMapList } from '~/contexts/mapListContext';
 
+import { dynamicSort } from '~/util/sortUtil';
+
 const ItemsList = ({
 	fieldNames,
 	showMap,
 	fieldsShown,
 	specialFeatures
 }) => {
-
+	const { mapItems, filteredListings, loading, commuteLocation, sortSetting, setSortSetting } = useMapList();
 	const {
 		itemLimit,
-		sortSetting,
 		loader,
 		scrollContainerRef,
-		itemRefs,
-		setSortSetting
-	} = useListLogic();
+		itemRefs
+	} = useListLogic(filteredListings);
 	const { selectedListItem } = useMap();
-	const { mapItems, filteredListings, loading, commuteLocation } = useMapList();
+
 	const itemExpandedContent = (item, recruiters) =>
 		item ? <ListingDetails item={item} recruiters={recruiters} /> : null;
 	if (!fieldsShown.includes('travelTime') && commuteLocation != null && Object.entries(commuteLocation).length > 0) {
@@ -79,7 +79,7 @@ const ItemsList = ({
 					</div>
 				) : (
 					<Accordion className="hc-divide-y hc-divide-uiAccent/10 hc-z-[1000]" defaultValue={selectedListItem?.id}>
-						{filteredListings.slice(0, itemLimit).map(item => {
+						{(sortSetting ? dynamicSort(filteredListings, sortSetting.field, sortSetting.type) : filteredListings).slice(0, itemLimit).map(item => {
 							return (<MapAccordionItem
 								key={item.id}
 								showMap={showMap}

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

@@ -1,22 +1,22 @@
-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
+}) => {
+	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/maps/list/item-expand-card/recruiter-contact-nav.js

@@ -1,50 +1,50 @@
-import React from 'react';
-
-import Button from '~/components/modules/buttons/default';
-
-const RecruiterContactNav = ({
-	children,
-	className
-}) => {
-	return (
-		<nav
-			className={`
-			hc-inline-flex hc-items-center hc-justify-between hc-gap-2 hc-mt-2
-				${className ?? ''}
-			`}
-		>
-			{children}
-		</nav>
-	);
-};
-
-export const NavButton = ({
-	className,
-	href,
-	target = '_self',
-	title,
-	icon,
-	...props
-}) => {
-	return (
-		<Button.Anchor
-			href={href}
-			variant="icon"
-			size="sq"
-			target={target}
-			title={title}
-			className={className ?? ''}
-			{...props}
-		>
-			<span className="hc-sr-only">{title}</span>
-			<Button.Icon
-				icon={icon}
-				size="hc-size-8"
-			/>
-		</Button.Anchor>
-	);
-};
-
-RecruiterContactNav.Button = NavButton;
-
-export default RecruiterContactNav;
+import React from 'react';
+
+import Button from '~/components/modules/buttons/default';
+
+const RecruiterContactNav = ({
+	children,
+	className
+}) => {
+	return (
+		<nav
+			className={`
+			hc-inline-flex hc-items-center hc-justify-between hc-gap-2 hc-mt-2
+				${className ?? ''}
+			`}
+		>
+			{children}
+		</nav>
+	);
+};
+
+export const NavButton = ({
+	className,
+	href,
+	target = '_self',
+	title,
+	icon,
+	...props
+}) => {
+	return (
+		<Button.Anchor
+			href={href}
+			variant="icon"
+			size="sq"
+			target={target}
+			title={title}
+			className={className ?? ''}
+			{...props}
+		>
+			<span className="hc-sr-only">{title}</span>
+			<Button.Icon
+				icon={icon}
+				size="hc-size-8"
+			/>
+		</Button.Anchor>
+	);
+};
+
+RecruiterContactNav.Button = NavButton;
+
+export default RecruiterContactNav;

package/src/components/modules/maps/list/item-expand-card/recruiter-details.js

@@ -1,68 +1,68 @@
-import React from 'react';
-import { twMerge } from 'tailwind-merge';
-
-const RecruiterDetails = ({
-	contactNav,
-	className,
-	children
-}) => {
-	return (
-		<div
-			className={twMerge`
-				hc-grow
-				${className ?? ''}
-			`}
-		>
-			{children}
-
-			{contactNav &&
-				<div className="hc-inline-flex">
-					{contactNav}
-				</div>
-			}
-		</div>
-	);
-};
-
-export const Title = ({
-	as = 'h4',
-	className,
-	children
-}) => {
-	const Container = as;
-
-	return (
-		<Container
-			className={twMerge`
-				hc-text-base hc-font-medium
-				${className ?? ''}
-			`}
-		>
-			{children}
-		</Container>
-	);
-};
-
-export const Text = ({
-	as = 'p',
-	className,
-	children
-}) => {
-	const Container = as;
-
-	return (
-		<Container
-			className={twMerge`
-				hc-text-sm hc-text-uiText/60
-				${className ?? ''}
-			`}
-		>
-			{children}
-		</Container>
-	);
-};
-
-RecruiterDetails.Title = Title;
-RecruiterDetails.Text = Text;
-
-export default RecruiterDetails;
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+
+const RecruiterDetails = ({
+	contactNav,
+	className,
+	children
+}) => {
+	return (
+		<div
+			className={twMerge`
+				hc-grow
+				${className ?? ''}
+			`}
+		>
+			{children}
+
+			{contactNav &&
+				<div className="hc-inline-flex">
+					{contactNav}
+				</div>
+			}
+		</div>
+	);
+};
+
+export const Title = ({
+	as = 'h4',
+	className,
+	children
+}) => {
+	const Container = as;
+
+	return (
+		<Container
+			className={twMerge`
+				hc-text-base hc-font-medium
+				${className ?? ''}
+			`}
+		>
+			{children}
+		</Container>
+	);
+};
+
+export const Text = ({
+	as = 'p',
+	className,
+	children
+}) => {
+	const Container = as;
+
+	return (
+		<Container
+			className={twMerge`
+				hc-text-sm hc-text-uiText/60
+				${className ?? ''}
+			`}
+		>
+			{children}
+		</Container>
+	);
+};
+
+RecruiterDetails.Title = Title;
+RecruiterDetails.Text = Text;
+
+export default RecruiterDetails;

package/src/components/modules/maps/list/item-expand-card/recruiter-headshot.js

@@ -1,22 +1,22 @@
-import React from 'react';
-
-const RecruiterHeadshot = ({
-	image,
-	alt,
-	className,
-	imageClassName
-}) => {
-	return (
-		<div className={className ?? ''}>
-			<img
-				src={image}
-				width="96"
-				height="96"
-				alt={alt}
-				className={imageClassName ?? ''}
-			/>
-		</div>
-	);
-};
-
-export default RecruiterHeadshot;
+import React from 'react';
+
+const RecruiterHeadshot = ({
+	image,
+	alt,
+	className,
+	imageClassName
+}) => {
+	return (
+		<div className={className ?? ''}>
+			<img
+				src={image}
+				width="96"
+				height="96"
+				alt={alt}
+				className={imageClassName ?? ''}
+			/>
+		</div>
+	);
+};
+
+export default RecruiterHeadshot;