@abcagency/hc-ui-components 1.3.14 → 1.3.16

package/src/components/modules/maps/place-marker.js

@@ -1,41 +1,41 @@
-import React from 'react';
-import { Marker, InfoWindowF } from '@react-google-maps/api';
-
-const PlaceMarker = ({
-	marker,
-	index,
-	selectedPlaceMarker,
-	setSelectedPlaceMarker,
-	placesWindow,
-	setPlacesWindow
-}) => {
-	const markerKey = `marker-${marker.title}-${index}`;
-
-	const placeMarkerClickHandler = () => {
-		setSelectedPlaceMarker(markerKey);
-		setPlacesWindow(true);
-	};
-
-	return (
-		<Marker
-			key={markerKey}
-			position={marker.position}
-			title={marker.title}
-			icon={marker.icon}
-			options={{ optimized: false }}
-			onClick={placeMarkerClickHandler}
-		>
-			{selectedPlaceMarker === markerKey && placesWindow && marker && (
-				<InfoWindowF
-					position={marker.position}
-					onCloseClick={() => setPlacesWindow(false)}
-					options={{ maxWidth: 400 }}
-				>
-					<div>{marker.title}</div>
-				</InfoWindowF>
-			)}
-		</Marker>
-	);
-};
-
-export default PlaceMarker;
+import React from 'react';
+import { Marker, InfoWindowF } from '@react-google-maps/api';
+
+const PlaceMarker = ({
+	marker,
+	index,
+	selectedPlaceMarker,
+	setSelectedPlaceMarker,
+	placesWindow,
+	setPlacesWindow
+}) => {
+	const markerKey = `marker-${marker.title}-${index}`;
+
+	const placeMarkerClickHandler = () => {
+		setSelectedPlaceMarker(markerKey);
+		setPlacesWindow(true);
+	};
+
+	return (
+		<Marker
+			key={markerKey}
+			position={marker.position}
+			title={marker.title}
+			icon={marker.icon}
+			options={{ optimized: false }}
+			onClick={placeMarkerClickHandler}
+		>
+			{selectedPlaceMarker === markerKey && placesWindow && marker && (
+				<InfoWindowF
+					position={marker.position}
+					onCloseClick={() => setPlacesWindow(false)}
+					options={{ maxWidth: 400 }}
+				>
+					<div>{marker.title}</div>
+				</InfoWindowF>
+			)}
+		</Marker>
+	);
+};
+
+export default PlaceMarker;

package/src/components/modules/maps/tabs.js

@@ -1,81 +1,81 @@
-import React from 'react';
-import * as Tabs from '@radix-ui/react-tabs';
-
-import Button from '~/components/modules/buttons/default';
-
-import { useMapList } from '~/contexts/mapListContext';
-
-const MapTabs = ({
-	map,
-	list,
-	filter,
-	className,
-	showMap
-}) => {
-	const tabButtonClasses =
-		"hc-flex hc-items-center hc-gap-2 hc-rounded-none hc-border-x-0 data-[state=active]:hc-bg-primary data-[state=active]:hc-text-white";
-	const { mobileTab, setMobileTab } = useMapList();
-	return (
-		<div
-			className={`
-				hc-relative hc-overflow-hidden
-				${className ?? ""}
-			`}
-		>
-			<Tabs.Root
-				className="hc-flex hc-flex-col hc-h-screen hc-min-h-screen"
-				//defaultValue="listTab"
-				value={mobileTab}
-			>
-				<Tabs.List
-					className="hc-w-full hc-shrink-0 hc-flex hc-divide-x hc-divide-primary"
-					aria-label="Review positions"
-				>
-					<Tabs.Trigger value="listTab" asChild onClick={() => setMobileTab("listTab")}>
-						<Button.Btn variant="outline" isBlock className={tabButtonClasses}>
-							<Button.Body className="hc-justify-center">
-								<Button.Icon icon="mdi:view-list" size="hc-size-5" />
-								List
-							</Button.Body>
-						</Button.Btn>
-					</Tabs.Trigger>
-					{showMap && (
-						<Tabs.Trigger value="mapTab" asChild onClick={() => setMobileTab("mapTab")}>
-							<Button.Btn
-								variant="outline"
-								isBlock
-								className={tabButtonClasses}
-							>
-								<Button.Body className="hc-justify-center">
-									<Button.Icon icon="mdi:map" size="hc-size-5" />
-									Map
-								</Button.Body>
-							</Button.Btn>
-						</Tabs.Trigger>
-					)}
-					<Tabs.Trigger value="filterTab" asChild onClick={() => setMobileTab("filterTab")}>
-						<Button.Btn variant="outline" isBlock className={tabButtonClasses}>
-							<Button.Body className="hc-justify-center">
-								<Button.Icon icon="fluent:search-12-filled" size="hc-size-5" />
-								Filter
-							</Button.Body>
-						</Button.Btn>
-					</Tabs.Trigger>
-				</Tabs.List>
-				<Tabs.Content className="hc-grow hc-bg-white hc-outline-none" value="listTab">
-					{list}
-				</Tabs.Content>
-				{showMap && (
-					<Tabs.Content className="hc-grow hc-bg-white hc-outline-none" value="mapTab">
-						{map}
-					</Tabs.Content>
-				)}
-				<Tabs.Content className="hc-grow hc-bg-white hc-outline-none hc-p-2" value="filterTab">
-					{filter}
-				</Tabs.Content>
-			</Tabs.Root>
-		</div>
-	);
-};
-
-export default MapTabs;
+import React from 'react';
+import * as Tabs from '@radix-ui/react-tabs';
+
+import Button from '~/components/modules/buttons/default';
+
+import { useMapList } from '~/contexts/mapListContext';
+
+const MapTabs = ({
+	map,
+	list,
+	filter,
+	className,
+	showMap
+}) => {
+	const tabButtonClasses =
+		"hc-flex hc-items-center hc-gap-2 hc-rounded-none hc-border-x-0 data-[state=active]:hc-bg-primary data-[state=active]:hc-text-white";
+	const { mobileTab, setMobileTab } = useMapList();
+	return (
+		<div
+			className={`
+				hc-relative hc-overflow-hidden
+				${className ?? ""}
+			`}
+		>
+			<Tabs.Root
+				className="hc-flex hc-flex-col hc-h-screen hc-min-h-screen"
+				//defaultValue="listTab"
+				value={mobileTab}
+			>
+				<Tabs.List
+					className="hc-w-full hc-shrink-0 hc-flex hc-divide-x hc-divide-primary"
+					aria-label="Review positions"
+				>
+					<Tabs.Trigger value="listTab" asChild onClick={() => setMobileTab("listTab")}>
+						<Button.Btn variant="outline" isBlock className={tabButtonClasses}>
+							<Button.Body className="hc-justify-center">
+								<Button.Icon icon="mdi:view-list" size="hc-size-5" />
+								List
+							</Button.Body>
+						</Button.Btn>
+					</Tabs.Trigger>
+					{showMap && (
+						<Tabs.Trigger value="mapTab" asChild onClick={() => setMobileTab("mapTab")}>
+							<Button.Btn
+								variant="outline"
+								isBlock
+								className={tabButtonClasses}
+							>
+								<Button.Body className="hc-justify-center">
+									<Button.Icon icon="mdi:map" size="hc-size-5" />
+									Map
+								</Button.Body>
+							</Button.Btn>
+						</Tabs.Trigger>
+					)}
+					<Tabs.Trigger value="filterTab" asChild onClick={() => setMobileTab("filterTab")}>
+						<Button.Btn variant="outline" isBlock className={tabButtonClasses}>
+							<Button.Body className="hc-justify-center">
+								<Button.Icon icon="fluent:search-12-filled" size="hc-size-5" />
+								Filter
+							</Button.Body>
+						</Button.Btn>
+					</Tabs.Trigger>
+				</Tabs.List>
+				<Tabs.Content className="hc-grow hc-bg-white hc-outline-none" value="listTab">
+					{list}
+				</Tabs.Content>
+				{showMap && (
+					<Tabs.Content className="hc-grow hc-bg-white hc-outline-none" value="mapTab">
+						{map}
+					</Tabs.Content>
+				)}
+				<Tabs.Content className="hc-grow hc-bg-white hc-outline-none hc-p-2" value="filterTab">
+					{filter}
+				</Tabs.Content>
+			</Tabs.Root>
+		</div>
+	);
+};
+
+export default MapTabs;

package/src/constants/eventTypes.js

@@ -0,0 +1,13 @@
+export const eventTypes = {
+	FILTER_APPLIED: "filter_applied",
+	MAP_MARKER_CLICKED: "map_marker_clicked",
+	JOB_LISTING_SELECTED: "job_listing_selected",
+	APPLY_NOW_CLICKED: "apply_now_clicked",
+	VIEW_DETAILS_CLICKED: "view_details_clicked",
+	COMMUTE_ORIGIN_ADDED: "commute_origin_added",
+	POI_APPLIED: "point_of_interest_applied",
+	VIEW_JOBS_AT_Location: "view_jobs_at_location_clicked",
+	FAVORITE_SELECTED: "favorite_job_selected",
+	LIST_SORTED: "jobs_list_sorted",
+	FILTERS_RESET: "filters_reset_button_clicked"
+};

package/src/constants/placeTypes.js

@@ -1,8 +1,8 @@
-export const placeTypes = {
-	FOOD: "food",
-	STORE: "shopping",
-	TOURIST_ATTRACTION: "attractions",
-	TRANSIT_STATION: "transit",
-	SCHOOL: "schools",
-	PLACE_OF_WORSHIP: "worship"
-};
+export const placeTypes = {
+	FOOD: "food",
+	STORE: "shopping",
+	TOURIST_ATTRACTION: "attractions",
+	TRANSIT_STATION: "transit",
+	SCHOOL: "schools",
+	PLACE_OF_WORSHIP: "worship"
+};

package/src/contexts/mapContext.js

@@ -1,115 +1,101 @@
-import React, { createContext, useState, useContext, useEffect, useRef } from 'react';
-import { getStorageObject, setStorageObject } from '~/util/localStorageUtil';
-
-const MapContext = createContext();
-
-export const useMap = () => {
-	const context = useContext(MapContext);
-	if (!context) {
-		throw new Error("useMap must be used within a MapProvider");
-	}
-	return context;
-};
-
-export const MapProvider = ({ children, resetFilters }) => {
-	const [selectedListItem, setSelectedListItem] = useState(getStorageObject('selectedListItem'));
-	const [location, setLocation] = useState(getStorageObject('location'));
-	const [center, setCenter] = useState(getStorageObject("center", { lat: 39.8283, lng: -98.5795 }));
-	const [zoom, setZoom] = useState(getStorageObject("zoom", 10));
-	const [commuteLocation, setCommuteLocation] = useState(getStorageObject('commuteLocation'));
-	const [selectedPlaces, setSelectedPlaces] = useState([]);
-	const [mapInteracted, setMapInteracted] = useState(false);
-	const [firstLoadListItem] = useState(getStorageObject('selectedListItem') ?? { id: "defaultId" });
-	const [travelTime, setTravelTime] = useState(null);
-	const userSetZoom = useRef(true);
-
-	useEffect(() => {
-		setStorageObject("commuteLocation", commuteLocation);
-		if (!commuteLocation) {
-			setTravelTime(null);
-		}
-	}, [commuteLocation]);
-
-	useEffect(() => {
-		setStorageObject("selectedListItem", selectedListItem);
-	}, [selectedListItem]);
-
-	useEffect(() => {
-		localStorage.setItem("zoom", zoom);
-	}, [zoom]);
-
-	useEffect(() => {
-		if (location == null) {
-			localStorage.removeItem("location");
-		} else {
-			setStorageObject("location", location);
-		}
-	}, [location]);
-
-	useEffect(() => {
-		setStorageObject("center", center);
-	}, [center]);
-
-	const selectItem = (item, itemLocation, zoom, center) => {
-		setSelectedListItem(item);
-		if (mapInteracted === false && itemLocation != null) {
-			setLocation(itemLocation);
-		}
-		if (mapInteracted === false || itemLocation != null) {
-			setLocation(itemLocation);
-			setCenter(center);
-		}
-		if (mapInteracted === false) {
-			setZoom(zoom);
-
-		}
-
-	};
-
-	const filterReset = () => {
-		setSelectedPlaces({});
-		setSelectedListItem(null);
-		setLocation(null);
-		setZoom(8);
-		setMapInteracted(false);
-	};
-
-	if (resetFilters === true) {
-		filterReset();
-	}
-	const selectLocationEntity = location => {
-
-		localStorage.removeItem("selectedListItem");
-		setTimeout(() => setLocation(location), 200);
-		setSelectedListItem(null);
-	};
-
-	return (
-		<MapContext.Provider
-			value={{
-				selectedListItem,
-				setSelectedListItem,
-				location,
-				center,
-				zoom,
-				setZoom,
-				selectItem,
-				commuteLocation,
-				setCommuteLocation,
-				setSelectedPlaces,
-				selectedPlaces,
-				selectLocationEntity,
-				setLocation,
-				setMapInteracted,
-				mapInteracted,
-				userSetZoom,
-				firstLoadListItem,
-				travelTime,
-				setTravelTime,
-				filterReset
-			}}
-		>
-			{children}
-		</MapContext.Provider>
-	);
-};
+import React, { createContext, useState, useContext, useEffect, useRef } from 'react';
+import { getStorageObject, setStorageObject } from '~/util/localStorageUtil';
+
+const MapContext = createContext();
+
+export const useMap = () => {
+	const context = useContext(MapContext);
+	if (!context) {
+		throw new Error("useMap must be used within a MapProvider");
+	}
+	return context;
+};
+
+export const MapProvider = ({ children, resetFilters }) => {
+	const [selectedListItem, setSelectedListItem] = useState(getStorageObject('selectedListItem'));
+	const [location, setLocation] = useState(getStorageObject('location'));
+	const [center, setCenter] = useState(getStorageObject("center", { lat: 39.8283, lng: -98.5795 }));
+	const [zoom, setZoom] = useState(getStorageObject("zoom", 10));
+	const [selectedPlaces, setSelectedPlaces] = useState([]);
+	const [mapInteracted, setMapInteracted] = useState(false);
+	const [firstLoadListItem] = useState(getStorageObject('selectedListItem') ?? { id: "defaultId" });
+	const userSetZoom = useRef(true);
+
+	useEffect(() => {
+		setStorageObject("selectedListItem", selectedListItem);
+	}, [selectedListItem]);
+
+	useEffect(() => {
+		localStorage.setItem("zoom", zoom);
+	}, [zoom]);
+
+	useEffect(() => {
+		if (location == null) {
+			localStorage.removeItem("location");
+		} else {
+			setStorageObject("location", location);
+		}
+	}, [location]);
+
+	useEffect(() => {
+		setStorageObject("center", center);
+	}, [center]);
+
+	const selectItem = (item, itemLocation, zoom, center) => {
+		setSelectedListItem(item);
+		if (mapInteracted === false && itemLocation != null) {
+			setLocation(itemLocation);
+		}
+		if (mapInteracted === false || itemLocation != null) {
+			setLocation(itemLocation);
+			setCenter(center);
+		}
+		if (mapInteracted === false) {
+			setZoom(zoom);
+
+		}
+	};
+
+	const filterReset = () => {
+		setSelectedPlaces({});
+		setSelectedListItem(null);
+		setLocation(null);
+		setZoom(8);
+		setMapInteracted(false);
+	};
+
+	if (resetFilters === true) {
+		filterReset();
+	}
+	const selectLocationEntity = location => {
+
+		localStorage.removeItem("selectedListItem");
+		setTimeout(() => setLocation(location), 200);
+		setSelectedListItem(null);
+	};
+
+	return (
+		<MapContext.Provider
+			value={{
+				selectedListItem,
+				setSelectedListItem,
+				location,
+				center,
+				zoom,
+				setZoom,
+				selectItem,
+				setSelectedPlaces,
+				selectedPlaces,
+				selectLocationEntity,
+				setLocation,
+				setMapInteracted,
+				mapInteracted,
+				userSetZoom,
+				firstLoadListItem,
+				filterReset
+			}}
+		>
+			{children}
+		</MapContext.Provider>
+	);
+};