@abcagency/hc-ui-components 1.3.22 → 1.3.23

package/src/components/modules/maps/map-list.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import Tabs from '~/components/modules/maps/tabs';
-
-const MapList = ({ showMap, loading, list, map, filter }) => {
-	return (
-		<>
-			<div
-				className={`
-					${showMap === false ? "md:hc-grid-rows-[100vh]" : "md:hc-grid-rows-[50vh_50vh]"}
-					md:hc-grid md:hc-pt-4 hc-overflow-hidden hc-relative bg-gray-100
-				`}
-			>
-				<div>{list}</div>
-				<div>{showMap && map}</div>
-			</div>
-			<div className="md:hc-hidden">
-				<Tabs
-					showMap={showMap}
-					list={list}
-					map={!loading && showMap && map}
-					filter={filter}
-				/>
-			</div>
-		</>
-	);
-};
-
-export default MapList;

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

@@ -1,29 +0,0 @@
-import React from 'react';
-import { MarkerF } from '@react-google-maps/api';
-
-const MapMarker = ({
-	position,
-	title,
-	icon,
-	zIndex,
-	onLoad,
-	onClick,
-	clusterer,
-	children
-}) => {
-	return (
-		<MarkerF
-			position={position}
-			title={title}
-			options={{ icon: icon }}
-			zIndex={zIndex}
-			onLoad={onLoad}
-			onClick={onClick}
-			clusterer={clusterer}
-		>
-			{children}
-		</MarkerF>
-	);
-};
-
-export default MapMarker;

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

@@ -1,76 +0,0 @@
-import React from 'react';
-import { GoogleMap, MarkerClustererF } from "@react-google-maps/api";
-import ShowAllButton from "~/components/modules/buttons/show-all-button";
-import { clusterOptions } from "~/util/mapUtil";
-
-const Map = ({
-	zoom,
-	center,
-	mapContainerRef,
-	onLoad,
-	onIdle,
-	clusterGridSize,
-	markerConfigs,
-	mapMarkers,
-	placeMarkers,
-	mapInteracted,
-	pinIconUrl,
-	setMapInteracted,
-	fitBounds,
-	mapRef,
-	setQuery,
-	filteredListingsLength,
-	setSelectedFilters
-}) => {
-	return (
-		<>
-			{zoom && center && (
-				<div ref={mapContainerRef} className="hc-h-full hc-relative">
-					<GoogleMap
-						zoom={zoom}
-						onLoad={onLoad}
-						onIdle={onIdle}
-						center={center}
-						mapContainerStyle={{
-							width: "100%",
-							height: "100%"
-						}}
-						options={{
-							styles: [
-								{
-									featureType: "poi",
-									elementType: "labels",
-									stylers: [{ visibility: "off" }]
-								}
-							]
-						}}
-					>
-						<MarkerClustererF options={clusterOptions(clusterGridSize, markerConfigs.fillColor)}>
-							{clusterer => (
-								<>
-									{mapMarkers}
-									{placeMarkers}
-								</>
-							)}
-						</MarkerClustererF>
-					</GoogleMap>
-					{mapInteracted && markerConfigs && (
-						<ShowAllButton
-							mapInteracted={mapInteracted}
-							markerConfigs={markerConfigs}
-							setMapInteracted={setMapInteracted}
-							fitBounds={fitBounds}
-							mapRef={mapRef}
-							pinIconUrl={pinIconUrl}
-							setQuery={setQuery}
-							listingCount={filteredListingsLength}
-							setSelectedFilters={setSelectedFilters}
-						/>
-					)}
-				</div>
-			)}
-		</>
-	);
-};
-
-export default Map;

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

@@ -1,41 +0,0 @@
-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 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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: "filter_reset_button_clicked"
-};

package/src/constants/placeTypes.js

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

package/src/contexts/mapContext.tsx

@@ -1,129 +0,0 @@
-import React, { createContext, useState, useContext, useEffect, useRef, ReactNode } from 'react';
-import { getStorageObject, setStorageObject } from '~/util/localStorageUtil';
-import { Listing } from '~/types/Listings';
-import { LatLng } from '~/types/LatLng';
-interface IMapContext {
-  selectedListItem: Listing | null;
-  setSelectedListItem: (item: Listing | null) => void;
-  location: any | null;
-  setLocation: (location: LatLng | null) => void;
-  center: LatLng;
-  setCenter: (center: LatLng) => void;
-  zoom: number;
-  setZoom: (zoom: number) => void;
-  selectedPlaces: string[];
-  setSelectedPlaces: (places: string[]) => void;
-  mapInteracted: boolean;
-  setMapInteracted: (interacted: boolean) => void;
-  userSetZoom: React.MutableRefObject<boolean>;
-  firstLoadListItem: any;
-  selectItem: (item: Listing, itemLocation: LatLng | null, zoom: number, center: LatLng) => void;
-  filterReset: () => void;
-  selectLocationEntity: (location: LatLng) => void;
-}
-
-const MapContext = createContext<IMapContext | undefined>(undefined);
-
-export const useMap = () => {
-	const context = useContext(MapContext);
-	if (!context) {
-		throw new Error("useMap must be used within a MapProvider");
-	}
-	return context;
-};
-
-interface MapProviderProps {
-  children: ReactNode;
-  resetFilters: boolean;
-}
-
-export const MapProvider: React.FC<MapProviderProps> = ({ children, resetFilters }) => {
-	const [selectedListItem, setSelectedListItem] = useState<Listing | null>(getStorageObject('selectedListItem'));
-	const [location, setLocation] = useState<any>(getStorageObject('location'));
-	const [center, setCenter] = useState<LatLng>(getStorageObject("center", { lat: 39.8283, lng: -98.5795 }) || { lat: 39.8283, lng: -98.5795 });
-	const [zoom, setZoom] = useState<number>(getStorageObject("zoom", 10) || 10);
-	const [selectedPlaces, setSelectedPlaces] = useState<string[]>([]);
-	const [mapInteracted, setMapInteracted] = useState<boolean>(false);
-	const [firstLoadListItem] = useState<any>(getStorageObject('selectedListItem', { id: "defaultId" }));
-	const userSetZoom = useRef<boolean>(true);
-
-	useEffect(() => {
-		setStorageObject("selectedListItem", selectedListItem);
-	}, [selectedListItem]);
-
-	useEffect(() => {
-		localStorage.setItem("zoom", zoom.toString());
-	}, [zoom]);
-
-	useEffect(() => {
-		if (location == null) {
-			localStorage.removeItem("location");
-		} else {
-			setStorageObject("location", location);
-		}
-	}, [location]);
-
-	useEffect(() => {
-		setStorageObject("center", center);
-	}, [center]);
-
-	const selectItem = (item: Listing, itemLocation: LatLng | null, zoom: number, center: LatLng) => {
-		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);
-	};
-
-	useEffect(() => {
-		if (resetFilters === true) {
-			filterReset();
-		}
-	}, [resetFilters]);
-
-	const selectLocationEntity = (location: LatLng) => {
-		localStorage.removeItem("selectedListItem");
-		setTimeout(() => setLocation(location), 200);
-		setSelectedListItem(null);
-	};
-
-	return (
-		<MapContext.Provider
-			value={{
-				selectedListItem,
-				setSelectedListItem,
-				location,
-				center,
-				setCenter,
-				zoom,
-				setZoom,
-				selectItem,
-				setSelectedPlaces,
-				selectedPlaces,
-				selectLocationEntity,
-				setLocation,
-				setMapInteracted,
-				mapInteracted,
-				userSetZoom,
-				firstLoadListItem,
-				filterReset
-			}}
-		>
-			{children}
-		</MapContext.Provider>
-	);
-};