wip

src/components/Course/ChallengeView.tsx

@@ -27,8 +27,7 @@ type ChallengeViewProps = {
 };
 
 export function ChallengeView(props: ChallengeViewProps) {
-  const { children, title, course, lesson, courseId, lessonId, chapterId } =
-    props;
+  const { children, title, course, lesson, courseId, chapterId } = props;
   const { chapters } = course;
 
   const { frontmatter } = lesson;
@@ -39,6 +38,7 @@ export function ChallengeView(props: ChallengeViewProps) {
       courseId={courseId}
       chapterId={chapterId}
       lessonId={lesson.id}
+      lesson={lesson}
       title={title}
       chapters={chapters}
       completedPercentage={0}

src/components/Course/CourseLayout.tsx

@@ -3,12 +3,13 @@ import { CourseSidebar, type CourseSidebarProps } from './CourseSidebar';
 import { useMemo } from 'react';
 
 type CourseLayoutProps = {
+  isSubmitted?: boolean;
   children: React.ReactNode;
 } & CourseSidebarProps;
 
 export function CourseLayout(props: CourseLayoutProps) {
-  const { children, ...sidebarProps } = props;
-  const { chapters, courseId, chapterId, lessonId } = sidebarProps;
+  const { children, isSubmitted, ...sidebarProps } = props;
+  const { chapters, courseId, chapterId, lessonId, lesson } = sidebarProps;
 
   const allLessonLinks = useMemo(() => {
     const lessons: string[] = [];
@@ -51,6 +52,14 @@ export function CourseLayout(props: CourseLayoutProps) {
           <button
             className="flex items-center gap-1 rounded-lg border border-zinc-800 px-2 py-1.5 text-sm leading-none disabled:opacity-60"
             onClick={() => {
+              if (!isSubmitted && lesson?.frontmatter?.type !== 'lesson') {
+                // show a warning modal
+                window.alert(
+                  'Please submit your answer before moving to the next lesson.',
+                );
+                return;
+              }
+
               window.location.href = nextLessonLink;
             }}
             disabled={!nextLessonLink}

src/components/Course/CourseSidebar.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import type { ChapterFileType } from '../../lib/course';
+import type { ChapterFileType, LessonFileType } from '../../lib/course';
 import { Chapter } from './Chapter';
 
 export type CourseSidebarProps = {
@@ -9,6 +9,7 @@ export type CourseSidebarProps = {
 
   title: string;
   chapters: ChapterFileType[];
+  lesson: LessonFileType;
 
   completedPercentage: number;
 };

src/components/Course/LessonView.tsx

@@ -23,8 +23,7 @@ type LessonViewProps = {
 };
 
 export function LessonView(props: LessonViewProps) {
-  const { children, title, course, lesson, courseId, lessonId, chapterId } =
-    props;
+  const { children, title, course, lesson, courseId, chapterId } = props;
   const { chapters } = course;
 
   return (
@@ -32,6 +31,7 @@ export function LessonView(props: LessonViewProps) {
       courseId={courseId}
       chapterId={chapterId}
       lessonId={lesson.id}
+      lesson={lesson}
       title={title}
       chapters={chapters}
       completedPercentage={0}

src/components/Course/QuizView.tsx

@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { CourseSidebar } from './CourseSidebar';
 import { CourseLayout } from './CourseLayout';
 import { Circle, CircleCheck, CircleX } from 'lucide-react';
 import { cn } from '../../lib/classname';
@@ -50,6 +49,7 @@ export function QuizView(props: QuizViewProps) {
       courseId={courseId}
       chapterId={chapterId}
       lessonId={lesson.id}
+      lesson={lesson}
       title={title}
       chapters={chapters}
       completedPercentage={0}

src/components/SqlCodeEditor/SqlCodeEditor.tsx

@@ -19,10 +19,17 @@ export type SqlCodeEditorProps = {
 
   initSteps?: string[];
   expectedResults?: QueryExecResult[];
+
+  onQuerySubmit?: () => void;
 };
 
 export function SqlCodeEditor(props: SqlCodeEditorProps) {
-  const { defaultValue, initSteps = [], expectedResults } = props;
+  const {
+    defaultValue,
+    initSteps = [],
+    expectedResults,
+    onQuerySubmit,
+  } = props;
 
   const editorRef = useRef<HTMLDivElement>(null);
   const [queryResult, setQueryResult] = useState<QueryExecResult[] | null>(
@@ -141,27 +148,13 @@ export function SqlCodeEditor(props: SqlCodeEditorProps) {
                 return;
               }
 
-              const { results, error } = handleQuery(query);
-              setQueryResult(results);
-              setQueryError(error);
-              setIsSubmitted(false);
-            }}
-          />
-
-          <DatabaseActionButton
-            label="Submit"
-            onClick={() => {
-              const query = editor?.state?.doc.toString();
-              if (!query) {
-                return;
-              }
-
               const { results, error } = handleQuery(query);
               setQueryResult(results);
               setQueryError(error);
               setIsSubmitted(true);
+
+              onQuerySubmit?.();
             }}
-            className="bg-zinc-800 px-3 text-white"
           />
         </div>
       </ResizablePanel>

src/components/SqlCodeEditor/SqlTableResult.tsx

@@ -6,7 +6,6 @@ type SqlTableResultProps = {
   error?: string;
 
   onTryAgain?: () => void;
-  onNext?: () => void;
 
   matchAnswers?: boolean;
   expectedResults?: QueryExecResult[] | null;
@@ -16,7 +15,6 @@ export function SqlTableResult(props: SqlTableResultProps) {
   const {
     results,
     error,
-    onNext,
     onTryAgain,
     expectedResults,
     matchAnswers = false,
@@ -53,12 +51,6 @@ export function SqlTableResult(props: SqlTableResultProps) {
               >
                 Yes, I want to try again
               </button>
-              <button
-                className="rounded-md bg-zinc-800 px-2 py-0.5 outline-none focus:outline-none"
-                onClick={onNext}
-              >
-                No, move to next
-              </button>
             </div>
           </div>
         )}