@abcagency/hc-ui-components 1.3.13 → 1.3.15

package/src/components/modules/dialogs/apply-dialog.js

@@ -1,48 +1,48 @@
-import React from 'react';
-import * as Dialog from '@radix-ui/react-dialog';
-
-import Button from '~/components/modules/buttons/default';
-import Icon from '~/components/modules/icon';
-
-const ApplyDialog = ({ children, applyUrl, internalApplyLink, companyName }) => (
-
-	<Dialog.Root >
-		<Dialog.Trigger asChild>
-			{children}
-		</Dialog.Trigger>
-		<Dialog.Portal>
-			<Dialog.Overlay className="hc-bg-black/50 hc-fixed hc-inset-0 hc-animate-overlayShow" />
-			<Dialog.Content className="hc-fit-content hc-animate-contentShow hc-fixed hc-inset-0 hc-m-auto hc-max-h-[85vh] hc-w-[90vw] hc-max-w-[450px] hc-rounded-[6px] hc-bg-white hc-p-[25px] hc-shadow-lg focus:hc-outline-none hc-flex hc-flex-col hc-items-center hc-text-center">
-				<Dialog.Title className="hc-text-[17px] hc-font-medium hc-w-full">
-					Career Opportunities
-				</Dialog.Title>
-				<Dialog.Description className="hc-mt-4 hc-mb-5 hc-text-[15px] hc-leading-normal hc-w-full">
-					Are you currently a {companyName} employee?
-				</Dialog.Description>
-				<div className="hc-flex hc-justify-center hc-space-x-4 hc-w-full">
-					<Dialog.Close asChild>
-						<Button.Anchor variant="outline" href={internalApplyLink}>
-							Yes
-						</Button.Anchor>
-					</Dialog.Close>
-					<Dialog.Close asChild>
-						<Button.Anchor variant="primary" href={applyUrl}>
-							No
-						</Button.Anchor>
-					</Dialog.Close>
-				</div>
-				<Dialog.Close asChild>
-					<Button.Anchor className="hc-absolute hc-top-[10px] hc-right-[10px] hc-inline-flex hc-h-[25px] hc-w-[25px] hc-items-center hc-justify-center hc-rounded-full focus:hc-outline-none"
-						variant="ghost" aria-label="Close">
-						<Icon
-							icon="mdi:times"
-							className="hc-cursor-pointer hc-text-black hover:hc-text-gray-500 hover:hc-opacity-75"
-						/>
-					</Button.Anchor>
-				</Dialog.Close>
-			</Dialog.Content>
-		</Dialog.Portal>
-	</Dialog.Root>
-);
-
-export default ApplyDialog;
+import React from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+
+import Button from '~/components/modules/buttons/default';
+import Icon from '~/components/modules/icon';
+
+const ApplyDialog = ({ children, applyUrl, internalApplyLink, companyName }) => (
+
+	<Dialog.Root >
+		<Dialog.Trigger asChild>
+			{children}
+		</Dialog.Trigger>
+		<Dialog.Portal>
+			<Dialog.Overlay className="hc-bg-black/50 hc-fixed hc-inset-0 hc-animate-overlayShow" />
+			<Dialog.Content className="hc-fit-content hc-animate-contentShow hc-fixed hc-inset-0 hc-m-auto hc-max-h-[85vh] hc-w-[90vw] hc-max-w-[450px] hc-rounded-[6px] hc-bg-white hc-p-[25px] hc-shadow-lg focus:hc-outline-none hc-flex hc-flex-col hc-items-center hc-text-center">
+				<Dialog.Title className="hc-text-[17px] hc-font-medium hc-w-full">
+					Career Opportunities
+				</Dialog.Title>
+				<Dialog.Description className="hc-mt-4 hc-mb-5 hc-text-[15px] hc-leading-normal hc-w-full">
+					Are you currently a {companyName} employee?
+				</Dialog.Description>
+				<div className="hc-flex hc-justify-center hc-space-x-4 hc-w-full">
+					<Dialog.Close asChild>
+						<Button.Anchor variant="outline" href={internalApplyLink}>
+							Yes
+						</Button.Anchor>
+					</Dialog.Close>
+					<Dialog.Close asChild>
+						<Button.Anchor variant="primary" href={applyUrl}>
+							No
+						</Button.Anchor>
+					</Dialog.Close>
+				</div>
+				<Dialog.Close asChild>
+					<Button.Anchor className="hc-absolute hc-top-[10px] hc-right-[10px] hc-inline-flex hc-h-[25px] hc-w-[25px] hc-items-center hc-justify-center hc-rounded-full focus:hc-outline-none"
+						variant="ghost" aria-label="Close">
+						<Icon
+							icon="mdi:times"
+							className="hc-cursor-pointer hc-text-black hover:hc-text-gray-500 hover:hc-opacity-75"
+						/>
+					</Button.Anchor>
+				</Dialog.Close>
+			</Dialog.Content>
+		</Dialog.Portal>
+	</Dialog.Root>
+);
+
+export default ApplyDialog;

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

@@ -1,149 +1,149 @@
-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 { 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));
-
-	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]);
-			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 => {
-				setCommuteLocation({
-					lat: position.coords.latitude,
-					lng: position.coords.longitude
-				});
-				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, 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 { 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));
+
+	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]);
+			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 => {
+				setCommuteLocation({
+					lat: position.coords.latitude,
+					lng: position.coords.longitude
+				});
+				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;

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

@@ -16,6 +16,11 @@ const FilterItem = ({
 	var isActive =
 		selectedFilters != undefined && !!selectedFilters[field]?.[itemKey];
 
+	useEffect(() => {
+		if(!selectedFilters)
+			return;
+		 setActiveItem(!!selectedFilters[field]?.[itemKey]);
+	},[selectedFilters, field, itemKey]);
 	const changeHandler = () => {
 		setSelectedFilters(prevFilters => {
 			const updatedFilters = { ...prevFilters };

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import Accordion from '~/components/modules/accordions/default';
 import FilterCommute from '~/components/modules/filter/commute';
@@ -30,12 +30,14 @@ const FilterLocation = ({
 	// 		return updatedFilters;
 	// 	});
 	// };
-
+	useEffect(() => {
+		console.log(selectedFilters);
+	},[selectedFilters]);
 	var locations = filterOptions?.locations;
 	var pointsOfInterest = filterOptions?.pointsOfInterest;
 	return (
 		<FilterCard className={className ?? ""}>
-			<FilterCard.Title icon="fluent:hc-location-16-filled">
+			<FilterCard.Title icon="fluent:location-16-filled">
 				<span>
 					<span className="hc-hidden lg:hc-inline">Job</span> location
 				</span>

package/src/components/modules/filter/points-of-interest.js

@@ -1,44 +1,44 @@
-import React from 'react';
-
-import Accordion from '~/components/modules/accordions/default';
-import RadioItem from '~/components/modules/filter/radio-item';
-
-const FilterPointsOfInterest = ({
-	title = "Points of interest",
-	pointsOfInterest,
-	setDefaultValue,
-	className,
-	defaultValue
-}) => {
-	return (
-		<div
-			className={`
-				hc-relative
-				${className ?? ""}
-			`}
-		>
-			<Accordion defaultValue={defaultValue} className="hc-space-y-4">
-				<Accordion.Item id="points-of-interest">
-					<Accordion.Trigger.HasHeader
-						onClick={() => setDefaultValue("points-of-interest")}
-						className="hc-stretched-link hc-text-left"
-						iconClassName="hc-order-last"
-						headerClassName="hc-relative hc-py-2 hc-rounded hc-border hc-border-uiAccent/20 hc-bg-white hc-text-sm hc-transition data-[state=open]:hc-border-b-transparent data-[state=open]:hc-rounded-b-none"
-					>
-						{title}
-					</Accordion.Trigger.HasHeader>
-					<Accordion.Content bodyClassName="hc-px-2 hc-py-1 hc-bg-white hc-rounded-b hc-border hc-border-uiAccent/20 hc-border-t-0 hc-max-h-[20vh] md:hc-max-h-[25vh] ohc-verflow-auto">
-						{pointsOfInterest.items.map((item, index) => {
-							return <RadioItem
-								key={item.key + index}
-								item={item}
-								field={item.id} />;
-						})}
-					</Accordion.Content>
-				</Accordion.Item>
-			</Accordion>
-		</div>
-	);
-};
-
-export default FilterPointsOfInterest;
+import React from 'react';
+
+import Accordion from '~/components/modules/accordions/default';
+import RadioItem from '~/components/modules/filter/radio-item';
+
+const FilterPointsOfInterest = ({
+	title = "Points of interest",
+	pointsOfInterest,
+	setDefaultValue,
+	className,
+	defaultValue
+}) => {
+	return (
+		<div
+			className={`
+				hc-relative
+				${className ?? ""}
+			`}
+		>
+			<Accordion defaultValue={defaultValue} className="hc-space-y-4">
+				<Accordion.Item id="points-of-interest">
+					<Accordion.Trigger.HasHeader
+						onClick={() => setDefaultValue("points-of-interest")}
+						className="hc-stretched-link hc-text-left"
+						iconClassName="hc-order-last"
+						headerClassName="hc-relative hc-py-2 hc-rounded hc-border hc-border-uiAccent/20 hc-bg-white hc-text-sm hc-transition data-[state=open]:hc-border-b-transparent data-[state=open]:hc-rounded-b-none"
+					>
+						{title}
+					</Accordion.Trigger.HasHeader>
+					<Accordion.Content bodyClassName="hc-px-2 hc-py-1 hc-bg-white hc-rounded-b hc-border hc-border-uiAccent/20 hc-border-t-0 hc-max-h-[20vh] md:hc-max-h-[25vh] ohc-verflow-auto">
+						{pointsOfInterest.items.map((item, index) => {
+							return <RadioItem
+								key={item.key + index}
+								item={item}
+								field={item.id} />;
+						})}
+					</Accordion.Content>
+				</Accordion.Item>
+			</Accordion>
+		</div>
+	);
+};
+
+export default FilterPointsOfInterest;

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

@@ -1,53 +1,53 @@
-import React from 'react';
-
-import Icon from '~/components/modules/icon';
-
-import { useMap } from "~/contexts/mapContext";
-
-const RadioItem = ({
-	className,
-	item,
-	field,
-	...rest
-}) => {
-	const { selectedPlaces, setSelectedPlaces } = useMap();
-	const chosenPlace = item.key.toLowerCase();
-	let isActive = selectedPlaces.includes(chosenPlace);
-
-	const changeHandler = () => {
-		setSelectedPlaces([isActive ? '' : chosenPlace]);
-	};
-
-	return (
-		<label key={item.key}
-			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
-				${item.count === 0 ? 'hc-text-uiDisabled hc-cursor-not-allowed' : 'hover:hc-bg-uiAccent/5'}
-				${className ?? ""}
-			`}
-			{...rest}
-		>
-			<input
-				key={item.key}
-				id={item.Key}
-				name={field}
-				value={item.key}
-				type={"radio"}
-				className={`hc-size-4 hc-mt-px hc-text-primary hc-border-uiAccent/30 hc-transition-colors hc-rounded-full`}
-				checked={isActive}
-				onClick={() => {
-					changeHandler();
-				}}
-				onChange={() => { }}
-			/>
-			<span className="hc-font-medium">{item.key}</span>
-			{isActive &&
-				<div className="hc-w-full hc-unselect-div">
-					<Icon className="hc-float-right" icon="mdi:times"></Icon>
-				</div>
-			}
-		</label>
-	);
-};
-
-export default RadioItem;
+import React from 'react';
+
+import Icon from '~/components/modules/icon';
+
+import { useMap } from "~/contexts/mapContext";
+
+const RadioItem = ({
+	className,
+	item,
+	field,
+	...rest
+}) => {
+	const { selectedPlaces, setSelectedPlaces } = useMap();
+	const chosenPlace = item.key.toLowerCase();
+	let isActive = selectedPlaces.includes(chosenPlace);
+
+	const changeHandler = () => {
+		setSelectedPlaces([isActive ? '' : chosenPlace]);
+	};
+
+	return (
+		<label key={item.key}
+			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
+				${item.count === 0 ? 'hc-text-uiDisabled hc-cursor-not-allowed' : 'hover:hc-bg-uiAccent/5'}
+				${className ?? ""}
+			`}
+			{...rest}
+		>
+			<input
+				key={item.key}
+				id={item.Key}
+				name={field}
+				value={item.key}
+				type={"radio"}
+				className={`hc-size-4 hc-mt-px hc-text-primary hc-border-uiAccent/30 hc-transition-colors hc-rounded-full`}
+				checked={isActive}
+				onClick={() => {
+					changeHandler();
+				}}
+				onChange={() => { }}
+			/>
+			<span className="hc-font-medium">{item.key}</span>
+			{isActive &&
+				<div className="hc-w-full hc-unselect-div">
+					<Icon className="hc-float-right" icon="mdi:times"></Icon>
+				</div>
+			}
+		</label>
+	);
+};
+
+export default RadioItem;