@abcagency/hc-ui-components 1.3.19 → 1.3.21

package/src/components/modules/filter/commute.js

@@ -1,154 +1,108 @@
-import React, { Fragment, useRef, useState, useEffect } from 'react';
-import { Combobox, Transition } from '@headlessui/react';
-import usePlacesAutocomplete, { getGeocode, getLatLng } from 'use-places-autocomplete';
-
-import Button from '~/components/modules/buttons/default';
-import Icon from "~/components/modules/icon";
-
-import { useMapList } from '~/contexts/mapListContext';
-import { useTrackEvent } from '~/contexts/trackEventContext';
-import { getStorageItem } from '~/util/localStorageUtil';
-
-const FilterCommute = ({ className }) => {
-	const {
-		ready,
-		suggestions: { status, data },
-		setValue,
-		clearSuggestions
-	} = usePlacesAutocomplete();
-
-	const [selected, setSelected] = useState(getStorageItem('selectedCommute', ''));
-	const inputRef = useRef(null);
-	const { setCommuteLocation, commuteLocation } = useMapList();
-	const [isCurrentLocation, setIsCurrentLocation] = useState(getStorageItem('isCurrentLocation', false));
-	const { trackEvent, eventTypes } = useTrackEvent();
-
-	useEffect(() => {
-		if (commuteLocation !== null && commuteLocation != '') return;
-		setIsCurrentLocation(false);
-		localStorage.removeItem('isCurrentLocation');
-		localStorage.removeItem('selectedCommute');
-		setSelected("");
-	}, [commuteLocation]);
-
-	const handleSelect = async (val, isCurrLocation = false) => {
-		setValue(val, false);
-		setSelected(val);
-		localStorage.setItem('selectedCommute', val);
-		clearSuggestions();
-		if (isCurrLocation) return;
-		try {
-			const results = await getGeocode({ address: val });
-			const { lat, lng } = await getLatLng(results[0]);
-			trackEvent(eventTypes.COMMUTE_ORIGIN_ADDED, { commuteLocation: { lat, lng }, isCurrentLocation: false });
-			setCommuteLocation({ lat, lng });
-		} catch (error) {
-			// no-op
-		}
-	};
-
-	const fetchLocation = () => {
-		if (!navigator.geolocation) {
-			console.error("Geolocation is not supported by this browser.");
-			return;
-		}
-		navigator.geolocation.getCurrentPosition(
-			position => {
-				const location = {
-					lat: position.coords.latitude,
-					lng: position.coords.longitude
-				};
-				setCommuteLocation(location);
-				trackEvent(eventTypes.COMMUTE_ORIGIN_ADDED, { commuteLocation: location, isCurrentLocation: true });
-				handleSelect("Current Location");
-			},
-			error => {
-				console.error("Error fetching location", error);
-			}
-		);
-	};
-
-	return (
-		<div className={`relative ${className ?? ""}`}>
-			<label
-				htmlFor="commute"
-				className="hc-flex hc-items-center hc-gap-2 hc-mb-2 hc-text-xs hc-uppercase hc-font-bold hc-text-uiText"
-			>
-				<Icon
-					icon="ri:pin-distance-fill"
-					size="hc-size-5"
-					className="hc-text-uiAccent/30"
-				/>
-				<span>
-					<span className="md:hc-hidden lg:hc-inline">Calculate your</span> commute
-				</span>
-			</label>
-
-			<Combobox value={selected} onChange={handleSelect}>
-				<div className="hc-relative hc-mt-1">
-					<div className="hc-relative hc-flex hc-items-center hc-w-full hc-pr-2 hc-cursor-default hc-overflow-hidden hc-rounded hc-bg-white hc-text-left hc-border hc-border-uiAccent/20 focus-within:hc-ring-1 focus-within:hc-ring-uiAccent focus:hc-outline-none">
-						<Combobox.Input
-							className="hc-w-full hc-border-none hc-py-2 hc-pl-4 hc-pr-1 hc-text-sm hc-leading-5 hc-text-gray-900 focus:hc-ring-0 placeholder:hc-text-gray-400"
-							onChange={e => {
-								setValue(e.target.value);
-								setSelected(e.target.value);
-							}}
-							value={selected}
-							disabled={!ready}
-							placeholder="Starting point"
-							ref={inputRef}
-						/>
-						<Button.Btn
-							variant="icon"
-							size="sqsm"
-							onClick={() => {
-								setIsCurrentLocation(!isCurrentLocation);
-								localStorage.setItem('isCurrentLocation', !isCurrentLocation);
-								if (isCurrentLocation || commuteLocation) {
-									setCommuteLocation("");
-									setSelected("");
-								} else if (!commuteLocation) { fetchLocation(); }
-							}}
-
-							className=""
-						>
-							<span className="hc-sr-only">Use your location</span>
-							{commuteLocation ? <Icon icon="mdi:times"></Icon> : <Button.Icon className={isCurrentLocation ? 'hc-text-blue-500' : 'hc-text-current'} icon="mdi:hc-my-location" />}
-						</Button.Btn>
-					</div>
-					<Transition
-						as={Fragment}
-						leave="hc-transition hc-ease-in hc-duration-100"
-						leaveFrom="hc-opacity-100"
-						leaveTo="hc-opacity-0"
-						afterLeave={clearSuggestions}
-					>
-						<Combobox.Options className="hc-absolute hc-z-20 hc-mt-1 hc-max-h-60 hc-w-full hc-overflow-auto hc-rounded hc-bg-white hc-py-1 hc-text-base hc-shadow hc-ring-1 hc-ring-uiAccent/10 focus:hc-outline-none sm:hc-text-sm">
-							{status === "OK" &&
-								data.map(data => (
-									<Combobox.Option
-										key={data.place_id}
-										value={data.description}
-										className={({ active }) =>
-											`hc-relative hc-cursor-default hc-select-none hc-px-4 hc-py-2 ${active ? "hc-bg-primary hc-text-white" : "hc-text-uiText"
-											}`
-										}
-									>
-										{({ selected }) => (
-											<span
-												className={`hc-block hc-truncate ${selected ? "hc-font-bold" : "hc-font-medium"}`}
-											>
-												{data.description}
-											</span>
-										)}
-									</Combobox.Option>
-								))}
-						</Combobox.Options>
-					</Transition>
-				</div>
-			</Combobox>
-		</div>
-	);
-};
-
-export default FilterCommute;
+import React, { Fragment } from 'react';
+import { Combobox, Transition } from '@headlessui/react';
+
+import Button from '~/components/modules/buttons/default';
+import Icon from "~/components/modules/icon";
+
+const FilterCommute = ({
+	className,
+	ready,
+	status,
+	data,
+	selected,
+	isCurrentLocation,
+	inputRef,
+	handleSelect,
+	setValue,
+	setSelected,
+	clearSuggestions,
+	commuteLocation,
+	setIsCurrentLocation,
+	fetchLocation,
+	setCommuteLocation
+}) => {
+	return (
+		<div className={`relative ${className ?? ""}`}>
+			<label
+				htmlFor="commute"
+				className="hc-flex hc-items-center hc-gap-2 hc-mb-2 hc-text-xs hc-uppercase hc-font-bold hc-text-uiText"
+			>
+				<Icon
+					icon="ri:pin-distance-fill"
+					size="hc-size-5"
+					className="hc-text-uiAccent/30"
+				/>
+				<span>
+					<span className="md:hc-hidden lg:hc-inline">Calculate your</span> commute
+				</span>
+			</label>
+
+			<Combobox value={selected} onChange={handleSelect}>
+				<div className="hc-relative hc-mt-1">
+					<div className="hc-relative hc-flex hc-items-center hc-w-full hc-pr-2 hc-cursor-default hc-overflow-hidden hc-rounded hc-bg-white hc-text-left hc-border hc-border-uiAccent/20 focus-within:hc-ring-1 focus-within:hc-ring-uiAccent focus:hc-outline-none">
+						<Combobox.Input
+							className="hc-w-full hc-border-none hc-py-2 hc-pl-4 hc-pr-1 hc-text-sm hc-leading-5 hc-text-gray-900 focus:hc-ring-0 placeholder:hc-text-gray-400"
+							onChange={e => {
+								setCommuteLocation("");
+								setValue(e.target.value);
+								setSelected(e.target.value);
+							}}
+							value={selected}
+							disabled={!ready}
+							placeholder="Starting point"
+							ref={inputRef}
+						/>
+						<Button.Btn
+							variant="icon"
+							size="sqsm"
+							onClick={() => {
+								setIsCurrentLocation(!isCurrentLocation);
+								localStorage.setItem('isCurrentLocation', !isCurrentLocation);
+								if (isCurrentLocation || commuteLocation) {
+									setCommuteLocation("");
+									setSelected("");
+								} else if (!commuteLocation) { fetchLocation(); }
+							}}
+
+							className=""
+						>
+							<span className="hc-sr-only">Use your location</span>
+							{commuteLocation ? <Icon icon="mdi:times"></Icon> : <Button.Icon className={isCurrentLocation ? 'hc-text-blue-500' : 'hc-text-current'} icon="mdi:my-location" />}
+						</Button.Btn>
+					</div>
+					<Transition
+						as={Fragment}
+						leave="hc-transition hc-ease-in hc-duration-100"
+						leaveFrom="hc-opacity-100"
+						leaveTo="hc-opacity-0"
+						afterLeave={clearSuggestions}
+					>
+						<Combobox.Options className="hc-absolute hc-z-20 hc-mt-1 hc-max-h-60 hc-w-full hc-overflow-auto hc-rounded hc-bg-white hc-py-1 hc-text-base hc-shadow hc-ring-1 hc-ring-uiAccent/10 focus:hc-outline-none sm:hc-text-sm">
+							{status === "OK" &&
+								data.map(data => (
+									<Combobox.Option
+										key={data.place_id}
+										value={data.description}
+										className={({ active }) =>
+											`hc-relative hc-cursor-default hc-select-none hc-px-4 hc-py-2 ${active ? "hc-bg-primary hc-text-white" : "hc-text-uiText"
+											}`
+										}
+									>
+										{({ selected }) => (
+											<span
+												className={`hc-block hc-truncate ${selected ? "hc-font-bold" : "hc-font-medium"}`}
+											>
+												{data.description}
+											</span>
+										)}
+									</Combobox.Option>
+								))}
+						</Combobox.Options>
+					</Transition>
+				</div>
+			</Combobox>
+		</div>
+	);
+};
+
+export default FilterCommute;

package/src/components/modules/filter/index.js

@@ -1,85 +1,51 @@
-import React, { useState } from 'react';
-
-import FilterSearch from '~/components/modules/filter/search';
-import FiltersAccordion from '~/components/modules/accordions/filters';
-import FilterLocations from '~/components/modules/filter/location';
+import React from 'react';
 import Button from '~/components/modules/buttons/default';
 
-import { useMap } from '~/contexts/mapContext';
-import { useMapList } from '~/contexts/mapListContext';
-import { useTrackEvent } from '~/contexts/trackEventContext';
-
 const Filter = ({
 	className,
-	showMap
+	hasActiveFilters,
+	filteredListings,
+	selectedFilters,
+	setMobileTab,
+	handleReset,
+	children
 }) => {
-	const { trackEvent, eventTypes } = useTrackEvent();
-	const [hasActiveFilters, setHasActiveFilters] = useState(false);
-	const [defaultValue, setDefaultValue] = useState(null);
-	const { setSelectedListItem, setLocation, filterReset } = useMap();
-	const {
-		filteredListings,
-		selectedFilters,
-		setSelectedFilters,
-		setMobileTab,
-		handleSettingFavorites,
-		setQuery,
-		siteConfig
-	} = useMapList();
-
 	return (
 		<div
 			className={`
-			hc-relative hc-max-h-[95vh] md:hc-max-h-screen hc-overflow-y-auto hc-overflow-x-auto
-				${className ?? ""}
-			`}
+        hc-relative hc-max-h-[95vh] md:hc-max-h-screen hc-overflow-y-auto hc-overflow-x-auto
+        ${className ?? ""}
+      `}
 		>
 			<div className="hc-px-4 md:hc-pt-4 hc-space-y-4">
-				<FiltersAccordion
-					setHasActiveFilters={setHasActiveFilters}
-					defaultValue={defaultValue}
-					setDefaultValue={value => { setDefaultValue(value == defaultValue ? "" : value); }}
-					setLocation={setLocation}
-					setSelectedListItem={setSelectedListItem}
-				/>
-				<FilterSearch />
-				{siteConfig.hideLocations !== true &&
-					<FilterLocations
-						setHasActiveFilters={setHasActiveFilters}
-						defaultValue={defaultValue}
-						showMap={showMap}
-						setDefaultValue={value => { setDefaultValue(value == defaultValue ? "" : value); }}
-						setLocation={setLocation}
-						setSelectedListItem={setSelectedListItem}
-					/>
-				}
+				{children}
 			</div>
 			<div className="hc-sticky hc-bottom-0 hc-inset-x-0 hc-flex hc-items-center hc-justify-between hc-gap-2 hc-py-2 hc-px-4 hc-mt-2 hc-bg-white md:hc-bg-gray-100">
 				<Button.Btn
-					onClick={() => {trackEvent(eventTypes.FILTERS_RESET, { filtersRemoved: selectedFilters }); filterReset(); setSelectedFilters({}); setQuery(null); handleSettingFavorites(null); }}
+					onClick={handleReset}
 					variant="outline"
 					size="sm"
 				>
-					Reset
+          Reset
 				</Button.Btn>
 				{selectedFilters && Object.keys(selectedFilters).length > 0 &&
-					<Button.Btn
-						onClick={() => setMobileTab("listTab")}
-						variant="primary"
-						size="sm"
-						className={`
-						md:hc-hidden
-						${hasActiveFilters ? "hc-opacity-0 hc-pointer-events-none" : "hc-opacity-100"}
-					`}
-					>
-						<Button.Body>
-							<Button.Icon
-								icon="fluent:search-12-filled"
-								size="hc-size-3.5"
-							/>
-							Show {filteredListings.length} Jobs
-						</Button.Body>
-					</Button.Btn>
+          <Button.Btn
+          	onClick={() => setMobileTab("listTab")}
+          	variant="primary"
+          	size="sm"
+          	className={`
+              md:hc-hidden
+              ${hasActiveFilters ? "hc-opacity-0 hc-pointer-events-none" : "hc-opacity-100"}
+            `}
+          >
+          	<Button.Body>
+          		<Button.Icon
+          			icon="fluent:search-12-filled"
+          			size="hc-size-3.5"
+          		/>
+              Show {filteredListings.length} Jobs
+          	</Button.Body>
+          </Button.Btn>
 				}
 			</div>
 		</div>

package/src/components/modules/filter/item.js

@@ -1,87 +1,48 @@
-import React, { useState, useEffect } from 'react';
-
-import { useTrackEvent } from '~/contexts/trackEventContext';
-
-const FilterItem = ({
-	className,
-	item,
-	type = 'checkbox',
-	itemKey = null,
-	hasCount = true,
-	field,
-	selectedFilters,
-	setSelectedFilters,
-	...rest
-}) => {
-	const { trackEvent, eventTypes } = useTrackEvent();
-	const itemName = item.name ? item.name : item;
-	itemKey = itemKey === null ? itemName : itemKey;
-	var isActive =
-		selectedFilters != undefined && !!selectedFilters[field]?.[itemKey];
-
-	useEffect(() => {
-		if(!selectedFilters)
-			return;
-		 setActiveItem(!!selectedFilters[field]?.[itemKey]);
-	},[selectedFilters, field, itemKey]);
-	const changeHandler = () => {
-		if (!isActive) {
-			trackEvent(eventTypes.FILTER_APPLIED, { filterType:  field, filterChecked: itemKey });
-		}
-		setSelectedFilters(prevFilters => {
-			const updatedFilters = { ...prevFilters };
-			if (!isActive) {
-				if (!updatedFilters[field]) {
-					updatedFilters[field] = {};
-				}
-				updatedFilters[field][itemKey] = true;
-				return updatedFilters;
-			}
-			delete updatedFilters[field][itemKey];
-			if (Object.keys(updatedFilters[field]).length === 0) {
-				delete updatedFilters[field];
-			}
-			return updatedFilters;
-		});
-	};
-	const [activeItem, setActiveItem] = useState(isActive);
-
-	useEffect(() => {
-		if (selectedFilters && selectedFilters[field] && Object.keys(selectedFilters[field])?.length > 0) return;
-		else if (activeItem === true) {
-			setActiveItem(false);
-		}
-	}, [selectedFilters]);
-
-	return (
-		<label
-			className={`
-				hc-flex hc-items-start hc-gap-2 hc-px-2 hc-py-1.5 hc-rounded-sm hc-text-sm hc-cursor-pointer hc-transition hover:hc-bg-uiAccent/5
-				${className ?? ""}
-			`}
-			{...rest}
-		>
-			<input
-				id={itemKey}
-				name={field}
-				disabled={item.count == 0}
-				value={itemName}
-				type={type}
-				className={`hc-size-4 hc-mt-px hc-text-primary hc-border-uiAccent/30 hc-transition-colors hc-rounded-sm`}
-				checked={activeItem}
-				onChange={() => {
-					setActiveItem(!activeItem);
-					changeHandler();
-				}}
-			/>
-			<span className="font-medium">{itemName}</span>
-			{hasCount && (
-				<span className="hc-inline-block hc-mt-1 hc-ml-auto hc-text-xs hc-leading-none hc-text-primary">
-					({item.count})
-				</span>
-			)}
-		</label>
-	);
-};
-
-export default FilterItem;
+import React from 'react';
+
+const FilterItem = ({
+	className,
+	item,
+	type,
+	itemKey,
+	hasCount,
+	field,
+	activeItem,
+	setActiveItem,
+	changeHandler,
+	...rest
+}) => {
+	const itemName = item.name ? item.name : item;
+
+	return (
+		<label
+			className={`
+        hc-flex hc-items-start hc-gap-2 hc-px-2 hc-py-1.5 hc-rounded-sm hc-text-sm hc-cursor-pointer hc-transition hover:hc-bg-uiAccent/5
+        ${className ?? ""}
+      `}
+			{...rest}
+		>
+			<input
+				id={itemKey}
+				name={field}
+				disabled={item.count === 0}
+				value={itemName}
+				type={type}
+				className="hc-size-4 hc-mt-px hc-text-primary hc-border-uiAccent/30 hc-transition-colors hc-rounded-sm"
+				checked={activeItem}
+				onChange={() => {
+					setActiveItem(!activeItem);
+					changeHandler();
+				}}
+			/>
+			<span className="font-medium">{itemName}</span>
+			{hasCount && (
+				<span className="hc-inline-block hc-mt-1 hc-ml-auto hc-text-xs hc-leading-none hc-text-primary">
+          ({item.count})
+				</span>
+			)}
+		</label>
+	);
+};
+
+export default FilterItem;

package/src/components/modules/filter/location.js

@@ -1,71 +1,48 @@
-import React, { useEffect } from 'react';
-
-import Accordion from '~/components/modules/accordions/default';
-import FilterCommute from '~/components/modules/filter/commute';
-import FilterPointsOfInterest from '~/components/modules/filter/points-of-interest';
-import FilterCard from '~/components/modules/cards/filter';
-import AccordionFilterItem from '~/components/modules/accordions/filterItem';
-
-import Loading from '~/util/loading';
-
-import { useMapList } from '~/contexts/mapListContext';
-
-const FilterLocation = ({
-	className,
-	defaultValue,
-	setDefaultValue,
-	showMap = false,
-	setLocation,
-	setSelectedListItem
-}) => {
-	const { setSelectedFilters, selectedFilters, filterOptions } = useMapList();
-	// const activeItemsCount = selectedFilters != null && selectedFilters["cityState"]
-	// 	? Object.keys(selectedFilters["cityState"]).length
-	// 	: 0;
-
-	// const handleClearFilters = () => {
-	// 	setSelectedFilters(prevFilters => {
-	// 		const updatedFilters = { ...prevFilters };
-	// 		delete updatedFilters["cityState"];
-	// 		return updatedFilters;
-	// 	});
-	// };
-
-	var locations = filterOptions?.locations;
-	var pointsOfInterest = filterOptions?.pointsOfInterest;
-	return (
-		<FilterCard className={className ?? ""}>
-			<FilterCard.Title icon="fluent:location-16-filled">
-				<span>
-					<span className="hc-hidden lg:hc-inline">Job</span> location
-				</span>
-			</FilterCard.Title>
-			{!locations && (
-				<Loading />
-			)}
-			{locations && <Accordion defaultValue={defaultValue} className="hc-space-y-4">
-				{locations?.map(filter => (
-					<AccordionFilterItem
-						key={filter.id}
-						filter={filter}
-						setDefaultValue={setDefaultValue}
-						selectedFilters={selectedFilters}
-						setSelectedFilters={prevFilters => { setSelectedFilters(prevFilters); setLocation(null); setSelectedListItem(null); }}
-					/>
-				))}
-				{showMap && <FilterCommute className="hc-mt-6" />}
-				{showMap && (
-					<FilterPointsOfInterest
-						className="hc-mt-4"
-						pointsOfInterest={pointsOfInterest}
-						setDefaultValue={setDefaultValue}
-						defaultValue={defaultValue}
-					/>
-				)}
-			</Accordion>
-			}
-		</FilterCard>
-	);
-};
-
-export default FilterLocation;
+import React from 'react';
+import Accordion from '~/components/modules/accordions/default';
+import FilterCard from '~/components/modules/cards/filter';
+import AccordionFilterItem from '~/components/containers/accordions/filter-item-container';
+import Loading from '~/util/loading';
+
+const FilterLocation = ({
+	className,
+	defaultValue,
+	setDefaultValue,
+	setLocation,
+	setSelectedListItem,
+	locations,
+	setSelectedFilters,
+	selectedFilters,
+	children
+}) => {
+	return (
+		<FilterCard className={className ?? ""}>
+			<FilterCard.Title icon="fluent:location-16-filled">
+				<span>
+					<span className="hc-hidden lg:hc-inline">Job</span> location
+				</span>
+			</FilterCard.Title>
+			{!locations && <Loading />}
+			{locations && (
+				<Accordion defaultValue={defaultValue} className="hc-space-y-4">
+					{locations?.map(filter => (
+						<AccordionFilterItem
+							key={filter.id}
+							filter={filter}
+							setDefaultValue={setDefaultValue}
+							selectedFilters={selectedFilters}
+							setSelectedFilters={prevFilters => {
+								setSelectedFilters(prevFilters);
+								setLocation(null);
+								setSelectedListItem(null);
+							}}
+						/>
+					))}
+					{children}
+				</Accordion>
+			)}
+		</FilterCard>
+	);
+};
+
+export default FilterLocation;