[wip] extractProperty proper typing with union types

pkg/client/src/components/Table.tsx

@@ -41,33 +41,23 @@ export default (props: { tableKey: string }) => {
 		ws.on("open", () => res(ws));
 		ws.on("error", () => res(ws));
 	});
-
 	const sendWs = (msg: TWsIn) => wsPromise.then((ws) => ws.send(msg));
 	const wsEvents = fromPromise(wsPromise).flatMap((ws) =>
 		fromWebsocket<TWsOut>(ws)
 	);
 	onCleanup(() => wsPromise.then((ws) => ws.close()));
 
-	const presenceEvents = wsEvents.filter(
-		(evt) => evt.playersPresent !== undefined
-	);
-
 	const gameConfig = extractProperty(wsEvents, "gameConfig").thru(
 		createObservable
 	);
+	const view = extractProperty(wsEvents, "view").thru(createObservable);
 
-	const gameEvents = wsEvents.filter((evt) => evt.view !== undefined);
-	const resultEvents = wsEvents.filter((evt) => evt.results !== undefined);
-
-	const players = createObservableWithInit<string[]>(
-		presenceEvents.map((evt) => evt.playersPresent!),
-		[]
+	const players = extractProperty(wsEvents, "playersPresent").thru(
+		createObservable
 	);
+
 	const playerNames = createObservableStore(
-		wsEvents
-			.filter((evt) => evt.playerNames != null)
-			.map(({ playerNames }) => playerNames!)
-			.toProperty(),
+		extractProperty(wsEvents, "playerNames"),
 		{}
 	);
 
@@ -83,9 +73,6 @@ export default (props: { tableKey: string }) => {
 
 	createEffect(() => sendWs({ ready: ready() }));
 	createEffect(() => sendWs({ name: name() }));
-	const viewProp = gameEvents.map((evt) => evt.view).toProperty();
-
-	const view = createObservable(viewProp);
 
 	return (
 		<TableContext.Provider

pkg/client/src/fn.ts

@@ -48,10 +48,8 @@ export const createObservableStore = <T extends object = {}>(
 	return store;
 };
 
-export const extractProperty = <
-	P extends string,
-	T extends { [key in P]?: any }
->(
+type UnionKeys<T> = T extends any ? keyof T : never;
+export const extractProperty = <T extends object, P extends UnionKeys<T>>(
 	obs: Observable<T, any>,
 	property: P
 ): Property<T[P], any> =>