@salesforce/webapp-template-app-react-sample-b2x-experimental 1.68.0 → 1.69.0

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/hooks/useObjectSearchData.ts

@@ -0,0 +1,395 @@
+/**
+ * Object Search Data Hooks
+ *
+ * - useObjectListMetadata: single source for list-view metadata (filters → columns + picklists). Use in list pages to avoid duplicate state and API calls.
+ * - useObjectColumns / useObjectFilters: thin wrappers over useObjectListMetadata for backward compatibility.
+ * - getSharedFilters: module-level deduplication for getObjectListFilters across hook instances.
+ */
+
+import { useState, useEffect, useRef, useMemo } from "react";
+import { objectInfoService, type SearchParams } from "../api/objectInfoService";
+import type {
+	Column,
+	SearchResultRecord,
+	SearchResultRecordData,
+} from "../types/search/searchResults";
+import type { Filter, FilterCriteria } from "../types/filters/filters";
+import type { PicklistValue } from "../types/filters/picklist";
+import { createFiltersKey } from "../utils/cacheUtils";
+
+// --- Shared filters cache (deduplicates getObjectListFilters across useObjectColumns + useObjectFilters) ---
+const sharedFiltersCache = new Map<string, Filter[]>();
+const sharedFiltersInFlight = new Map<string, Promise<Filter[]>>();
+
+/**
+ * Returns filters for the object, deduplicating the API call across hook instances.
+ * Does not pass abort signal to the API so the shared request is not aborted when
+ * one consumer's effect cleans up (e.g. React Strict Mode); callers still guard with isCancelled.
+ */
+function getSharedFilters(objectApiName: string): Promise<Filter[]> {
+	const cached = sharedFiltersCache.get(objectApiName);
+	if (cached) return Promise.resolve(cached);
+	const inFlight = sharedFiltersInFlight.get(objectApiName);
+	if (inFlight) return inFlight;
+	const promise = objectInfoService
+		.getObjectListFilters(objectApiName)
+		.then((filters) => {
+			sharedFiltersCache.set(objectApiName, filters);
+			sharedFiltersInFlight.delete(objectApiName);
+			return filters;
+		})
+		.catch((err) => {
+			sharedFiltersInFlight.delete(objectApiName);
+			throw err;
+		});
+	sharedFiltersInFlight.set(objectApiName, promise);
+	return promise;
+}
+
+// --- Shared Types ---
+export interface FiltersData {
+	filters: Filter[];
+	picklistValues: Record<string, PicklistValue[]>;
+	loading: boolean;
+	error: string | null;
+}
+
+/**
+ * Derives column definitions from filter definitions for list/result UI.
+ */
+function filtersToColumns(filters: Filter[]): Column[] {
+	return filters.map((f) => ({
+		fieldApiName: f.targetFieldPath,
+		label: f.label,
+		searchable: true,
+		sortable: true,
+	}));
+}
+
+export interface ObjectListMetadata {
+	columns: Column[];
+	filters: Filter[];
+	picklistValues: Record<string, PicklistValue[]>;
+	loading: boolean;
+	error: string | null;
+}
+
+/**
+ * Single hook for list-view metadata: filters (shared API), derived columns, and picklist values.
+ * Use this in list/search pages to avoid duplicate useObjectColumns + useObjectFilters and duplicate state.
+ */
+export function useObjectListMetadata(objectApiName: string | null): ObjectListMetadata {
+	const [state, setState] = useState<{
+		columns: Column[];
+		filters: Filter[];
+		picklistValues: Record<string, PicklistValue[]>;
+		loading: boolean;
+		error: string | null;
+	}>({
+		columns: [],
+		filters: [],
+		picklistValues: {},
+		loading: true,
+		error: null,
+	});
+
+	useEffect(() => {
+		if (!objectApiName) {
+			setState((s) => ({ ...s, loading: false, error: "Invalid object" }));
+			return;
+		}
+
+		let isCancelled = false;
+		const ac = new AbortController();
+
+		const run = async () => {
+			setState((s) => ({ ...s, loading: true, error: null }));
+			try {
+				const filters = await getSharedFilters(objectApiName!);
+				if (isCancelled) return;
+
+				const selectFilters = filters.filter((f) => f.affordance?.toLowerCase() === "select");
+				const picklistPromises = selectFilters.map((f) =>
+					objectInfoService
+						.getPicklistValues(objectApiName!, f.targetFieldPath, undefined, ac.signal)
+						.then((values) => ({ fieldPath: f.targetFieldPath, values }))
+						.catch((err) => {
+							if (err?.name === "AbortError") throw err;
+							return { fieldPath: f.targetFieldPath, values: [] as PicklistValue[] };
+						}),
+				);
+				const picklistResults = await Promise.all(picklistPromises);
+				if (isCancelled) return;
+
+				const picklistValues: Record<string, PicklistValue[]> = {};
+				picklistResults.forEach(({ fieldPath, values }) => {
+					picklistValues[fieldPath] = values;
+				});
+
+				setState({
+					columns: filtersToColumns(filters),
+					filters,
+					picklistValues,
+					loading: false,
+					error: null,
+				});
+			} catch (err) {
+				if (isCancelled || (err instanceof Error && err.name === "AbortError")) return;
+				setState((s) => ({
+					...s,
+					columns: [],
+					filters: [],
+					picklistValues: {},
+					loading: false,
+					error: "Failed to load list metadata",
+				}));
+			}
+		};
+
+		run();
+		return () => {
+			isCancelled = true;
+			ac.abort();
+		};
+	}, [objectApiName]);
+
+	return state;
+}
+
+/**
+ * Hook: useObjectColumns
+ * Thin wrapper over useObjectListMetadata for backward compatibility.
+ */
+export function useObjectColumns(objectApiName: string | null) {
+	const { columns, loading, error } = useObjectListMetadata(objectApiName);
+	return {
+		columns: objectApiName ? columns : [],
+		columnsLoading: loading,
+		columnsError: error,
+	};
+}
+
+/**
+ * Hook: useObjectSearchResults
+ *
+ * Fetches search results for a specific object based on the provided query parameters.
+ * Maintains the *latest* result set for the object in state to prevent redundant
+ * network requests when the component re-renders with the same parameters.
+ * Includes debouncing for search queries (but not pagination).
+ *
+ * @param objectApiName - The API name of the object to search
+ * @param searchQuery - The search query string
+ * @param searchPageSize - Number of results per page (default: 50)
+ * @param searchPageToken - Pagination token (default: '0')
+ * @param filters - Array of filter criteria to apply (default: [])
+ * @param sortBy - Sort field and direction (default: 'relevance')
+ * @returns Object containing results array, pagination tokens, loading state, and error state
+ *
+ * @example
+ * ```tsx
+ * const { results, nextPageToken, previousPageToken, currentPageToken, resultsLoading, resultsError } = useObjectSearchResults(
+ *   'Account',
+ *   'test query',
+ *   25,
+ *   '0',
+ *   [{ objectApiName: 'Account', fieldPath: 'Name', operator: 'contains', values: ['test'] }]
+ * );
+ * ```
+ */
+export function useObjectSearchResults(
+	objectApiName: string | null,
+	searchQuery: string,
+	searchPageSize: number = 50,
+	searchPageToken: string = "0",
+	filters: FilterCriteria[] = [],
+	sortBy: string = "relevance",
+) {
+	const [resultsCache, setResultsCache] = useState<
+		Record<
+			string,
+			{
+				results: SearchResultRecord[];
+				query: string;
+				pageToken: string;
+				pageSize: number;
+				filtersKey: string;
+				sortBy: string;
+				nextPageToken: string | null;
+				previousPageToken: string | null;
+				currentPageToken: string;
+			}
+		>
+	>({});
+	const [loading, setLoading] = useState<Record<string, boolean>>({});
+	const [error, setError] = useState<Record<string, string | null>>({});
+
+	const debounceTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const abortControllerRef = useRef<AbortController | null>(null);
+	const resultsCacheRef = useRef(resultsCache);
+
+	const filtersKey = useMemo(() => {
+		const filtersArray = Array.isArray(filters) ? filters : [];
+		return createFiltersKey(filtersArray);
+	}, [filters]);
+
+	useEffect(() => {
+		resultsCacheRef.current = resultsCache;
+	}, [resultsCache]);
+
+	useEffect(() => {
+		if (!objectApiName || !searchQuery.trim()) {
+			return;
+		}
+
+		let isCancelled = false;
+		const abortController = new AbortController();
+
+		if (abortControllerRef.current) {
+			abortControllerRef.current.abort();
+		}
+		abortControllerRef.current = abortController;
+
+		if (debounceTimeout.current) {
+			clearTimeout(debounceTimeout.current);
+			debounceTimeout.current = null;
+		}
+
+		const cached = resultsCacheRef.current[objectApiName];
+		if (
+			!abortController.signal.aborted &&
+			cached &&
+			cached.query === searchQuery &&
+			cached.pageToken === searchPageToken &&
+			cached.pageSize === searchPageSize &&
+			cached.filtersKey === filtersKey &&
+			cached.sortBy === sortBy
+		) {
+			return;
+		}
+
+		if (abortController.signal.aborted) {
+			return;
+		}
+
+		const fetchResults = async () => {
+			setLoading((prev) => ({ ...prev, [objectApiName]: true }));
+			setError((prev) => ({ ...prev, [objectApiName]: null }));
+
+			try {
+				const searchParams: SearchParams = {
+					sortBy: sortBy === "relevance" ? "" : sortBy,
+					filters: filters,
+					pageSize: searchPageSize,
+					pageToken: searchPageToken,
+				};
+
+				const keywordSearchResult = await objectInfoService.searchResults(
+					searchQuery,
+					objectApiName,
+					searchParams,
+					abortController.signal,
+				);
+
+				if (isCancelled || abortController.signal.aborted) return;
+
+				const normalizedRecords = keywordSearchResult.records.map((r) => ({
+					record: r.record as SearchResultRecordData,
+					highlightInfo: r.highlightInfo,
+					searchInfo: r.searchInfo,
+				}));
+
+				const nextPageToken: string | null = keywordSearchResult.nextPageToken ?? null;
+				const previousPageToken: string | null = keywordSearchResult.previousPageToken ?? null;
+
+				setResultsCache((prev): typeof prev => ({
+					...prev,
+					[objectApiName]: {
+						results: normalizedRecords,
+						query: searchQuery,
+						pageToken: searchPageToken,
+						pageSize: searchPageSize,
+						filtersKey: filtersKey,
+						sortBy,
+						nextPageToken,
+						previousPageToken,
+						currentPageToken: keywordSearchResult.currentPageToken,
+					},
+				}));
+			} catch (err) {
+				if (isCancelled || (err instanceof Error && err.name === "AbortError")) {
+					return;
+				}
+				setError((prev) => ({ ...prev, [objectApiName]: "Unable to load search results" }));
+				// Cache empty result so we skip refetch on remount (avoid infinite loop on API error)
+				setResultsCache((prev) => ({
+					...prev,
+					[objectApiName]: {
+						results: [],
+						query: searchQuery,
+						pageToken: searchPageToken,
+						pageSize: searchPageSize,
+						filtersKey: filtersKey,
+						sortBy,
+						nextPageToken: null,
+						previousPageToken: null,
+						currentPageToken: searchPageToken,
+					},
+				}));
+			} finally {
+				if (!isCancelled) {
+					setLoading((prev) => ({ ...prev, [objectApiName]: false }));
+				}
+			}
+		};
+
+		if (searchPageToken === "0") {
+			debounceTimeout.current = setTimeout(() => {
+				fetchResults();
+			}, 300);
+		} else {
+			fetchResults();
+		}
+
+		return () => {
+			isCancelled = true;
+			abortController.abort();
+			if (debounceTimeout.current) {
+				clearTimeout(debounceTimeout.current);
+				debounceTimeout.current = null;
+			}
+			if (abortControllerRef.current === abortController) {
+				abortControllerRef.current = null;
+			}
+		};
+	}, [objectApiName, searchQuery, searchPageSize, searchPageToken, filtersKey, sortBy]);
+
+	return {
+		results: objectApiName ? resultsCache[objectApiName]?.results || [] : [],
+		nextPageToken: objectApiName ? resultsCache[objectApiName]?.nextPageToken || null : null,
+		previousPageToken: objectApiName
+			? resultsCache[objectApiName]?.previousPageToken || null
+			: null,
+		currentPageToken: objectApiName ? resultsCache[objectApiName]?.currentPageToken || "0" : "0",
+		resultsLoading: objectApiName ? loading[objectApiName] || false : false,
+		resultsError: objectApiName ? error[objectApiName] || null : null,
+	};
+}
+
+/**
+ * Hook: useObjectFilters
+ * Thin wrapper over useObjectListMetadata for backward compatibility.
+ */
+export function useObjectFilters(objectApiName: string | null) {
+	const { filters, picklistValues, loading, error } = useObjectListMetadata(objectApiName);
+	const filtersData: Record<string, FiltersData> = objectApiName
+		? {
+				[objectApiName]: {
+					filters,
+					picklistValues,
+					loading,
+					error,
+				},
+			}
+		: {};
+	return { filtersData };
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/hooks/usePropertyAddresses.ts

@@ -0,0 +1,36 @@
+/**
+ * Fetches Address__c for each property id from search results.
+ * Returns propertyId -> address for display on listing cards.
+ */
+import { useState, useEffect } from "react";
+import { fetchPropertyAddresses } from "@/api/propertyDetailGraphQL";
+import { getPropertyIdFromRecord } from "./usePropertyPrimaryImages";
+import type { SearchResultRecord } from "@/types/search/searchResults";
+
+export function usePropertyAddresses(results: SearchResultRecord[]): Record<string, string> {
+	const [map, setMap] = useState<Record<string, string>>({});
+
+	const propertyIds = results
+		.map((r) => r?.record && getPropertyIdFromRecord(r.record))
+		.filter((id): id is string => Boolean(id));
+
+	useEffect(() => {
+		if (propertyIds.length === 0) {
+			setMap({});
+			return;
+		}
+		let cancelled = false;
+		fetchPropertyAddresses([...new Set(propertyIds)])
+			.then((next) => {
+				if (!cancelled) setMap(next);
+			})
+			.catch(() => {
+				if (!cancelled) setMap({});
+			});
+		return () => {
+			cancelled = true;
+		};
+	}, [propertyIds.join(",")]);
+
+	return map;
+}

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

@@ -0,0 +1,99 @@
+/**
+ * Fetches Property_Listing__c by id, then related Property__c, images, costs, and features.
+ */
+import { useState, useEffect, useCallback } from "react";
+import {
+	fetchListingById,
+	fetchPropertyById,
+	fetchImagesByPropertyId,
+	fetchCostsByPropertyId,
+	fetchFeaturesByPropertyId,
+	type ListingDetail,
+	type PropertyDetail,
+	type PropertyImageRecord,
+	type PropertyCostRecord,
+	type PropertyFeatureRecord,
+} from "@/api/propertyDetailGraphQL";
+
+export interface PropertyDetailState {
+	listing: ListingDetail | null;
+	property: PropertyDetail | null;
+	images: PropertyImageRecord[];
+	costs: PropertyCostRecord[];
+	features: PropertyFeatureRecord[];
+	loading: boolean;
+	error: string | null;
+}
+
+export function usePropertyDetail(
+	listingId: 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 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]);
+
+	useEffect(() => {
+		load();
+	}, [load]);
+
+	return {
+		listing,
+		property,
+		images,
+		costs,
+		features,
+		loading,
+		error,
+		refetch: load,
+	};
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/hooks/usePropertyListingSearch.ts

@@ -0,0 +1,75 @@
+/**
+ * Property Listing search via GraphQL. Shows all when no search term.
+ */
+import { useState, useEffect, useRef, useCallback } from "react";
+import { queryPropertyListingsGraphQL } from "@/api/propertyListingGraphQL";
+import type { SearchResultRecord } from "@/types/search/searchResults";
+
+export function usePropertyListingSearch(searchQuery: string, pageSize: number, pageToken: string) {
+	const [results, setResults] = useState<SearchResultRecord[]>([]);
+	const [nextPageToken, setNextPageToken] = useState<string | null>(null);
+	const [previousPageToken, setPreviousPageToken] = useState<string | null>(null);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	const abortControllerRef = useRef<AbortController | null>(null);
+	const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+	const fetchResults = useCallback(async () => {
+		const ac = new AbortController();
+		abortControllerRef.current = ac;
+		setLoading(true);
+		setError(null);
+		try {
+			const afterCursor = pageToken === "0" || pageToken === "" ? null : pageToken;
+			const result = await queryPropertyListingsGraphQL(
+				searchQuery,
+				pageSize,
+				afterCursor,
+				ac.signal,
+			);
+			if (ac.signal.aborted) return;
+			setResults(result.records);
+			setNextPageToken(result.nextPageToken);
+			setPreviousPageToken(result.previousPageToken);
+		} catch (err) {
+			if (ac.signal.aborted || (err instanceof Error && err.name === "AbortError")) return;
+			setError(err instanceof Error ? err.message : "Unable to load property listings");
+			setResults([]);
+			setNextPageToken(null);
+			setPreviousPageToken(null);
+		} finally {
+			if (!ac.signal.aborted) setLoading(false);
+		}
+	}, [searchQuery, pageSize, pageToken]);
+
+	useEffect(() => {
+		if (debounceRef.current) {
+			clearTimeout(debounceRef.current);
+			debounceRef.current = null;
+		}
+		if (abortControllerRef.current) {
+			abortControllerRef.current.abort();
+		}
+
+		// When on first page, debounce to avoid firing on every keystroke
+		if (pageToken === "0" || pageToken === "") {
+			debounceRef.current = setTimeout(() => fetchResults(), 300);
+		} else {
+			fetchResults();
+		}
+		return () => {
+			if (debounceRef.current) clearTimeout(debounceRef.current);
+			abortControllerRef.current?.abort();
+		};
+	}, [searchQuery, pageSize, pageToken, fetchResults]);
+
+	return {
+		results,
+		nextPageToken,
+		previousPageToken,
+		currentPageToken: pageToken === "" ? "0" : pageToken,
+		resultsLoading: loading,
+		resultsError: error,
+	};
+}

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

@@ -0,0 +1,100 @@
+/**
+ * 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).
+ */
+import { useState, useEffect } from "react";
+import { fetchPropertyAddresses } from "@/api/propertyDetailGraphQL";
+import { geocodeAddress } from "@/utils/geocode";
+import { getPropertyIdFromRecord } from "./usePropertyPrimaryImages";
+import type { SearchResultRecord } from "@/types/search/searchResults";
+import type { MapMarker } from "@/components/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;
+	return "Property";
+}
+
+export function usePropertyMapMarkers(results: SearchResultRecord[]): {
+	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 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));
+		}
+	}
+
+	useEffect(() => {
+		if (propertyIds.length === 0) {
+			setMarkers([]);
+			setLoading(false);
+			return;
+		}
+		let cancelled = false;
+		setLoading(true);
+		const uniqIds = [...new Set(propertyIds)];
+		fetchPropertyAddresses(uniqIds)
+			.then((idToAddress) => {
+				if (cancelled) return;
+				const toGeocode = Object.entries(idToAddress).filter(
+					([, addr]) => addr != null && addr.trim() !== "",
+				);
+				if (toGeocode.length === 0) {
+					setMarkers([]);
+					setLoading(false);
+					return;
+				}
+				// Geocode all addresses in parallel (only current window of results)
+				Promise.all(
+					toGeocode.map(([id, address]) =>
+						geocodeAddress(address.replace(/\n/g, ", ")).then((coords) =>
+							coords ? { id, coords } : null,
+						),
+					),
+				)
+					.then((resolved) => {
+						if (cancelled) return;
+						const nextMarkers: MapMarker[] = resolved
+							.filter((r): r is { id: string; coords: { lat: number; lng: number } } => r != null)
+							.map(({ id, coords }) => ({
+								lat: coords.lat,
+								lng: coords.lng,
+								label: propertyIdToLabel.get(id) ?? "Property",
+							}));
+						setMarkers(nextMarkers);
+					})
+					.catch(() => {
+						if (!cancelled) setMarkers([]);
+					})
+					.finally(() => {
+						if (!cancelled) setLoading(false);
+					});
+			})
+			.catch(() => {
+				if (!cancelled) {
+					setMarkers([]);
+					setLoading(false);
+				}
+			});
+		return () => {
+			cancelled = true;
+		};
+	}, [propertyIds.join(",")]);
+
+	return { markers, loading };
+}