1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
import { useCallback, useEffect, useState } from "react";
import { ApiClientError, apiClient } from "../api";
import { useAuth } from "../stores";
interface Deck {
id: string;
name: string;
description: string | null;
newCardsPerDay: number;
createdAt: string;
updatedAt: string;
}
export function HomePage() {
const { logout } = useAuth();
const [decks, setDecks] = useState<Deck[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const fetchDecks = useCallback(async () => {
setIsLoading(true);
setError(null);
try {
const res = await apiClient.rpc.api.decks.$get(undefined, {
headers: apiClient.getAuthHeader(),
});
if (!res.ok) {
const errorBody = await res.json().catch(() => ({}));
throw new ApiClientError(
(errorBody as { error?: string }).error ||
`Request failed with status ${res.status}`,
res.status,
);
}
const data = await res.json();
setDecks(data.decks);
} catch (err) {
if (err instanceof ApiClientError) {
setError(err.message);
} else {
setError("Failed to load decks. Please try again.");
}
} finally {
setIsLoading(false);
}
}, []);
useEffect(() => {
fetchDecks();
}, [fetchDecks]);
return (
<div>
<header
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: "1rem",
}}
>
<h1>Kioku</h1>
<button type="button" onClick={logout}>
Logout
</button>
</header>
<main>
<h2>Your Decks</h2>
{isLoading && <p>Loading decks...</p>}
{error && (
<div role="alert" style={{ color: "red" }}>
{error}
<button
type="button"
onClick={fetchDecks}
style={{ marginLeft: "0.5rem" }}
>
Retry
</button>
</div>
)}
{!isLoading && !error && decks.length === 0 && (
<div>
<p>You don't have any decks yet.</p>
<p>Create your first deck to start learning!</p>
</div>
)}
{!isLoading && !error && decks.length > 0 && (
<ul style={{ listStyle: "none", padding: 0 }}>
{decks.map((deck) => (
<li
key={deck.id}
style={{
border: "1px solid #ccc",
padding: "1rem",
marginBottom: "0.5rem",
borderRadius: "4px",
}}
>
<h3 style={{ margin: 0 }}>{deck.name}</h3>
{deck.description && (
<p style={{ margin: "0.5rem 0 0 0", color: "#666" }}>
{deck.description}
</p>
)}
</li>
))}
</ul>
)}
</main>
</div>
);
}
|
