@salesforce/webapp-template-app-react-sample-b2x-experimental 1.116.7 → 1.116.9

package/dist/force-app/main/default/webapplications/propertyrentalapp/src/features/authentication/sessionTimeout/SessionTimeoutValidator.tsx

@@ -496,8 +496,18 @@ export default function SessionTimeoutValidator({
 	// Get current location from React Router
 	const location = useLocation();
 
-	// State for session expired alert
-	const [showExpiredAlert, setShowExpiredAlert] = useState(false);
+	// Session expired alert — checked once at mount via lazy initializer.
+	// The session timeout handler triggers a hard navigation (window.location.replace),
+	// so the component always mounts fresh on the login page after expiry.
+	const [showExpiredAlert, setShowExpiredAlert] = useState(() => {
+		const isLoginPage = location.pathname === ROUTES.LOGIN.PATH;
+		const shouldShow =
+			isLoginPage && sessionStorage.getItem(STORAGE_KEYS.SHOW_SESSION_MESSAGE) === "true";
+		if (shouldShow) {
+			sessionStorage.removeItem(STORAGE_KEYS.SHOW_SESSION_MESSAGE);
+		}
+		return shouldShow;
+	});
 
 	// Session timeout monitoring hook
 	const sessionTimeout = useSessionTimeout({
@@ -505,22 +515,6 @@ export default function SessionTimeoutValidator({
 		isGuest,
 	});
 
-	/**
-	 * Check if we should show expired session message
-	 * Called on mount and whenever pathname changes
-	 */
-	useEffect(() => {
-		// Check if we're on the login page and should show expired message
-		const isLoginPage = location.pathname === ROUTES.LOGIN.PATH;
-		const shouldShowMessage = sessionStorage.getItem(STORAGE_KEYS.SHOW_SESSION_MESSAGE) === "true";
-
-		if (isLoginPage && shouldShowMessage) {
-			setShowExpiredAlert(true);
-			// Clear the flag immediately after reading
-			sessionStorage.removeItem(STORAGE_KEYS.SHOW_SESSION_MESSAGE);
-		}
-	}, [location.pathname]);
-
 	/**
 	 * Handle session extension
 	 * Called when user clicks "Continue Working" in warning modal

package/dist/force-app/main/default/webapplications/propertyrentalapp/src/features/object-search/components/FilterContext.tsx

@@ -60,7 +60,7 @@ export function useFilterPanel() {
 	return { hasActiveFilters: filters.length > 0, resetAll: onReset };
 }
 
-interface FilterResetButtonProps extends Omit<React.ComponentProps<typeof Button>, "onClick"> {}
+type FilterResetButtonProps = Omit<React.ComponentProps<typeof Button>, "onClick">;
 
 export function FilterResetButton({ children, ...props }: FilterResetButtonProps) {
 	const { hasActiveFilters, resetAll } = useFilterPanel();

package/dist/force-app/main/default/webapplications/propertyrentalapp/src/features/object-search/hooks/useObjectSearchParams.ts

@@ -61,7 +61,10 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 	paginationConfig?: PaginationConfig,
 ) {
 	const defaultPageSize = paginationConfig?.defaultPageSize ?? 10;
-	const validPageSizes = paginationConfig?.validPageSizes ?? [defaultPageSize];
+	const validPageSizes = useMemo(
+		() => paginationConfig?.validPageSizes ?? [defaultPageSize],
+		[paginationConfig?.validPageSizes, defaultPageSize],
+	);
 	const [searchParams, setSearchParams] = useSearchParams();
 
 	// Seed local state from URL on initial load
@@ -76,8 +79,10 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 	const [sort, setLocalSort] = useState<SortState | null>(initial.sort);
 
 	// Pagination — cursor-based with a stack to support "previous page" navigation.
-	const getValidPageSize = (size: number) =>
-		validPageSizes.includes(size) ? size : defaultPageSize;
+	const getValidPageSize = useCallback(
+		(size: number) => (validPageSizes.includes(size) ? size : defaultPageSize),
+		[validPageSizes, defaultPageSize],
+	);
 
 	const [pageSize, setPageSizeState] = useState<number>(
 		getValidPageSize(initial.pageSize ?? defaultPageSize),
@@ -166,7 +171,7 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 		resetPagination();
 		syncToUrl([], null, defaultPageSize, 0);
 		setPageSizeState(defaultPageSize);
-	}, [syncToUrl, resetPagination]);
+	}, [syncToUrl, resetPagination, defaultPageSize]);
 
 	// -- Pagination callbacks ---------------------------------------------------
 	// Uses a cursor stack to track visited pages. "Next" pushes the current
@@ -204,7 +209,7 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 			resetPagination();
 			debouncedSyncRef.current(f, s, validated);
 		},
-		[resetPagination],
+		[resetPagination, getValidPageSize],
 	);
 
 	// -- Derived query objects ---------------------------------------------------

package/dist/force-app/main/default/webapplications/propertyrentalapp/src/hooks/useGeocode.ts

@@ -1,48 +1,33 @@
-import { useState, useEffect } from "react";
 import { geocodeAddress, getStateZipFromAddress, type GeocodeResult } from "@/utils/geocode";
+import { useCachedAsyncData } from "@/features/object-search/hooks/useCachedAsyncData";
+
+async function geocodeWithFallback(address: string): Promise<GeocodeResult | null> {
+	const normalized = address.replace(/\n/g, ", ").trim();
+	const result = await geocodeAddress(normalized);
+	if (result != null) return result;
+
+	// Fallback: try state + zip if full address failed
+	const stateZip = getStateZipFromAddress(normalized);
+	if (stateZip !== normalized) {
+		return geocodeAddress(stateZip);
+	}
+	return null;
+}
 
 export function useGeocode(address: string | null | undefined): {
 	coords: GeocodeResult | null;
 	loading: boolean;
 } {
-	const [coords, setCoords] = useState<GeocodeResult | null>(null);
-	const [loading, setLoading] = useState(false);
-
-	useEffect(() => {
-		if (!address?.trim()) {
-			setCoords(null);
-			setLoading(false);
-			return;
-		}
-		let cancelled = false;
-		setLoading(true);
-		const normalized = address.replace(/\n/g, ", ").trim();
-
-		(async () => {
-			try {
-				let result = await geocodeAddress(normalized);
-				if (cancelled) return;
-				if (result != null) {
-					setCoords(result);
-					return;
-				}
-				// Fallback: same as property search – try state + zip if full address failed
-				const stateZip = getStateZipFromAddress(normalized);
-				if (stateZip !== normalized) {
-					result = await geocodeAddress(stateZip);
-					if (!cancelled) setCoords(result);
-				}
-			} catch {
-				if (!cancelled) setCoords(null);
-			} finally {
-				if (!cancelled) setLoading(false);
-			}
-		})();
+	const trimmed = address?.trim() ?? "";
 
-		return () => {
-			cancelled = true;
-		};
-	}, [address?.trim() ?? ""]);
+	const { data: coords, loading } = useCachedAsyncData(
+		() => {
+			if (!trimmed) return Promise.resolve(null);
+			return geocodeWithFallback(trimmed);
+		},
+		[trimmed],
+		{ key: `geocode:${trimmed}`, ttl: 600_000 },
+	);
 
 	return { coords, loading };
 }

package/dist/force-app/main/default/webapplications/propertyrentalapp/src/hooks/useMaintenanceRequests.ts

@@ -1,39 +1,43 @@
 /**
  * Fetches Maintenance_Request__c list and exposes refetch for after create.
  */
-import { useState, useEffect, useCallback } from "react";
+import { useState, useCallback } from "react";
 import {
-	queryMaintenanceRequests,
-	type MaintenanceRequestSummary,
+	searchMaintenanceRequests,
+	type MaintenanceRequestNode,
 } from "@/api/maintenanceRequests/maintenanceRequestApi";
+import { ResultOrder } from "@/api/graphql-operations-types";
+import {
+	useCachedAsyncData,
+	clearCacheEntry,
+} from "@/features/object-search/hooks/useCachedAsyncData";
+
+const CACHE_KEY = "maintenance-requests";
+
+async function fetchMaintenanceNodes(): Promise<MaintenanceRequestNode[]> {
+	const result = await searchMaintenanceRequests({
+		first: 50,
+		orderBy: { Scheduled__c: { order: ResultOrder.Desc } },
+	});
+	return (result.edges ?? []).flatMap((e) => (e?.node ? [e.node] : []));
+}
 
 export function useMaintenanceRequests(): {
-	requests: MaintenanceRequestSummary[];
+	requests: MaintenanceRequestNode[];
 	loading: boolean;
 	error: string | null;
-	refetch: () => Promise<void>;
+	refetch: () => void;
 } {
-	const [requests, setRequests] = useState<MaintenanceRequestSummary[]>([]);
-	const [loading, setLoading] = useState(true);
-	const [error, setError] = useState<string | null>(null);
+	const [generation, setGeneration] = useState(0);
 
-	const fetchList = useCallback(async () => {
-		setLoading(true);
-		setError(null);
-		try {
-			const list = await queryMaintenanceRequests(50, null);
-			setRequests(list);
-		} catch (e) {
-			setError(e instanceof Error ? e.message : "Failed to load maintenance requests");
-			setRequests([]);
-		} finally {
-			setLoading(false);
-		}
-	}, []);
+	const { data, loading, error } = useCachedAsyncData(fetchMaintenanceNodes, [generation], {
+		key: `${CACHE_KEY}:${generation}`,
+	});
 
-	useEffect(() => {
-		fetchList();
-	}, [fetchList]);
+	const refetch = useCallback(() => {
+		clearCacheEntry(`${CACHE_KEY}:${generation}`);
+		setGeneration((g) => g + 1);
+	}, [generation]);
 
-	return { requests, loading, error, refetch: fetchList };
+	return { requests: data ?? [], loading, error, refetch };
 }

package/dist/force-app/main/default/webapplications/propertyrentalapp/src/hooks/usePropertyDetail.ts

@@ -1,99 +1,63 @@
 /**
- * Fetches Property_Listing__c by id, then related Property__c, images, costs, and features.
+ * Fetches Property__c by id with all related data (images, costs, features, listings)
+ * in a single GraphQL query.
  */
-import { useState, useEffect, useCallback } from "react";
+import { useState, useCallback } from "react";
 import {
+	fetchPropertyDetailById,
 	fetchListingById,
-	fetchPropertyById,
-	fetchImagesByPropertyId,
-	fetchCostsByPropertyId,
-	fetchFeaturesByPropertyId,
-	type ListingDetail,
-	type PropertyDetail,
-	type PropertyImageRecord,
-	type PropertyCostRecord,
-	type PropertyFeatureRecord,
+	type PropertyDetailNode,
 } from "@/api/properties/propertyDetailGraphQL";
+import {
+	useCachedAsyncData,
+	clearCacheEntry,
+} from "@/features/object-search/hooks/useCachedAsyncData";
 
 export interface PropertyDetailState {
-	listing: ListingDetail | null;
-	property: PropertyDetail | null;
-	images: PropertyImageRecord[];
-	costs: PropertyCostRecord[];
-	features: PropertyFeatureRecord[];
+	property: PropertyDetailNode | null;
 	loading: boolean;
 	error: string | null;
 }
 
+const CACHE_KEY_PREFIX = "property-detail";
+
+async function fetchDetail(id: string): Promise<PropertyDetailNode | null> {
+	// First try directly as a Property__c ID (common path).
+	const detail = await fetchPropertyDetailById(id);
+	if (detail) return detail;
+
+	// Fall back: treat as a Property_Listing__c ID and resolve to its Property__c.
+	const listing = await fetchListingById(id);
+	const propertyId = listing?.Property__c?.value ?? null;
+	if (!propertyId) return null;
+	return fetchPropertyDetailById(propertyId);
+}
+
 export function usePropertyDetail(
-	listingId: string | undefined,
+	id: string | undefined,
 ): PropertyDetailState & { refetch: () => void } {
-	const [listing, setListing] = useState<ListingDetail | null>(null);
-	const [property, setProperty] = useState<PropertyDetail | null>(null);
-	const [images, setImages] = useState<PropertyImageRecord[]>([]);
-	const [costs, setCosts] = useState<PropertyCostRecord[]>([]);
-	const [features, setFeatures] = useState<PropertyFeatureRecord[]>([]);
-	const [loading, setLoading] = useState(true);
-	const [error, setError] = useState<string | null>(null);
+	const [generation, setGeneration] = useState(0);
+	const trimmedId = id?.trim() ?? "";
+	const cacheKey = `${CACHE_KEY_PREFIX}:${trimmedId}:${generation}`;
 
-	const load = useCallback(async () => {
-		if (!listingId?.trim()) {
-			setListing(null);
-			setProperty(null);
-			setImages([]);
-			setCosts([]);
-			setFeatures([]);
-			setLoading(false);
-			setError(null);
-			return;
-		}
-		setLoading(true);
-		setError(null);
-		try {
-			const listingData = await fetchListingById(listingId);
-			setListing(listingData ?? null);
-			if (!listingData?.propertyId) {
-				setProperty(null);
-				setImages([]);
-				setCosts([]);
-				setFeatures([]);
-				setLoading(false);
-				return;
-			}
-			const [propertyData, imagesData, costsData, featuresData] = await Promise.all([
-				fetchPropertyById(listingData.propertyId),
-				fetchImagesByPropertyId(listingData.propertyId),
-				fetchCostsByPropertyId(listingData.propertyId),
-				fetchFeaturesByPropertyId(listingData.propertyId),
-			]);
-			setProperty(propertyData ?? null);
-			setImages(imagesData ?? []);
-			setCosts(costsData ?? []);
-			setFeatures(featuresData ?? []);
-		} catch (e) {
-			setError(e instanceof Error ? e.message : String(e));
-			setListing(null);
-			setProperty(null);
-			setImages([]);
-			setCosts([]);
-			setFeatures([]);
-		} finally {
-			setLoading(false);
-		}
-	}, [listingId]);
+	const { data, loading, error } = useCachedAsyncData(
+		() => {
+			if (!trimmedId) return Promise.resolve(null);
+			return fetchDetail(trimmedId);
+		},
+		[trimmedId, generation],
+		{ key: cacheKey },
+	);
 
-	useEffect(() => {
-		load();
-	}, [load]);
+	const refetch = useCallback(() => {
+		clearCacheEntry(cacheKey);
+		setGeneration((g) => g + 1);
+	}, [cacheKey]);
 
 	return {
-		listing,
-		property,
-		images,
-		costs,
-		features,
+		property: data ?? null,
 		loading,
 		error,
-		refetch: load,
+		refetch,
 	};
 }

package/dist/force-app/main/default/webapplications/propertyrentalapp/src/hooks/usePropertyMapMarkers.ts

@@ -1,21 +1,17 @@
 /**
- * Fetches property addresses for the current page of results only, geocodes them in parallel,
- * and returns map markers (one pin per property in the current window).
+ * Builds map markers from search result nodes. Uses coordinates when available,
+ * falls back to geocoding addresses for properties missing coordinates.
  */
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { fetchPropertyAddresses } from "@/api/properties/propertyDetailGraphQL";
 import { geocodeAddress, getStateZipFromAddress } from "@/utils/geocode";
-import { getPropertyIdFromRecord } from "@/hooks/usePropertyPrimaryImages";
-import type { SearchResultRecord } from "@/types/searchResults.js";
+import type { PropertySearchNode } from "@/api/properties/propertySearchService";
 import type { MapMarker } from "@/components/properties/PropertyMap";
 
-function getListingName(record: {
-	fields?: Record<string, { value?: unknown; displayValue?: string | null }>;
-}): string {
-	const f = record.fields?.Name;
-	if (!f || typeof f !== "object") return "Property";
-	if (f.displayValue != null && f.displayValue !== "") return String(f.displayValue);
-	if (f.value != null && typeof f.value === "string") return f.value;
+function getListingName(node: PropertySearchNode): string {
+	if (node.Name?.displayValue != null && node.Name.displayValue !== "")
+		return node.Name.displayValue;
+	if (node.Name?.value != null && node.Name.value !== "") return node.Name.value;
 	return "Property";
 }
 
@@ -28,13 +24,9 @@ function toFiniteNumber(value: unknown): number | null {
 	return null;
 }
 
-function getCoordinatesFromRecord(record: {
-	fields?: Record<string, { value?: unknown }>;
-}): { lat: number; lng: number } | null {
-	const latRaw = record.fields?.["Property__r.Coordinates__Latitude__s"]?.value;
-	const lngRaw = record.fields?.["Property__r.Coordinates__Longitude__s"]?.value;
-	const lat = toFiniteNumber(latRaw);
-	const lng = toFiniteNumber(lngRaw);
+function getCoordinatesFromNode(node: PropertySearchNode): { lat: number; lng: number } | null {
+	const lat = toFiniteNumber(node.Coordinates__Latitude__s?.value);
+	const lng = toFiniteNumber(node.Coordinates__Longitude__s?.value);
 	if (lat == null || lng == null) return null;
 	return { lat, lng };
 }
@@ -75,48 +67,50 @@ function spreadDuplicateMarkers(markers: MapMarker[]): MapMarker[] {
 	return result;
 }
 
-export function usePropertyMapMarkers(results: SearchResultRecord[]): {
+export function usePropertyMapMarkers(results: PropertySearchNode[]): {
 	markers: MapMarker[];
 	loading: boolean;
 } {
 	const [markers, setMarkers] = useState<MapMarker[]>([]);
 	const [loading, setLoading] = useState(false);
 
-	// Only the current page / current window of results
-	const propertyIds = results
-		.map((r) => r?.record && getPropertyIdFromRecord(r.record))
-		.filter((id): id is string => Boolean(id));
+	const propertyIds = results.map((r) => r.Id).filter(Boolean);
 	const propertyIdToLabel = new Map<string, string>();
-	for (const r of results) {
-		if (!r?.record) continue;
-		const id = getPropertyIdFromRecord(r.record);
-		if (id && !propertyIdToLabel.has(id)) {
-			propertyIdToLabel.set(id, getListingName(r.record));
+	for (const node of results) {
+		if (!propertyIdToLabel.has(node.Id)) {
+			propertyIdToLabel.set(node.Id, getListingName(node));
 		}
 	}
+	const idsKey = [...new Set(propertyIds)].join(",");
 
+	const resultsRef = useRef(results);
+	const labelMapRef = useRef(propertyIdToLabel);
 	useEffect(() => {
-		if (propertyIds.length === 0) {
+		resultsRef.current = results;
+		labelMapRef.current = propertyIdToLabel;
+	});
+
+	useEffect(() => {
+		const uniqIds = idsKey === "" ? [] : idsKey.split(",");
+		if (uniqIds.length === 0) {
 			setMarkers([]);
 			setLoading(false);
 			return;
 		}
 		let cancelled = false;
 		setLoading(true);
-		const uniqIds = [...new Set(propertyIds)];
+		const currentLabels = labelMapRef.current;
 		const directMarkers: MapMarker[] = [];
 		const missingIds: string[] = [];
-		for (const r of results) {
-			if (!r?.record) continue;
-			const id = getPropertyIdFromRecord(r.record);
-			if (!id || !uniqIds.includes(id)) continue;
-			const coords = getCoordinatesFromRecord(r.record);
+		for (const node of results) {
+			if (!uniqIds.includes(node.Id)) continue;
+			const coords = getCoordinatesFromNode(node);
 			if (coords) {
 				directMarkers.push({
 					lat: coords.lat,
 					lng: coords.lng,
-					label: propertyIdToLabel.get(id) ?? "Property",
-					propertyId: id,
+					label: propertyIdToLabel.get(node.Id) ?? "Property",
+					propertyId: node.Id,
 				});
 			}
 		}
@@ -140,7 +134,6 @@ export function usePropertyMapMarkers(results: SearchResultRecord[]): {
 					setLoading(false);
 					return;
 				}
-				// Geocode all addresses in parallel; fallback to City, State Zip if full address fails
 				Promise.all(
 					toGeocode.map(async ([id, address]) => {
 						const normalized = address.replace(/\n/g, ", ").trim();
@@ -161,7 +154,7 @@ export function usePropertyMapMarkers(results: SearchResultRecord[]): {
 							.map(({ id, coords }) => ({
 								lat: coords.lat,
 								lng: coords.lng,
-								label: propertyIdToLabel.get(id) ?? "Property",
+								label: currentLabels.get(id) ?? "Property",
 								propertyId: id,
 							}));
 						setMarkers(spreadDuplicateMarkers([...directMarkers, ...geocoded]));
@@ -182,7 +175,7 @@ export function usePropertyMapMarkers(results: SearchResultRecord[]): {
 		return () => {
 			cancelled = true;
 		};
-	}, [propertyIds.join(",")]);
+	}, [idsKey]);
 
 	return { markers, loading };
 }

package/dist/force-app/main/default/webapplications/propertyrentalapp/src/hooks/useWeather.ts

@@ -3,6 +3,7 @@
  * Detects user location via Geolocation API; falls back to San Francisco.
  */
 import { useState, useEffect } from "react";
+import { useCachedAsyncData } from "@/features/object-search/hooks/useCachedAsyncData";
 
 const FALLBACK = {
 	LAT: 37.7749,
@@ -268,17 +269,14 @@ interface GeoPosition {
 }
 
 function useGeolocation(): GeoPosition {
-	const [position, setPosition] = useState<GeoPosition>({
+	const [position, setPosition] = useState<GeoPosition>(() => ({
 		latitude: FALLBACK.LAT,
 		longitude: FALLBACK.LNG,
-		resolved: false,
-	});
+		resolved: typeof navigator === "undefined" || !navigator.geolocation,
+	}));
 
 	useEffect(() => {
-		if (!navigator.geolocation) {
-			setPosition((prev) => ({ ...prev, resolved: true }));
-			return;
-		}
+		if (!navigator.geolocation) return;
 		navigator.geolocation.getCurrentPosition(
 			(pos) =>
 				setPosition({
@@ -299,29 +297,15 @@ export function useWeather(lat?: number | null, lng?: number | null) {
 	const longitude = lng ?? geo.longitude;
 	const canFetch = lat != null || geo.resolved;
 
-	const [data, setData] = useState<WeatherData | null>(null);
-	const [loading, setLoading] = useState(true);
-	const [error, setError] = useState<string | null>(null);
+	const cached = useCachedAsyncData(
+		() => fetchWeather(latitude, longitude),
+		[latitude, longitude, canFetch],
+		{ key: `weather:${latitude},${longitude}:${canFetch}`, ttl: 300_000 },
+	);
 
-	useEffect(() => {
-		if (!canFetch) return;
-		let cancelled = false;
-		setLoading(true);
-		setError(null);
-		fetchWeather(latitude, longitude)
-			.then((result) => {
-				if (!cancelled) setData(result);
-			})
-			.catch((err) => {
-				if (!cancelled) setError(err instanceof Error ? err.message : "Failed to load weather");
-			})
-			.finally(() => {
-				if (!cancelled) setLoading(false);
-			});
-		return () => {
-			cancelled = true;
-		};
-	}, [latitude, longitude, canFetch]);
+	if (!canFetch) {
+		return { data: null, loading: true, error: null };
+	}
 
-	return { data, loading, error };
+	return { data: cached.data, loading: cached.loading, error: cached.error };
 }