@abcagency/hc-ui-components 1.9.34 → 1.9.36

package/src/components/modules/list/field-mapper-mobile.jsx

@@ -2,116 +2,104 @@ import React from 'react';
 import Grid from '~/components/modules/grid';
 import Icon from '~/components/modules/icon';
 import PillWrapper from '~/components/modules/buttons/pill-wrapper';
-import { getFieldValue } from '~/util/filterUtil';
-import { twMerge } from 'tailwind-merge';
 
 const FieldMapperMobile = ({
 	item,
 	fieldsShown,
 	specialFeatures,
-	specialFeaturePills,
 	handleFavouriteClick,
 	isFavorite,
 	includeFavorite = true
 }) => {
-	const specialFeaturePillsRender = field => {
-		if (field !== 'title' || !specialFeatures || !specialFeaturePills) return null;
-
-		return Object.entries(specialFeatures).map(([featureKey, featureLabel]) => {
-			// Only show pill if it's configured in specialFeaturePills
-			if (!specialFeaturePills[featureKey]) return null;
-
-			const value = getFieldValue(item, featureKey);
-			const customClassName = specialFeaturePills[featureKey]?.className || '';
-
-			// Handle boolean fields (value == 1 or "true")
-			if (value == 1 || value === 1 || value === '1' || value === 'true' || value === 'True' || value === true) {
-				return <PillWrapper key={featureKey} className={customClassName}>{featureLabel}</PillWrapper>;
-			}
-			// Handle multi-value custom fields - show the value if it's not empty/false
-			if (value && value !== '' && value !== 'false' && value !== 'False' && value !== '0' && value !== 0) {
-				return <PillWrapper key={featureKey} className={customClassName}>{featureLabel}: {value}</PillWrapper>;
-			}
-			return null;
-		});
+	const specialFeaturePills = field => {
+		return field === 'position' && specialFeatures &&
+      Object.entries(specialFeatures).map(([featureKey, featureLabel]) => {
+      	return item.fields[featureKey] == 1 && (
+      		<PillWrapper key={featureKey}>{featureLabel}</PillWrapper>
+      	);
+      });
 	};
 
 	return (
-		<Grid.Item className="md:hc-hidden hc-text-[#5d5e5e]">
-			{fieldsShown.includes("title") &&
+		<Grid.Item className="md:hc-hidden">
+			{fieldsShown.includes("position") &&
         <>
-        	<div className="hc-flex hc-items-start hc-justify-between">
-        		<div className="hc-flex-1">
-        			<div className="hc-font-bold hc-text-primary hc-leading-tight hc-text-sm">{getFieldValue(item, "title")}</div>
-        			{/* Category */}
-        			<div className='hc-pl-2px'>
-        			{fieldsShown.includes("category") && getFieldValue(item, "category") && (
-        				<div className="hc-flex hc-gap-1 hc-items-center hc-text-xs hc-my-px">
-        					<Icon icon="icon-park-solid:tree-list" size="hc-size-3.5" className="hc-text-[#5d5e5e]" />
-        					<span className="hc-sr-only">category</span>
-        					{getFieldValue(item, "category")}
-        				</div>
-        			)}
-        			{/* SubCategory */}
-        			{fieldsShown.includes("subCategory") && getFieldValue(item, "subCategory") && (
-        				<div className="hc-flex hc-gap-1 hc-items-center hc-text-xs hc-my-px">
-        					<Icon icon="icon-park-solid:tree-list" size="hc-size-3.5" className="hc-text-[#5d5e5e]" />
-        					<span className="hc-sr-only">subCategory</span>
-        					{getFieldValue(item, "subCategory")}
-        				</div>
-        			)}
-        			{/* Location: cityState OR city, state OR just city OR just state */}
-        			{(fieldsShown.includes("cityState") && getFieldValue(item, "cityState")) && (
-        				<div className="hc-flex hc-gap-1 hc-items-center hc-text-xs hc-my-px">
-        					<Icon icon="fluent:location-16-filled" size="hc-size-3.5" className="hc-text-[#5d5e5e]" />
-        					<span className="hc-sr-only">Location</span>
-        					{getFieldValue(item, "cityState")}
-        				</div>
-        			)}
-        			{!(fieldsShown.includes("cityState") && getFieldValue(item, "cityState")) && ((fieldsShown.includes("city") && getFieldValue(item, "city")) || (fieldsShown.includes("state") && getFieldValue(item, "state"))) && (
-        				<div className="hc-flex hc-gap-1 hc-items-center hc-text-xs hc-my-px">
-        					<Icon icon="fluent:location-16-filled" size="hc-size-3.5" className="hc-text-[#5d5e5e]" />
-        					<span className="hc-sr-only">Location</span>
-        					{getFieldValue(item, "city") && getFieldValue(item, "state")
-        						? `${getFieldValue(item, "city")}, ${getFieldValue(item, "state")}`
-        						: getFieldValue(item, "city") || getFieldValue(item, "state")}
-        				</div>
-        			)}
-        			{/* Schedule */}
-        			{fieldsShown.includes("schedule") && getFieldValue(item, "schedule") && (
-        				<div className="hc-flex hc-gap-1 hc-items-center hc-text-xs hc-my-px">
-        					<Icon icon="gravity-ui:clock-fill" size="hc-size-3.5" className="hc-text-[#5d5e5e]" />
-        					<span className="hc-sr-only">Schedule</span>
-        					{getFieldValue(item, "schedule")}
-        				</div>
-        			)}
-        			{/* Travel Time */}
-        			{fieldsShown.includes("travelTime") && getFieldValue(item, "travelTime") && (
-        				<div className="hc-flex hc-gap-1 hc-items-center hc-text-xs hc-my-px">
-        					<Icon icon="ri:pin-distance-fill" size="hc-size-3.5" className="hc-text-[#5d5e5e]" />
-        					<span className="hc-sr-only">Commute</span>
-        					{getFieldValue(item, "travelTime")}
-        				</div>
-        			)}
+        	<div className="hc-flex hc-items-start">
+        		<div className="hc-flex hc-justify-between hc-items-center hc-min-w-[100%]">
+        			<h3 className="hc-font-bold hc-mb-3 hc-flex-1">{item.fields.position}</h3>
+        			{includeFavorite && <div className="hc-flex hc-justify-end hc-pb-2">
+        				<Icon
+        					icon={isFavorite ? "mdi:heart" : "mdi:heart-outline"}
+        					size="hc-size-3.5"
+        					iconClasses={isFavorite ? "hc-text-primary" : ""}
+        					className={`hc-transition-opacity hc-duration-300 hc-cursor-pointer
+                  ${isFavorite ? "hc-opacity-100" : "hc-text-uiText/60 group-hover:hc-opacity-100"}
+                  `}
+        					onClick={e => handleFavouriteClick(e, item)}
+        				/>
         			</div>
+        			}
         		</div>
-        		{includeFavorite && <div className="hc-flex hc-justify-end">
-        			<Icon
-        				icon={isFavorite ? "mdi:heart" : "mdi:heart-outline"}
-        				size="hc-size-3.5"
-        				iconClasses={isFavorite ? "hc-text-primary" : "hc-text-[#5d5e5e]"}
-        				className={`hc-transition-opacity hc-duration-300 hc-cursor-pointer ${isFavorite ? "hc-opacity-100" : ""}`}
-        				onClick={e => handleFavouriteClick(e, item)}
-        			/>
-        		</div>
-        		}
-        		</div>
-
-        	{specialFeatures && <div className='hc-pb-0'>{specialFeaturePillsRender("title")} </div>}
+        	</div>
+        	{specialFeatures && <div className='hc-pb-4'>{specialFeaturePills("position", true)} </div>}
         </>
 			}
+
+			<ul className="hc-space-y-2 hc-text-xs">
+				{[
+					{
+						field: "categoryClass",
+						name: "categoryClass",
+						icon: "icon-park-solid:tree-list"
+					},
+					{
+						field: "category",
+						name: "Category",
+						icon: "icon-park-solid:tree-list"
+					},
+					{
+						field: "schedule",
+						name: "Schedule",
+						icon: "gravity-ui:clock-fill"
+					},
+					{
+						field: "city",
+						name: "Location",
+						icon: "fluent:location-16-filled"
+					},
+					{
+						field: "state",
+						name: "Location",
+						icon: "fluent:location-16-filled"
+					},
+					{
+						field: "cityState",
+						name: "Location",
+						icon: "fluent:location-16-filled"
+					},
+					{
+						field: "travelTime",
+						name: "Commute",
+						icon: "ri:pin-distance-fill"
+					}
+				].map(listItem => (
+					(fieldsShown.includes(listItem.field) && item.fields[listItem.field]) &&
+          <li
+          	key={listItem.field}
+          	className="hc-flex hc-gap-2"
+          >
+          	<Icon
+          		icon={listItem.icon}
+          		size="hc-size-3.5"
+          		className="hc-text-uiAccent/30"
+          	/>
+          	<span className="hc-sr-only">{listItem.name}</span>
+          	{item.fields[listItem.field]}
+          </li>
+				))}
+			</ul>
 		</Grid.Item>
 	);
 };
 
-export default FieldMapperMobile;
+export default FieldMapperMobile;

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

@@ -57,7 +57,7 @@ const HeaderItem = ({
 			size="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() === "title" ? "hc-pl-7 hc-col-span-4" : (field.toLowerCase() === "state" || field.toLowerCase() == "favorite") ? "hc-col-span-1" : "hc-col-span-2"}
+				${field.toLowerCase() === "position" ? "hc-pl-7 hc-col-span-4" : (field.toLowerCase() === "state" || field.toLowerCase() == "favorite") ? "hc-col-span-1" : "hc-col-span-2"}
 				${className ?? ""}
 			`}
 			{...rest}

package/src/components/modules/list/item-list.tsx

@@ -66,7 +66,7 @@ const ItemsList: React.FC<ItemsListProps> = ({
   }, [scrollContainerRef]);
 
   return (
-    <div className="hc-relative hc-bg-white md:hc-px-4 hc-flex hc-flex-col hc-h-full">
+    <div className="hc-relative hc-bg-white md:hc-px-4 hc-flex hc-flex-col hc-h-[100%]">
       <div className="hc-flex hc-flex-wrap hc-items-center hc-justify-between hc-gap-4 md:hc-mb-2 hc-p-3 md:hc-p-0 hc-bg-uiAccent/10 md:hc-bg-transparent hc-border-b md:hc-border-none hc-border-uiAccent/20">
         <h2 className="hc-text-gray-500 hc-font-semibold hc-text-xs md:hc-text-sm">
           {loading && <span>Loading...</span>}
@@ -94,7 +94,10 @@ const ItemsList: React.FC<ItemsListProps> = ({
       </div>
       <div
         ref={scrollContainerRef}
-        className="hc-flex-grow hc-overflow-y-auto"
+        className={`
+          hc-flex-grow hc-overflow-y-auto
+          ${showMap ? " hc-max-h-[88%] md:hc-max-[100%]" : "md:hc-max-h-[95%] hc-max-h-[95%]"}
+        `}
       >
         {loading ? (
           <div className="hc-flex hc-justify-center hc-items-center hc-pt-20">

package/src/components/modules/list/list-item/list-item.jsx

@@ -1,8 +1,9 @@
-import React, { forwardRef, useState, useEffect, useRef } from 'react';
+import React, { forwardRef } from 'react';
 import Grid from '~/components/modules/grid';
 import Icon from '~/components/modules/icon';
 import FieldMapper from '~/components/modules/list/field-mapper-desktop';
 import FieldMapperMobile from '~/components/modules/list/field-mapper-mobile';
+
 const ListItem = forwardRef(
 	(
 		{
@@ -13,83 +14,15 @@ const ListItem = forwardRef(
 			fieldsShown,
 			specialFeatures,
 			onItemSelected,
-			showMap,
-			setMobileTab,
 			handleSettingFavorites,
 			favorites,
 			includeFavorite = true,
 			siteConfig,
-			googleMapsApiKey,
-			index,
+			index = 0,
 			...props
 		},
 		ref
 	) => {
-		const mapPinColor = !showMap ? null : siteConfig.colors.primary.replace("#", "");
-
-		// Generate static map URL for mobile
-		const staticMapUrl = showMap && item.mapDetails?.latitude && item.mapDetails?.longitude
-			? `https://maps.googleapis.com/maps/api/staticmap?scale=2&center=${item.mapDetails.latitude},${item.mapDetails.longitude}&zoom=10&size=240x180&maptype=roadmap&markers=color:0x${mapPinColor}%7Clabel:•%7C${item.mapDetails.latitude},${item.mapDetails.longitude}&key=${googleMapsApiKey}`
-			: null;
-
-		// Mobile detection for bandwidth optimization
-		const [isMobile, setIsMobile] = useState(false);
-
-		// Individual item loading based on scroll position
-		const [isMapLoaded, setIsMapLoaded] = useState(false);
-		const itemRef = useRef(null);
-
-		useEffect(() => {
-			if (typeof window === 'undefined') return;
-
-			const checkIsMobile = () => {
-				setIsMobile(window.innerWidth < 768); // md breakpoint in Tailwind
-			};
-
-			checkIsMobile();
-			window.addEventListener('resize', checkIsMobile);
-
-			return () => window.removeEventListener('resize', checkIsMobile);
-		}, []);
-
-		// Load individual map when item comes into view
-		useEffect(() => {
-			if (typeof window === 'undefined') return;
-			if (!isMobile || !showMap || !itemRef.current || isMapLoaded) return;
-
-			const checkIfInView = () => {
-				if (!itemRef.current || isMapLoaded) return;
-
-				const rect = itemRef.current.getBoundingClientRect();
-				const windowHeight = window.innerHeight;
-
-				// Load only when item is actually visible or very close to viewport
-				// Much more conservative - only load what's immediately needed
-				const isInView = rect.top < windowHeight && rect.bottom > 0;
-
-				if (isInView) {
-					setIsMapLoaded(true);
-				}
-			};
-
-			// Check immediately
-			checkIfInView();
-
-			// Only check on scroll, not continuously
-			let scrollTimeout;
-			const handleScroll = () => {
-				clearTimeout(scrollTimeout);
-				scrollTimeout = setTimeout(checkIfInView, 300); // Much less frequent
-			};
-
-			window.addEventListener('scroll', handleScroll, { passive: true });
-
-			return () => {
-				window.removeEventListener('scroll', handleScroll);
-				clearTimeout(scrollTimeout);
-			};
-		}, [isMobile, showMap, isMapLoaded]);
-
 		const handleClick = () => {
 			if (onItemSelected) {
 				onItemSelected(item);
@@ -111,18 +44,7 @@ const ListItem = forwardRef(
 		};
 		return (
 			<button
-				ref={el => {
-					// Forward the ref to the parent component
-					if (ref) {
-						if (typeof ref === 'function') {
-							ref(el);
-						} else {
-							ref.current = el;
-						}
-					}
-					// Also store our own ref for scroll detection
-					itemRef.current = el;
-				}}
+				ref={ref}
 				onClick={() => { handleClick(); }}
 				className={`
 				hc-group hc-relative hc-flex md:hc-flex-col hc-w-full hc-text-left hc-bg-clip-border hc-border hc-border-transparent hc-break-words hc-overflow-hidden hc-cursor-pointer hc-transition-colors hover:hc-bg-uiAccent/5 focus:hover:hc-bg-uiAccent/5
@@ -155,14 +77,18 @@ const ListItem = forwardRef(
 					<FieldMapper
 						item={item}
 						fieldsShown={fieldsShown}
-						specialFeatures={specialFeatures}					specialFeaturePills={siteConfig?.specialFeaturePills}						isFavorite={isFavorite}
+						specialFeatures={specialFeatures}
+						specialFeaturePills={siteConfig?.specialFeaturePills}
+						isFavorite={isFavorite}
 						includeFavorite={includeFavorite}
 						handleFavouriteClick={handleFavouriteClick}
 					/>
 					<FieldMapperMobile
 						item={item}
 						fieldsShown={fieldsShown}
-						specialFeatures={specialFeatures}					specialFeaturePills={siteConfig?.specialFeaturePills}						isFavorite={isFavorite}
+						specialFeatures={specialFeatures}
+						specialFeaturePills={siteConfig?.specialFeaturePills}
+						isFavorite={isFavorite}
 						includeFavorite={includeFavorite}
 						handleFavouriteClick={handleFavouriteClick}
 					/>
@@ -200,4 +126,4 @@ export default React.memo(ListItem, (prevProps, nextProps) => {
     prevProps.bodyClassName === nextProps.bodyClassName &&
     prevProps.className === nextProps.className
 	);
-});
+});

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

@@ -8,7 +8,7 @@ const MapList = ({ showMap, loading, list, map, filter, mapPosition, containerSt
 				style={containerStyle}
 				className={`
 					${showMap === false ? "md:hc-grid-rows-[100%]" : "md:hc-grid-rows-[50%_50%]"}
-					hc-hidden md:hc-grid hc-overflow-hidden hc-relative bg-gray-100
+					hc-hidden md:hc-grid md:hc-pt-4 hc-overflow-hidden hc-relative bg-gray-100
 				`}
 			>
 				{mapPosition && mapPosition === 'top' && showMap ? (

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

@@ -1,7 +1,5 @@
-"use client";
-
-import React, { useState, useEffect } from 'react';
-import { GoogleMap, useLoadScript } from "@react-google-maps/api";
+import React from 'react';
+import { GoogleMap } from "@react-google-maps/api";
 import ShowAllButton from "~/components/modules/buttons/show-all-button";
 
 const Map = ({
@@ -20,20 +18,10 @@ const Map = ({
 	setSelectedFilters,
 	children
 }) => {
-	// Use state to avoid hydration mismatch
-	const [isGoogleMapsAvailable, setIsGoogleMapsAvailable] = useState(false);
-	
-	useEffect(() => {
-		// Check if Google Maps is available after mount (client-side only)
-		if (window.google && window.google.maps && window.google.maps.Map) {
-			setIsGoogleMapsAvailable(true);
-		}
-	}, []);
-
 	return (
 		<>
-			<div ref={mapContainerRef} className="hc-h-full hc-relative">
-				{isGoogleMapsAvailable && (
+			{zoom && center && (
+				<div ref={mapContainerRef} className="hc-h-full hc-relative">
 					<GoogleMap
 						zoom={zoom}
 						onLoad={onLoad}
@@ -55,20 +43,20 @@ const Map = ({
 					>
 						{children}
 					</GoogleMap>
-				)}
-				{mapInteracted && (
-					<ShowAllButton
-						mapInteracted={mapInteracted}
-						setMapInteracted={setMapInteracted}
-						fitBounds={fitBounds}
-						mapRef={mapRef}
-						pinIconUrl={pinIconUrl}
-						setQuery={setQuery}
-						listingCount={filteredListingsLength}
-						setSelectedFilters={setSelectedFilters}
-					/>
-				)}
-			</div>
+					{mapInteracted && (
+						<ShowAllButton
+							mapInteracted={mapInteracted}
+							setMapInteracted={setMapInteracted}
+							fitBounds={fitBounds}
+							mapRef={mapRef}
+							pinIconUrl={pinIconUrl}
+							setQuery={setQuery}
+							listingCount={filteredListingsLength}
+							setSelectedFilters={setSelectedFilters}
+						/>
+					)}
+				</div>
+			)}
 		</>
 	);
 };

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

@@ -64,10 +64,10 @@ const MapTabs = ({
 				</Tabs.List>
 
 				{/* Tab content */}
-				<div className="hc-flex-grow hc-h-[calc(100vh-180px)] md:hc-h-[calc(100%-48px)]">
+				<div className="hc-flex-grow hc-h-[calc(100%-48px)]">
 					{/* List Tab Content */}
 					<Tabs.Content
-						className="hc-h-full hc-bg-white hc-outline-none"
+						className="hc-h-full hc-overflow-auto hc-bg-white hc-outline-none"
 						value="listTab"
 					>
 						{list}
@@ -76,7 +76,7 @@ const MapTabs = ({
 					{/* Map Tab Content */}
 					{showMap && (
 						<Tabs.Content
-							className="hc-h-[100vh] hc-bg-white hc-outline-none"
+							className="hc-h-full hc-overflow-auto hc-bg-white hc-outline-none"
 							value="mapTab"
 						>
 							{map}
@@ -85,7 +85,7 @@ const MapTabs = ({
 
 					{/* Filter Tab Content */}
 					<Tabs.Content
-						className="hc-h-full hc-max-h-[calc(100vh-158px)] hc-bg-white hc-outline-none"
+						className="hc-h-full hc-bg-white hc-outline-none"
 						value="filterTab"
 					>
 						{filter}
@@ -96,4 +96,4 @@ const MapTabs = ({
 	);
 };
 
-export default MapTabs;
+export default MapTabs;

package/src/contexts/mapContext.tsx

@@ -37,62 +37,37 @@ interface MapProviderProps {
   children: ReactNode;
   resetFilters: boolean;
 	defaultZoomOverride?: number | null;
-	localStorageKey?: string;
 }
 
-export const MapProvider: React.FC<MapProviderProps> = ({ children, resetFilters, defaultZoomOverride, localStorageKey = '' }) => {
-	// Initialize with defaults to avoid hydration mismatch - load from localStorage after mount
-	const [selectedListItem, setSelectedListItem] = useState<Listing | null>(null);
-	const [location, setLocation] = useState<any>(null);
-	const [center, setCenter] = useState<LatLng>({ lat: 39.8283, lng: -98.5795 });
-	const [zoom, setZoom] = useState<number>(9);
+export const MapProvider: React.FC<MapProviderProps> = ({ children, resetFilters, defaultZoomOverride }) => {
+	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", 9) || 9);
 	const [selectedPlaces, setSelectedPlaces] = useState<string[]>([]);
 	const [mapInteracted, setMapInteracted] = useState<boolean>(false);
-	const [firstLoadListItem, setFirstLoadListItem] = useState<any>({ id: "defaultId" });
+	const [firstLoadListItem] = useState<any>(getStorageObject('selectedListItem', { id: "defaultId" }));
 	const userSetZoom = useRef<boolean>(true);
-	const [hasMounted, setHasMounted] = useState(false);
 
-	// Load from localStorage after mount to avoid hydration mismatch
 	useEffect(() => {
-		if (typeof window !== 'undefined') {
-			const storedItem = getStorageObject(localStorageKey + 'selectedListItem');
-			const storedLocation = getStorageObject(localStorageKey + 'location');
-			const storedCenter = getStorageObject(localStorageKey + "center", { lat: 39.8283, lng: -98.5795 });
-			const storedZoom = getStorageObject(localStorageKey + "zoom", 9);
-			const storedFirstLoad = getStorageObject(localStorageKey + 'selectedListItem', { id: "defaultId" });
-			
-			if (storedItem) setSelectedListItem(storedItem);
-			if (storedLocation) setLocation(storedLocation);
-			if (storedCenter) setCenter(storedCenter);
-			if (storedZoom) setZoom(storedZoom);
-			if (storedFirstLoad) setFirstLoadListItem(storedFirstLoad);
-			setHasMounted(true);
-		}
-	}, [localStorageKey]);
+		setStorageObject("selectedListItem", selectedListItem);
+	}, [selectedListItem]);
 
 	useEffect(() => {
-		setStorageObject(localStorageKey + "selectedListItem", selectedListItem);
-	}, [selectedListItem, localStorageKey]);
+		localStorage.setItem("zoom", zoom.toString());
+	}, [zoom]);
 
 	useEffect(() => {
-		if (typeof window !== 'undefined') {
-			localStorage.setItem(localStorageKey + "zoom", zoom.toString());
+		if (location == null) {
+			localStorage.removeItem("location");
+		} else {
+			setStorageObject("location", location);
 		}
-	}, [zoom, localStorageKey]);
+	}, [location]);
 
 	useEffect(() => {
-		if (typeof window !== 'undefined') {
-			if (location == null) {
-				localStorage.removeItem(localStorageKey + "location");
-			} else {
-				setStorageObject(localStorageKey + "location", location);
-			}
-		}
-	}, [location, localStorageKey]);
-
-	useEffect(() => {
-		setStorageObject(localStorageKey + "center", center);
-	}, [center, localStorageKey]);
+		setStorageObject("center", center);
+	}, [center]);
 
 	const selectItem = (item: Listing, itemLocation: LatLng | null, zoom: number, center: LatLng) => {
 		setSelectedListItem(item);
@@ -123,9 +98,7 @@ export const MapProvider: React.FC<MapProviderProps> = ({ children, resetFilters
 	}, [resetFilters]);
 
 	const selectLocationEntity = (location: LatLng) => {
-		if (typeof window !== 'undefined') {
-			localStorage.removeItem(localStorageKey + "selectedListItem");
-		}
+		localStorage.removeItem("selectedListItem");
 		setTimeout(() => setLocation(location), 200);
 		setSelectedListItem(null);
 	};