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

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, 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,23 +67,18 @@ 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(",");
@@ -112,21 +99,18 @@ export function usePropertyMapMarkers(results: SearchResultRecord[]): {
 		}
 		let cancelled = false;
 		setLoading(true);
-		const currentResults = resultsRef.current;
 		const currentLabels = labelMapRef.current;
 		const directMarkers: MapMarker[] = [];
 		const missingIds: string[] = [];
-		for (const r of currentResults) {
-			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: currentLabels.get(id) ?? "Property",
-					propertyId: id,
+					label: propertyIdToLabel.get(node.Id) ?? "Property",
+					propertyId: node.Id,
 				});
 			}
 		}

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,
@@ -296,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 };
 }

package/dist/force-app/main/default/webapplications/propertyrentalapp/src/pages/Application.tsx

@@ -1,19 +1,16 @@
 import { useSearchParams, Link } from "react-router";
-import { useCallback, useEffect, useState, type ChangeEvent, type SubmitEvent } from "react";
+import { useCallback, useState, type ChangeEvent, type SubmitEvent } from "react";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import { Label } from "../components/ui/label";
 import { Card, CardContent } from "../components/ui/card";
 import { Skeleton } from "../components/ui/skeleton";
 import { SkeletonField } from "@/components/SkeletonPrimitives";
-import {
-	fetchListingById,
-	fetchPropertyById,
-	fetchPrimaryImagesByPropertyIds,
-} from "@/api/properties/propertyDetailGraphQL";
+import { fetchPropertyDetailById } from "@/api/properties/propertyDetailGraphQL";
 import { createApplicationRecord } from "@/api/applications/applicationApi";
 import { useAuth } from "@/features/authentication/context/AuthContext";
 import { fetchUserContact } from "../features/authentication/api/userProfileApi";
+import { useCachedAsyncData } from "@/features/object-search/hooks/useCachedAsyncData";
 
 function ApplicationSkeleton() {
 	return (
@@ -47,15 +44,40 @@ function ApplicationSkeleton() {
 export default function Application() {
 	const { user } = useAuth();
 	const [searchParams] = useSearchParams();
-	const listingId = searchParams.get("listingId") ?? "";
+	const propertyId = searchParams.get("propertyId") ?? "";
 
-	const [listingName, setListingName] = useState<string | null>(null);
-	const [propertyAddress, setPropertyAddress] = useState<string | null>(null);
-	const [propertyId, setPropertyId] = useState<string | null>(null);
-	const [propertyImageUrl, setPropertyImageUrl] = useState<string | null>(null);
-	const [contactId, setContactId] = useState<string | null>(null);
-	const [loading, setLoading] = useState(!!listingId);
-	const [loadError, setLoadError] = useState<string | null>(null);
+	const { data: contactData } = useCachedAsyncData(
+		() => {
+			if (!user?.id) return Promise.resolve(null);
+			return fetchUserContact<{ ContactId?: string }>(user.id);
+		},
+		[user?.id],
+		{ key: `contact:${user?.id ?? ""}`, ttl: 300_000 },
+	);
+	const contactId = contactData?.ContactId ?? null;
+
+	const {
+		data: property,
+		loading,
+		error: loadError,
+	} = useCachedAsyncData(
+		() => {
+			if (!propertyId?.trim()) return Promise.resolve(null);
+			return fetchPropertyDetailById(propertyId);
+		},
+		[propertyId],
+		{ key: `app-property:${propertyId}` },
+	);
+
+	const listing = property?.Property_Listings__r?.edges?.[0]?.node ?? null;
+	const images = (property?.Property_Images__r?.edges ?? []).flatMap((e) =>
+		e?.node ? [e.node] : [],
+	);
+	const primaryImage =
+		images.find((i) => i.Image_Type__c?.value === "Primary") ?? images[0] ?? null;
+	const propertyImageUrl = primaryImage?.Image_URL__c?.value ?? null;
+	const propertyName = listing?.Name?.value ?? property?.Name?.value ?? null;
+	const propertyAddress = property?.Address__c?.value ?? null;
 
 	const [moveInDate, setMoveInDate] = useState("");
 	const [employment, setEmployment] = useState("");
@@ -65,61 +87,6 @@ export default function Application() {
 	const [submitError, setSubmitError] = useState<string | null>(null);
 	const [submittedId, setSubmittedId] = useState<string | null>(null);
 
-	useEffect(() => {
-		if (!user?.id) return;
-		let mounted = true;
-		fetchUserContact<{ ContactId?: string }>(user.id)
-			.then((contact) => {
-				if (mounted) setContactId(contact.ContactId ?? null);
-			})
-			.catch((err) => {
-				if (mounted) console.error("Failed to fetch contact ID", err);
-			});
-		return () => {
-			mounted = false;
-		};
-	}, [user]);
-
-	useEffect(() => {
-		if (!listingId?.trim()) {
-			setLoading(false);
-			return;
-		}
-		let cancelled = false;
-		setLoadError(null);
-		(async () => {
-			try {
-				const listing = await fetchListingById(listingId);
-				if (cancelled) return;
-				if (!listing) {
-					setLoadError("Listing not found.");
-					setLoading(false);
-					return;
-				}
-				setListingName(listing.name);
-				if (listing.propertyId) {
-					setPropertyId(listing.propertyId);
-					const [property, primaryImages] = await Promise.all([
-						fetchPropertyById(listing.propertyId),
-						fetchPrimaryImagesByPropertyIds([listing.propertyId]),
-					]);
-					if (cancelled) return;
-					setPropertyAddress(property?.address ?? null);
-					setPropertyImageUrl(primaryImages[listing.propertyId] ?? null);
-				}
-			} catch (e) {
-				if (!cancelled) {
-					setLoadError(e instanceof Error ? e.message : "Failed to load listing.");
-				}
-			} finally {
-				if (!cancelled) setLoading(false);
-			}
-		})();
-		return () => {
-			cancelled = true;
-		};
-	}, [listingId]);
-
 	const handleSubmit = useCallback(
 		async (e: SubmitEvent<HTMLFormElement>) => {
 			e.preventDefault();
@@ -177,10 +144,10 @@ export default function Application() {
 		<div className="mx-auto max-w-[900px]">
 			<div className="mb-4">
 				<Link
-					to={listingId ? `/property/${listingId}` : "/properties"}
+					to={propertyId ? `/property/${propertyId}` : "/properties"}
 					className="text-sm text-primary no-underline hover:underline"
 				>
-					{listingId ? "← Back to listing" : "← Back to search"}
+					{propertyId ? "← Back to listing" : "← Back to search"}
 				</Link>
 			</div>
 			<Card className="mb-6 flex gap-4 rounded-2xl border border-border p-6 shadow-sm">
@@ -193,11 +160,11 @@ export default function Application() {
 				</div>
 				<div className="min-w-0 flex-1">
 					<h2 className="mb-1.5 text-2xl font-semibold text-foreground">
-						{listingName ?? "Apply for a property"}
+						{propertyName ?? "Apply for a property"}
 					</h2>
 					<p className="text-sm text-muted-foreground">
 						{propertyAddress ??
-							(listingId ? (
+							(propertyId ? (
 								<Skeleton className="mt-1 h-4 w-48" />
 							) : (
 								"Select a property from search or listing detail to apply."