blob: f818b4b1322d9493734aeabc8bc3eab30d8bc5f4 (
plain)
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
import { getContextData } from "waku/middleware/context";
import { useState } from "react";
import { getState } from "@/lib/db";
import { startStudySession } from "@/actions/srs";
import StudySession from "@/components/Flashcard/StudySession";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
// This is a server component that gets the initial data
export default async function StudyPage({
searchParams,
}: {
searchParams: { lessonId?: string };
}) {
const { user } = getContextData() as any;
// const state = getState(null);
const userId = user?.id;
// If not logged in, show login required message
if (!userId) {
return (
<div className="container mx-auto py-8">
<Card className="p-6 text-center">
<h1 className="text-2xl font-bold mb-4">Login Required</h1>
<p className="mb-4">
You need to be logged in to use the study session feature.
</p>
<Button asChild>
<a href="/login">Login</a>
</Button>
</Card>
</div>
);
}
const lessonId = searchParams.lessonId
? parseInt(searchParams.lessonId, 10)
: null;
// If no lesson ID provided, show lesson selector
if (!lessonId) {
return <LessonSelector userId={userId} />;
}
// Get initial data for the study session
let initialData;
try {
initialData = await startStudySession(userId, lessonId, true);
} catch (error) {
console.error("Error starting study session:", error);
}
return (
<div className="container mx-auto py-8">
<StudySession
userId={userId}
lessonId={lessonId}
initialData={
initialData && !("error" in initialData) ? initialData : undefined
}
/>
</div>
);
}
// Client component for selecting a lesson
function LessonSelector({ userId }: { userId: number }) {
const [lessonId, setLessonId] = useState<string>("");
return (
<div className="container mx-auto py-8">
<Card className="p-6 max-w-md mx-auto">
<h1 className="text-2xl font-bold mb-6">Start Study Session</h1>
<form action={`/study?lessonId=${lessonId}`}>
<div className="space-y-4">
<div>
<Label htmlFor="lessonId">Lesson ID</Label>
<Input
id="lessonId"
value={lessonId}
onChange={(e) => setLessonId(e.target.value)}
placeholder="Enter lesson ID"
type="number"
required
/>
</div>
<Button type="submit" className="w-full">
Start Study Session
</Button>
</div>
</form>
<div className="mt-6 pt-6 border-t border-gray-200">
<h2 className="text-lg font-medium mb-3">Available Lessons</h2>
<p className="text-sm text-gray-500 mb-4">
Here are some example lesson IDs you can use:
</p>
<div className="flex flex-wrap gap-2">
<Button
variant="outline"
size="sm"
onClick={() => setLessonId("1")}
>
Lesson 1
</Button>
<Button
variant="outline"
size="sm"
onClick={() => setLessonId("2")}
>
Lesson 2
</Button>
<Button
variant="outline"
size="sm"
onClick={() => setLessonId("5")}
>
Lesson 5
</Button>
</div>
<div className="mt-4">
<Button variant="ghost" size="sm" asChild className="text-blue-500">
<a href="/">Back to Home</a>
</Button>
</div>
</div>
</Card>
</div>
);
}
|
