1import React from "react";
 2import { Navigate, useParams } from "react-router-dom";
 3
 4import { useSecret } from "./useSecret";
 5
 6import styles from "./Secret.module.scss";
 7
 8export const Secret = () => {
 9	const { id } = useParams();
10	const [copied, setCopied] = React.useState(false);
11
12	if (id === undefined) {
13		return <Navigate to="/" />;
14	}
15
16	const state = useSecret(id);
17
18	const copyCallback = React.useCallback(() => {
19		navigator.clipboard.writeText(window.location.href);
20		setCopied(true);
21	}, []);
22
23	const copyButton = (
24		<a href="#" onClick={copyCallback} className={styles.copyButton}>
25			{copied ? "Copied!" : "Copy Link"}
26		</a>
27	);
28
29	switch (state.kind) {
30		case "Connecting":
31		case "Connected": {
32			return (
33				<div className={styles.secret}>
34					<h1>...</h1>
35					<div className={styles.message}>Loading...</div>
36				</div>
37			);
38		}
39
40		case "Watching": {
41			return (
42				<div className={styles.secret}>
43					<h1>{state.name}</h1>
44					<div className={styles.message}>Waiting for reveal</div>
45					{copyButton}
46				</div>
47			);
48		}
49
50		case "Waiting": {
51			return (
52				<div className={styles.secret}>
53					<h1>{state.name}</h1>
54					<div className={styles.timer}>Will be revealed in {state.time}</div>
55					{copyButton}
56				</div>
57			);
58		}
59
60		case "Revealed": {
61			return (
62				<div className={styles.secret}>
63					<h1>{state.name}</h1>
64					<div className={styles.content}>{state.secret}</div>
65					{copyButton}
66				</div>
67			);
68		}
69
70		default: {
71			return (
72				<div className={styles.secret}>
73					<h1>Error</h1>
74					<div className={styles.message}>An error occurred</div>
75				</div>
76			);
77		}
78	}
79};