1 files changed, 38 insertions, 86 deletions

diff --git a/src/pages/study.tsx b/src/pages/study.tsx
index f818b4b..68f781e 100644
--- a/src/pages/study.tsx
+++ b/src/pages/study.tsx
@@ -1,12 +1,10 @@
 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";
+import LessonSelector from "@/components/srs/LessonSelector";
 
 // This is a server component that gets the initial data
 export default async function StudyPage({
@@ -15,8 +13,8 @@ export default async function StudyPage({
   searchParams: { lessonId?: string };
 }) {
   const { user } = getContextData() as any;
-  // const state = getState(null);
   const userId = user?.id;
+  // const state = getState(null);
 
   // If not logged in, show login required message
   if (!userId) {
@@ -35,101 +33,55 @@ export default async function StudyPage({
     );
   }
 
-  const lessonId = searchParams.lessonId
+  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
-        }
-      />
+      <Inner userId={userId} lessonId={lessonId} />
     </div>
   );
 }
 
-// Client component for selecting a lesson
-function LessonSelector({ userId }: { userId: number }) {
-  const [lessonId, setLessonId] = useState<string>("");
-
+async function Inner({
+  userId,
+  lessonId,
+}: {
+  userId: number;
+  lessonId: number | null;
+}) {
   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>
+    <>
+      {lessonId ? (
+        <StudySessionOuter userId={userId} lessonId={Number(lessonId)} />
+      ) : (
+        <LessonSelector userId={userId} />
+      )}
+    </>
   );
 }
+async function StudySessionOuter({
+  userId,
+  lessonId,
+}: {
+  userId: number;
+  lessonId: number;
+}) {
+  const initialData = await startStudySession(userId, lessonId, true);
+  if ("ok" in initialData)
+    return (
+      <>
+        <StudySession
+          userId={userId}
+          lessonId={lessonId}
+          initialData={initialData.ok}
+        />
+      </>
+    );
+  else return <p>idk</p>;
+}