From 088d4e2e2d80b84eb167481f937c8f1eda230743 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Fri, 18 Oct 2024 12:58:36 +0600
Subject: [PATCH] wip

---
 src/components/Course/ChallengeView.tsx       |  4 +--
 src/components/Course/CourseLayout.tsx        | 13 +++++++--
 src/components/Course/CourseSidebar.tsx       |  3 ++-
 src/components/Course/LessonView.tsx          |  4 +--
 src/components/Course/QuizView.tsx            |  2 +-
 .../SqlCodeEditor/SqlCodeEditor.tsx           | 27 +++++++------------
 .../SqlCodeEditor/SqlTableResult.tsx          |  8 ------
 7 files changed, 28 insertions(+), 33 deletions(-)

diff --git a/src/components/Course/ChallengeView.tsx b/src/components/Course/ChallengeView.tsx
index af32ad66f..83c0118c3 100644
--- a/src/components/Course/ChallengeView.tsx
+++ b/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}
diff --git a/src/components/Course/CourseLayout.tsx b/src/components/Course/CourseLayout.tsx
index 50c96c820..1b12cf60f 100644
--- a/src/components/Course/CourseLayout.tsx
+++ b/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}
diff --git a/src/components/Course/CourseSidebar.tsx b/src/components/Course/CourseSidebar.tsx
index 91d1a902f..95cb199e9 100644
--- a/src/components/Course/CourseSidebar.tsx
+++ b/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;
 };
diff --git a/src/components/Course/LessonView.tsx b/src/components/Course/LessonView.tsx
index 5db7182eb..cd6ef2840 100644
--- a/src/components/Course/LessonView.tsx
+++ b/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}
diff --git a/src/components/Course/QuizView.tsx b/src/components/Course/QuizView.tsx
index 49932e887..6002e695d 100644
--- a/src/components/Course/QuizView.tsx
+++ b/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}
diff --git a/src/components/SqlCodeEditor/SqlCodeEditor.tsx b/src/components/SqlCodeEditor/SqlCodeEditor.tsx
index d1c25a288..f1fbfc5ee 100644
--- a/src/components/SqlCodeEditor/SqlCodeEditor.tsx
+++ b/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>
diff --git a/src/components/SqlCodeEditor/SqlTableResult.tsx b/src/components/SqlCodeEditor/SqlTableResult.tsx
index 55d8da22c..a43e040b6 100644
--- a/src/components/SqlCodeEditor/SqlTableResult.tsx
+++ b/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>
         )}