chore: flesh out more of React class

Parkreiner · Parkreiner · commit 62b6f6edbdd0 · 2025-05-07T15:56:14.000Z
diff --git a/site/src/hooks/useTimeSync.tsx b/site/src/hooks/useTimeSync.tsx
@@ -39,45 +39,74 @@ type ReactTimeSyncSubscriptionEntry = Readonly<
 	}
 >;
 
+// Need to wrap each value that we put in the selection cache, so that when we
+// try to retrieve a value, it's easy to differentiate between a value being
+// undefined because that's an explicit selection value, versus it being
+// undefined because we forgot to set it in the cache
+type SelectionCacheEntry = Readonly<{ value: unknown }>;
+
 interface ReactTimeSyncApi {
 	subscribe: (entry: ReactTimeSyncSubscriptionEntry) => () => void;
 	getSelectionSnapshot: <T = unknown>(id: string) => T;
 }
 
 class ReactTimeSync implements ReactTimeSyncApi {
 	readonly #timeSync: TimeSync;
-	readonly #resyncOnNewSubscription: boolean;
-	readonly #selectionCache: Map<string, unknown>;
+	readonly #selectionCache: Map<string, SelectionCacheEntry>;
 
 	constructor(options: Partial<TimeSyncInitOptions>) {
-		const {
-			resyncOnNewSubscription = defaultOptions.resyncOnNewSubscription,
-			initialDatetime = defaultOptions.initialDatetime,
-			createNewDatetime = defaultOptions.createNewDatetime,
-			setInterval = defaultOptions.setInterval,
-			clearInterval = defaultOptions.clearInterval,
-		} = options;
-
+		this.#timeSync = new TimeSync(options);
 		this.#selectionCache = new Map();
-		this.#resyncOnNewSubscription = resyncOnNewSubscription;
-		this.#timeSync = new TimeSync({
-			initialDatetime,
-			createNewDatetime,
-			setInterval,
-			clearInterval,
-		});
 	}
 
 	// All functions that are part of the public interface must be defined as
 	// arrow functions, so that they work properly with React
 
 	subscribe = (entry: ReactTimeSyncSubscriptionEntry): (() => void) => {
-		this.#timeSync.subscribe(entry);
-		return () => this.#timeSync.unsubscribe(entry.id);
+		const { select, id, idealRefreshIntervalMs, onUpdate } = entry;
+
+		// Make sure that we subscribe first, in case TimeSync is configured to
+		// invalidate the snapshot on a new subscription. Want to remove risk of
+		// stale data
+		const patchedEntry: SubscriptionEntry = {
+			id,
+			idealRefreshIntervalMs,
+			onUpdate: (newDate) => {
+				const prevSelection = this.getSelectionSnapshot(id);
+				const newSelection: unknown = select?.(newDate) ?? newDate;
+				if (newSelection === prevSelection) {
+					return;
+				}
+
+				this.#selectionCache.set(id, { value: newSelection });
+				onUpdate(newDate);
+			},
+		};
+		this.#timeSync.subscribe(patchedEntry);
+
+		const date = this.#timeSync.getTimeSnapshot();
+		const cacheValue = select?.(date) ?? date;
+		this.#selectionCache.set(id, { value: cacheValue });
+
+		return () => this.#timeSync.unsubscribe(id);
 	};
 
+	/**
+	 * Allows you to grab the result of a selection that has been registered
+	 * with ReactTimeSync.
+	 *
+	 * If this method is called with an ID before a subscription has been
+	 * registered for that ID, that will cause the method to throw.
+	 */
 	getSelectionSnapshot = <T,>(id: string): T => {
-		return this.#selectionCache.get(id) as T;
+		const cacheEntry = this.#selectionCache.get(id);
+		if (cacheEntry === undefined) {
+			throw new Error(
+				"Trying to retrieve value from selection cache without it being initialized",
+			);
+		}
+
+		return cacheEntry.value as T;
 	};
 }
 
@@ -177,7 +206,7 @@ export function useTimeSync<T = Date>(options: UseTimeSyncOptions<T>): T {
 	});
 
 	// We need to define this callback using useCallback instead of
-	// useEffectEvent because we want the memoization to be invaliated when the
+	// useEffectEvent because we want the memoization to be invalidated when the
 	// refresh interval changes. (When the subscription callback changes by
 	// reference, that causes useSyncExternalStore to redo the subscription with
 	// the new callback). All other values need to be included in the dependency
diff --git a/site/src/utils/TimeSync.ts b/site/src/utils/TimeSync.ts
@@ -62,7 +62,6 @@ interface TimeSyncApi {
 	subscribe: (entry: SubscriptionEntry) => void;
 	unsubscribe: (id: string) => void;
 	getTimeSnapshot: () => Date;
-	invalidateSnapshot: () => void;
 }
 
 /**
@@ -167,8 +166,6 @@ export class TimeSync implements TimeSyncApi {
 		return this.#latestDateSnapshot;
 	}
 
-	invalidateSnapshot(): void {}
-
 	unsubscribe(id: string): void {
 		const updated = this.#subscriptions.filter((s) => s.id !== id);
 		if (updated.length === this.#subscriptions.length) {

Original file line number	Diff line number	Diff line change
`@@ -62,7 +62,6 @@ interface TimeSyncApi {`
`62`	`62`	`subscribe: (entry: SubscriptionEntry) => void;`
`63`	`63`	`unsubscribe: (id: string) => void;`
`64`	`64`	`getTimeSnapshot: () => Date;`
`65`		`- invalidateSnapshot: () => void;`
`66`	`65`	`}`
`67`	`66`
`68`	`67`	`/**`
`@@ -167,8 +166,6 @@ export class TimeSync implements TimeSyncApi {`
`167`	`166`	`return this.#latestDateSnapshot;`
`168`	`167`	`}`
`169`	`168`
`170`		`- invalidateSnapshot(): void {}`
`171`		`-`
`172`	`169`	`unsubscribe(id: string): void {`
`173`	`170`	`const updated = this.#subscriptions.filter((s) => s.id !== id);`
`174`	`171`	`if (updated.length === this.#subscriptions.length) {`