src/components/LessonModal.tsx

@@ -13,7 +13,7 @@ import type { LessonId } from "./FetchLessonPage";
 import type { LessonDetails } from "../types/lesson";
 
 interface LessonModalProps {
-  lessonId: string | null;
+  selectedLessonData: { id: string | null; name: string | null };
   open: boolean;
   onOpenChange: (open: boolean) => void;
 }
@@ -158,8 +158,9 @@ const LoadingSpinner = () => (
 );
 
 export const LessonModal = ({
-  lessonId,
+  selectedLessonData,
   open,
+
   onOpenChange,
 }: LessonModalProps) => {
   const user = useAuthStore((state) => state.user);
@@ -168,17 +169,21 @@ export const LessonModal = ({
   const [lesson, setLesson] = useState<LessonDetails | null>(null);
   const [error, setError] = useState(false);
   const fetchingForId = useRef<string | null>(null);
+  const lessonId = selectedLessonData.id;
 
   const LocalLessonComponent =
     lessonId && !isVideoLesson(lessonId)
       ? LESSON_COMPONENT_MAP[lessonId as LessonId]
       : null;
 
-  const modalTitle = LocalLessonComponent
-    ? getLocalLessonTitle(lessonId!)
-    : loading
-      ? "Loading..."
-      : (lesson?.title ?? "Lesson");
+  // const modalTitle = LocalLessonComponent
+  //   ? getLocalLessonTitle(lessonId!)
+  //   : loading
+  //     ? "Loading..."
+  //     : (lesson?.title ?? "Lesson");
+
+  const modalTitle =
+    selectedLessonData.name || selectedLessonData.id || "Lesson";
 
   useEffect(() => {
     if (!open) {

src/pages/student/Lessons.tsx

@@ -466,12 +466,15 @@ export const Lessons = () => {
 
   const [activeTab, setActiveTab] = useState<"rw" | "math" | "video">("rw");
   const [videoSubTab, setVideoSubTab] = useState<VideoSubTab>("rw");
-  const [selectedLessonId, setSelectedLessonId] = useState<string | null>(null);
+  const [selectedLessonData, setSelectedLessonData] = useState<{
+    id: string | null;
+    name: string | null;
+  }>({ id: null, name: null });
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
 
-  const handleLessonClick = (id: string) => {
-    setSelectedLessonId(id);
+  const handleLessonClick = (id: string, name: string) => {
+    setSelectedLessonData({ id, name });
     setIsModalOpen(true);
   };
 
@@ -565,7 +568,7 @@ export const Lessons = () => {
             <div
               key={lesson.id}
               className="ls-lesson-row"
-              onClick={() => handleLessonClick(lesson.id)}
+              onClick={() => handleLessonClick(lesson.id, lesson.title)}
             >
               <span className="ls-row-num">
                 {String(li + 1).padStart(2, "0")}
@@ -764,10 +767,10 @@ export const Lessons = () => {
 
       <LessonModal
         open={isModalOpen}
-        lessonId={selectedLessonId}
+        selectedLessonData={selectedLessonData}
         onOpenChange={(open) => {
           setIsModalOpen(open);
-          if (!open) setSelectedLessonId(null);
+          if (!open) setSelectedLessonData({ id: null, name: null });
         }}
       />
     </div>