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

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

@@ -0,0 +1,51 @@
+/**
+ * Fetches primary image URL for each property id from search results.
+ * Returns a map of propertyId -> imageUrl for use in listing cards.
+ */
+import { useState, useEffect } from "react";
+import { fetchPrimaryImagesByPropertyIds } from "@/api/propertyDetailGraphQL";
+import type { SearchResultRecord } from "@/types/search/searchResults";
+
+export function getPropertyIdFromRecord(record: {
+	fields?: Record<string, { value?: unknown }>;
+}): string | null {
+	const f = record.fields?.Property__c;
+	if (!f || typeof f !== "object") return null;
+	const v = (f as { value?: unknown }).value;
+	return typeof v === "string" ? v : null;
+}
+
+export function usePropertyPrimaryImages(
+	results: SearchResultRecord[],
+): Record<string, string> & { loading: boolean } {
+	const [map, setMap] = useState<Record<string, string>>({});
+	const [loading, setLoading] = useState(false);
+
+	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;
+		setLoading(true);
+		fetchPrimaryImagesByPropertyIds(propertyIds)
+			.then((next) => {
+				if (!cancelled) setMap(next);
+			})
+			.catch(() => {
+				if (!cancelled) setMap({});
+			})
+			.finally(() => {
+				if (!cancelled) setLoading(false);
+			});
+		return () => {
+			cancelled = true;
+		};
+	}, [propertyIds.join(",")]);
+
+	return Object.assign(map, { loading });
+}

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

@@ -0,0 +1,156 @@
+import { useState, useEffect, useRef } from "react";
+import { objectDetailService } from "../api/objectDetailService";
+import type { LayoutResponse } from "../types/recordDetail/recordDetail";
+import type { ObjectInfoResult } from "../types/objectInfo/objectInfo";
+import type { GraphQLRecordNode } from "../api/recordListGraphQLService";
+
+export interface UseRecordDetailLayoutReturn {
+	layout: LayoutResponse | null;
+	record: GraphQLRecordNode | null;
+	objectMetadata: ObjectInfoResult | null;
+	loading: boolean;
+	error: string | null;
+}
+
+export interface UseRecordDetailLayoutParams {
+	objectApiName: string | null;
+	recordId: string | null;
+	recordTypeId?: string | null;
+	/** When provided, skips the fetch and uses this data (avoids duplicate API calls when parent already fetched). Callers should memoize this (e.g. useMemo) to avoid unnecessary effect runs. */
+	initialData?: {
+		layout: LayoutResponse;
+		record: GraphQLRecordNode;
+		objectMetadata: ObjectInfoResult;
+	} | null;
+}
+
+const MAX_CACHE_SIZE = 50;
+/** Cache entries older than this are treated as stale and refetched. */
+const CACHE_TTL_MS = 5 * 60 * 1000;
+
+type CacheEntry = {
+	layout: LayoutResponse;
+	record: GraphQLRecordNode;
+	objectMetadata: ObjectInfoResult;
+	cachedAt: number;
+};
+
+/**
+ * Detail page data: layout (REST), object metadata (GraphQL), single record (GraphQL).
+ *
+ * Calls objectDetailService.getRecordDetail once per objectApiName/recordId/recordTypeId.
+ * Caches result in memory (TTL 5min, max 50 entries). Used by DetailPage and UiApiDetailForm.
+ *
+ * @param objectApiName - Object API name.
+ * @param recordId - Record Id.
+ * @param recordTypeId - Optional record type (default master).
+ * @returns { layout, record, objectMetadata, loading, error }.
+ */
+export function useRecordDetailLayout({
+	objectApiName,
+	recordId,
+	recordTypeId = null,
+	initialData = null,
+}: UseRecordDetailLayoutParams): UseRecordDetailLayoutReturn {
+	const [layout, setLayout] = useState<LayoutResponse | null>(initialData?.layout ?? null);
+	const [record, setRecord] = useState<GraphQLRecordNode | null>(initialData?.record ?? null);
+	const [objectMetadata, setObjectMetadata] = useState<ObjectInfoResult | null>(
+		initialData?.objectMetadata ?? null,
+	);
+	const [loading, setLoading] = useState(!initialData);
+	const [error, setError] = useState<string | null>(null);
+
+	const cacheKey =
+		objectApiName && recordId ? `${objectApiName}:${recordId}:${recordTypeId ?? "default"}` : null;
+	const cacheRef = useRef<Map<string, CacheEntry>>(new Map());
+
+	useEffect(() => {
+		if (!objectApiName || !recordId) {
+			setError("Invalid object or record ID");
+			setLoading(false);
+			return;
+		}
+
+		// Skip fetch when parent already provided data (avoids duplicate API calls)
+		if (
+			initialData?.layout != null &&
+			initialData?.record != null &&
+			initialData?.objectMetadata != null
+		) {
+			return;
+		}
+
+		const cached = cacheRef.current.get(cacheKey!);
+		const now = Date.now();
+		if (cached && now - cached.cachedAt < CACHE_TTL_MS) {
+			setLayout(cached.layout);
+			setRecord(cached.record);
+			setObjectMetadata(cached.objectMetadata);
+			setLoading(false);
+			setError(null);
+			return;
+		}
+
+		let isCancelled = false;
+		const abortController = new AbortController();
+
+		const fetchDetail = async () => {
+			setLoading(true);
+			setError(null);
+
+			try {
+				const {
+					layout: layoutData,
+					record: recordData,
+					objectMetadata: objectMetadataData,
+				} = await objectDetailService.getRecordDetail(
+					objectApiName,
+					recordId,
+					recordTypeId ?? undefined,
+					abortController.signal,
+				);
+
+				if (isCancelled) return;
+
+				const cache = cacheRef.current;
+				if (cache.size >= MAX_CACHE_SIZE) {
+					const firstKey = cache.keys().next().value;
+					if (firstKey != null) cache.delete(firstKey);
+				}
+				cache.set(cacheKey!, {
+					layout: layoutData,
+					record: recordData,
+					objectMetadata: objectMetadataData,
+					cachedAt: Date.now(),
+				});
+				setLayout(layoutData);
+				setRecord(recordData);
+				setObjectMetadata(objectMetadataData);
+			} catch (err) {
+				if (isCancelled || (err instanceof Error && err.name === "AbortError")) {
+					return;
+				}
+				setError("Failed to load record details");
+			} finally {
+				if (!isCancelled) {
+					setLoading(false);
+				}
+			}
+		};
+
+		fetchDetail();
+
+		return () => {
+			isCancelled = true;
+			abortController.abort();
+		};
+	}, [objectApiName, recordId, recordTypeId, cacheKey, initialData]);
+
+	return {
+		layout,
+		record,
+		objectMetadata,
+		loading,
+		error,
+	};
+}

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

@@ -0,0 +1,135 @@
+/**
+ * Record list hook: GraphQL records with filter, sort, pagination, search.
+ * Use for list/search views; detail view uses useRecordDetailLayout instead.
+ *
+ * @module hooks/useRecordListGraphQL
+ */
+
+import { useState, useEffect, useCallback } from "react";
+import { useObjectColumns } from "./useObjectSearchData";
+import {
+	getRecordsGraphQL,
+	buildOrderByFromSort,
+	type RecordListGraphQLResult,
+} from "../api/recordListGraphQLService";
+import type { Column } from "../types/search/searchResults";
+import type { FilterCriteria } from "../types/filters/filters";
+
+const EMPTY_FILTERS: FilterCriteria[] = [];
+
+export interface UseRecordListGraphQLOptions {
+	objectApiName: string;
+	first?: number;
+	after?: string | null;
+	filters?: FilterCriteria[];
+	sortBy?: string;
+	searchQuery?: string;
+	/** When provided, skips useObjectColumns (use from parent e.g. useObjectListMetadata). */
+	columns?: Column[];
+	columnsLoading?: boolean;
+	columnsError?: string | null;
+}
+
+export interface UseRecordListGraphQLReturn {
+	data: RecordListGraphQLResult | null;
+	edges: Array<{ node?: Record<string, unknown> }>;
+	pageInfo: {
+		hasNextPage?: boolean;
+		hasPreviousPage?: boolean;
+		endCursor?: string | null;
+		startCursor?: string | null;
+	} | null;
+	loading: boolean;
+	error: string | null;
+	columnsLoading: boolean;
+	columnsError: string | null;
+	refetch: () => void;
+}
+
+/**
+ * Fetches records via GraphQL for the given object with filter, sort, pagination, and search.
+ */
+export function useRecordListGraphQL(
+	options: UseRecordListGraphQLOptions,
+): UseRecordListGraphQLReturn {
+	const {
+		objectApiName,
+		first = 50,
+		after = null,
+		filters = EMPTY_FILTERS,
+		sortBy = "",
+		searchQuery = "",
+		columns: columnsProp,
+		columnsLoading: columnsLoadingProp,
+		columnsError: columnsErrorProp,
+	} = options;
+
+	const fromParent = columnsProp !== undefined;
+	const fromHook = useObjectColumns(fromParent ? null : objectApiName);
+
+	const columns = fromParent ? columnsProp : fromHook.columns;
+	const columnsLoading = fromParent ? (columnsLoadingProp ?? false) : fromHook.columnsLoading;
+	const columnsError = fromParent ? (columnsErrorProp ?? null) : fromHook.columnsError;
+
+	const [data, setData] = useState<RecordListGraphQLResult | null>(null);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	const fetchRecords = useCallback(() => {
+		if (columnsLoading || columnsError || columns.length === 0) return;
+
+		setLoading(true);
+		setError(null);
+		const orderBy = buildOrderByFromSort(sortBy);
+
+		getRecordsGraphQL({
+			objectApiName,
+			columns,
+			first,
+			after,
+			filters,
+			orderBy,
+			searchQuery: searchQuery.trim() || undefined,
+		})
+			.then((result) => {
+				setData(result);
+			})
+			.catch((err) => {
+				setError(err instanceof Error ? err.message : "Failed to load records");
+			})
+			.finally(() => {
+				setLoading(false);
+			});
+	}, [
+		objectApiName,
+		columns,
+		columnsLoading,
+		columnsError,
+		first,
+		after,
+		filters,
+		sortBy,
+		searchQuery,
+	]);
+
+	useEffect(() => {
+		if (!objectApiName || columnsLoading || columnsError) return;
+		if (columns.length === 0 && !columnsLoading) return;
+		fetchRecords();
+	}, [objectApiName, columns, columnsLoading, columnsError, fetchRecords]);
+
+	const objectData = data?.uiapi?.query?.[objectApiName];
+	const edges = objectData?.edges ?? [];
+	const pageInfo = objectData?.pageInfo ?? null;
+
+	return {
+		data,
+		edges,
+		pageInfo,
+		loading: columnsLoading || loading,
+		error: columnsError || error,
+		columnsLoading,
+		columnsError,
+		refetch: fetchRecords,
+	};
+}

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

@@ -0,0 +1,173 @@
+/**
+ * Real weather data via Open-Meteo (free, no API key).
+ * Uses San Francisco as default location; optional lat/lng override.
+ */
+import { useState, useEffect } from "react";
+
+const DEFAULT_LAT = 37.7749;
+const DEFAULT_LNG = -122.4194;
+
+// WMO weather codes → short label (Open-Meteo)
+const WEATHER_LABELS: Record<number, string> = {
+	0: "Clear",
+	1: "Mainly clear",
+	2: "Partly cloudy",
+	3: "Overcast",
+	45: "Foggy",
+	48: "Depositing rime fog",
+	51: "Light drizzle",
+	53: "Drizzle",
+	55: "Dense drizzle",
+	61: "Slight rain",
+	63: "Rain",
+	65: "Heavy rain",
+	71: "Slight snow",
+	73: "Snow",
+	75: "Heavy snow",
+	77: "Snow grains",
+	80: "Slight rain showers",
+	81: "Rain showers",
+	82: "Heavy rain showers",
+	85: "Slight snow showers",
+	86: "Heavy snow showers",
+	95: "Thunderstorm",
+	96: "Thunderstorm + hail",
+	99: "Thunderstorm + heavy hail",
+};
+
+function weatherLabel(code: number): string {
+	return WEATHER_LABELS[code] ?? "Unknown";
+}
+
+function celsiusToFahrenheit(c: number): number {
+	return Math.round((c * 9) / 5 + 32);
+}
+
+export interface WeatherCurrent {
+	description: string;
+	tempF: number;
+	humidity: number;
+	windSpeedKmh: number;
+	windSpeedMph: number;
+}
+
+export interface WeatherHour {
+	time: string; // ISO or "h:mm a"
+	tempF: number;
+}
+
+export interface WeatherData {
+	current: WeatherCurrent;
+	hourly: WeatherHour[];
+	timezone: string;
+}
+
+async function fetchWeather(lat: number, lng: number): Promise<WeatherData> {
+	const url = new URL("https://api.open-meteo.com/v1/forecast");
+	url.searchParams.set("latitude", String(lat));
+	url.searchParams.set("longitude", String(lng));
+	url.searchParams.set(
+		"current",
+		"temperature_2m,relative_humidity_2m,weather_code,wind_speed_10m",
+	);
+	url.searchParams.set("hourly", "temperature_2m");
+	url.searchParams.set("timezone", "America/Los_Angeles");
+	url.searchParams.set("forecast_days", "1");
+
+	const res = await fetch(url.toString());
+	if (!res.ok) throw new Error(`Weather failed: ${res.status}`);
+	const data = (await res.json()) as {
+		current?: {
+			temperature_2m?: number;
+			relative_humidity_2m?: number;
+			weather_code?: number;
+			wind_speed_10m?: number;
+		};
+		hourly?: { time?: string[]; temperature_2m?: (number | null)[] };
+		timezone?: string;
+	};
+
+	const cur = data.current ?? {};
+	const tempC = cur.temperature_2m ?? 0;
+	const humidity = cur.relative_humidity_2m ?? 0;
+	const windKmh = cur.wind_speed_10m ?? 0;
+	const windMph = Math.round(windKmh * 0.621371 * 10) / 10;
+	const code = cur.weather_code ?? 0;
+
+	const hourly: WeatherHour[] = [];
+	const times = data.hourly?.time ?? [];
+	const temps = data.hourly?.temperature_2m ?? [];
+	const now = new Date();
+	for (let i = 0; i < Math.min(12, times.length); i++) {
+		const t = times[i];
+		const temp = temps[i];
+		if (t && temp != null) {
+			const d = new Date(t);
+			if (d >= now) {
+				hourly.push({
+					time: d.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", hour12: true }),
+					tempF: celsiusToFahrenheit(temp),
+				});
+			}
+		}
+	}
+	// If no future hours, use first 4 from response
+	if (hourly.length === 0) {
+		for (let i = 0; i < Math.min(4, times.length); i++) {
+			const t = times[i];
+			const temp = temps[i];
+			if (t && temp != null) {
+				hourly.push({
+					time: new Date(t).toLocaleTimeString("en-US", {
+						hour: "numeric",
+						minute: "2-digit",
+						hour12: true,
+					}),
+					tempF: celsiusToFahrenheit(temp),
+				});
+			}
+		}
+	}
+
+	return {
+		current: {
+			description: weatherLabel(code),
+			tempF: celsiusToFahrenheit(tempC),
+			humidity,
+			windSpeedKmh: windKmh,
+			windSpeedMph: windMph,
+		},
+		hourly: hourly.slice(0, 6),
+		timezone: data.timezone ?? "America/Los_Angeles",
+	};
+}
+
+export function useWeather(lat?: number | null, lng?: number | null) {
+	const latitude = lat ?? DEFAULT_LAT;
+	const longitude = lng ?? DEFAULT_LNG;
+
+	const [data, setData] = useState<WeatherData | null>(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+
+	useEffect(() => {
+		let cancelled = false;
+		setLoading(true);
+		setError(null);
+		fetchWeather(latitude, longitude)
+			.then((d) => {
+				if (!cancelled) setData(d);
+			})
+			.catch((e) => {
+				if (!cancelled) setError(e instanceof Error ? e.message : "Failed to load weather");
+			})
+			.finally(() => {
+				if (!cancelled) setLoading(false);
+			});
+		return () => {
+			cancelled = true;
+		};
+	}, [latitude, longitude]);
+
+	return { data, loading, error };
+}