Add usePlatformState

Author: raycashmore

frameworks/react/workspace-platform-starter/src/hooks/usePlatformState.tsx

@@ -0,0 +1,94 @@
+import { type Channel, type Context, type DesktopAgent, type Listener } from "@finos/fdc3";
+import { type Dispatch, type SetStateAction, useCallback, useEffect, useRef, useState } from "react";
+
+const CONTEXT_TYPE = "workspace.platformState";
+
+export function usePlatformState<T>(
+	topic: string,
+	defaultState?: T,
+): [T | undefined, Dispatch<SetStateAction<T | undefined>>] {
+	const [currentValue, setCurrentValue] = useState<T | undefined>(defaultState);
+	const channelRef = useRef<Channel | null>(null);
+	const listenerRef = useRef<Listener | null>(null);
+	const mountedRef = useRef(true); // Flag to avoid state updates after unmount
+	const fcd3: DesktopAgent = window.fdc3;
+
+	const setValue = useCallback(async (payload: T | ((prevValue: T | undefined) => T | undefined)) => {
+		setCurrentValue((prev) => {
+			const newValue =
+				typeof payload === "function"
+					? (payload as (p: T | undefined) => T | undefined)(prev)
+					: (payload as T | undefined);
+			if (channelRef.current) {
+				const context: Context = { type: CONTEXT_TYPE, payload: newValue };
+				channelRef.current.broadcast(context).catch((err) => {
+					console.error("Failed to broadcast platform state context:", err);
+				});
+			}
+			return newValue;
+		});
+	}, []);
+
+	useEffect(() => {
+		if (!window.fdc3) {
+			console.warn("FDC3 is not available");
+			return () => {};
+		}
+		console.info(`Creating channel ${topic}`);
+
+		const initChannel = async () => window.fdc3.getOrCreateChannel(topic);
+
+		const getChannelValue = async (channel: Channel) => {
+			try {
+				const current = await channel.getCurrentContext();
+				if (current && current.payload !== undefined) {
+					if (mountedRef.current) {
+						setCurrentValue(current.payload as T | undefined);
+					}
+				}
+			} catch (err) {
+				console.error("Failed to get current context for platform state:", err);
+			}
+		};
+
+		const listenOnChannel = async (channel: Channel) => {
+			if (!listenerRef.current) {
+				listenerRef.current = await channel.addContextListener(CONTEXT_TYPE, (context) => {
+					console.info(`Received context on channel ${topic}`, context);
+					if (mountedRef.current) {
+						setCurrentValue(context.payload as T | undefined);
+					}
+				});
+			}
+		};
+
+		(async () => {
+			channelRef.current = await initChannel();
+			await getChannelValue(channelRef.current);
+			await listenOnChannel(channelRef.current);
+		})().catch((error: Error | string) => {
+			console.error(error.toString());
+		});
+
+		return () => {
+			mountedRef.current = false;
+			if (listenerRef.current) {
+				try {
+					listenerRef.current.unsubscribe();
+				} catch {
+					// ignore unsubscribe errors
+				}
+				listenerRef.current = null;
+			}
+		};
+	}, [topic, fcd3]);
+
+	useEffect(() => {
+		mountedRef.current = true;
+		return () => {
+			mountedRef.current = false;
+		};
+	}, []);
+
+	return [currentValue, setValue];
+}

frameworks/react/workspace-platform-starter/src/views/view1.tsx

@@ -1,16 +1,21 @@
-import { useRaiseIntent } from '../hooks/useRaiseIntent';
+import { usePlatformState } from "../hooks/usePlatformState";
+import { useRaiseIntent } from "../hooks/useRaiseIntent";
 
 export function View1() {
 	const raiseIntent = useRaiseIntent();
+	const [, setMyState] = usePlatformState<string>("demo", "");
 
 	const handleViewContact = () => {
-		raiseIntent('ViewContact', { type: 'fdc3.contact' })
-	}
+		raiseIntent("ViewContact", { type: "fdc3.contact" });
+	};
 
 	const handleViewQuote = () => {
-		raiseIntent('ViewQuote', { type: 'custom.instrument' })
-	}
+		raiseIntent("ViewQuote", { type: "custom.instrument" });
+	};
 
+	const handleSetGlobalState = () => {
+		setMyState("Hello World!");
+	};
 
 	return (
 		<div className="flex-col">
@@ -20,6 +25,9 @@ export function View1() {
 			<button type="button" onClick={handleViewQuote}>
 				View Quote
 			</button>
+			<button type="button" onClick={handleSetGlobalState}>
+				Set global state
+			</button>
 		</div>
 	);
 }

frameworks/react/workspace-platform-starter/src/views/view2.tsx

@@ -1,3 +1,12 @@
+import { usePlatformState } from "../hooks/usePlatformState";
+
 export function View2() {
-	return <div>View 2</div>;
+	const [myState] = usePlatformState<string>("demo");
+
+	return (
+		<>
+			<div>View 2</div>
+			<h1>{myState}</h1>
+		</>
+	);
 }