1import React from "react";
 2
 3type State =
 4	| { kind: "Connecting" }
 5	| { kind: "Connected" }
 6	| { kind: "Watching"; name: string }
 7	| { kind: "Waiting"; name: string; time: string }
 8	| { kind: "Revealed"; name: string; secret: string };
 9
10export const useSecret = (id: string) => {
11	const [state, setState] = React.useState<State>({ kind: "Connecting" });
12
13	React.useEffect(() => {
14		const ws = new WebSocket("/api/ws");
15
16		ws.addEventListener("message", (message) => {
17			const data = JSON.parse(message.data);
18
19			if (data.error !== undefined) {
20				alert(data.error);
21				return;
22			}
23
24			switch (data.kind) {
25				case "Connected": {
26					setState({ kind: "Connected" });
27					ws.send(JSON.stringify({ command: "open", id }));
28					break;
29				}
30
31				case "Watch": {
32					setState({ kind: "Watching", name: data.name });
33					break;
34				}
35
36				case "Update": {
37					setState((oldState) => ({
38						kind: "Waiting",
39						name: "name" in oldState ? oldState.name : "",
40						time: data.remaining,
41					}));
42					break;
43				}
44
45				case "Reveal": {
46					setState((oldState) => ({
47						kind: "Revealed",
48						name: "name" in oldState ? oldState.name : "",
49						secret: data.secret,
50					}));
51					break;
52				}
53			}
54		});
55
56		ws.addEventListener("close", () => {
57			setState({ kind: "Connecting" });
58		});
59
60		return () => {
61			ws.close();
62		};
63	}, [id]);
64
65	return state;
66};