1import { DateTime } from "luxon";
 2import React from "react";
 3import { Link, Navigate } from "react-router-dom";
 4
 5import { useMySecrets } from "./useMySecrets";
 6import { useUser } from "./useUser";
 7
 8import styles from "./MySecrets.module.scss";
 9
10export const MySecrets = () => {
11	const { user } = useUser();
12	const { secrets } = useMySecrets();
13
14	if (user.loading) {
15		return <div>Loading...</div>;
16	} else if (user.value === undefined) {
17		return <Navigate to="/login" />;
18	} else if (secrets.loading) {
19		return <div>Loading...</div>;
20	} else if (secrets.value === undefined) {
21		return <div>Error</div>;
22	}
23
24	return (
25		<>
26			<h1>My Secrets</h1>
27			<div className={styles.list}>
28				{secrets.value.length === 0 ? (
29					<div className={styles.empty}>
30						No secrets yet. <Link to="/secret/create">Create one here.</Link>
31					</div>
32				) : (
33					<>
34						<div className={styles.header}>
35							<div className={styles.name}>Secret</div>
36							<div className={styles.revealAt}>Reveal At</div>
37							<div className={styles.createdAt}>Created At</div>
38						</div>
39						{secrets.value.map((secret) => (
40							<Link to={`/secret/${secret.id}`} className={styles.secret} key={secret.id}>
41								<div className={styles.name}>{secret.name}</div>
42								<div className={styles.revealAt}>
43									{DateTime.fromISO(secret.revealAt)
44										.setZone("local")
45										.toLocaleString(DateTime.DATETIME_SHORT)}
46								</div>
47								<div className={styles.createdAt}>
48									{DateTime.fromISO(secret.createdAt)
49										.setZone("local")
50										.toLocaleString(DateTime.DATETIME_SHORT)}
51								</div>
52							</Link>
53						))}
54					</>
55				)}
56			</div>
57		</>
58	);
59};