Arik Chakma
2 months ago
parent
5e0ff6c780
commit
bacc972713
20 changed files with 1637 additions and 0 deletions
@ -0,0 +1,42 @@ |
|||||||
|
import { |
||||||
|
ResizableHandle, |
||||||
|
ResizablePanel, |
||||||
|
ResizablePanelGroup, |
||||||
|
} from '../Resizable'; |
||||||
|
import { CourseSidebar } from './CourseSidebar'; |
||||||
|
import { CourseLayout } from './CourseLayout'; |
||||||
|
import { |
||||||
|
SqlCodeEditor, |
||||||
|
type SqlCodeEditorProps, |
||||||
|
} from '../SqlCodeEditor/SqlCodeEditor'; |
||||||
|
import type { ReactNode } from 'react'; |
||||||
|
|
||||||
|
type ChallengeViewProps = SqlCodeEditorProps & { |
||||||
|
children: ReactNode; |
||||||
|
}; |
||||||
|
|
||||||
|
export function ChallengeView(props: ChallengeViewProps) { |
||||||
|
const { children, ...sqlCodeEditorProps } = props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<CourseLayout> |
||||||
|
<CourseSidebar /> |
||||||
|
|
||||||
|
<ResizablePanelGroup direction="horizontal"> |
||||||
|
<ResizablePanel defaultSize={60} minSize={20}> |
||||||
|
<div className="relative h-full"> |
||||||
|
<div className="absolute inset-0 overflow-y-auto [scrollbar-color:#3f3f46_#27272a;]"> |
||||||
|
<div className="mx-auto max-w-xl p-4">{children}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</ResizablePanel> |
||||||
|
|
||||||
|
<ResizableHandle withHandle={true} /> |
||||||
|
|
||||||
|
<ResizablePanel defaultSize={40} minSize={20}> |
||||||
|
<SqlCodeEditor {...sqlCodeEditorProps} /> |
||||||
|
</ResizablePanel> |
||||||
|
</ResizablePanelGroup> |
||||||
|
</CourseLayout> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,102 @@ |
|||||||
|
import { Check } from 'lucide-react'; |
||||||
|
import { cn } from '../../lib/classname'; |
||||||
|
|
||||||
|
export type Lesson = { |
||||||
|
slug: string; |
||||||
|
index: number; |
||||||
|
title: string; |
||||||
|
}; |
||||||
|
|
||||||
|
export type Quiz = { |
||||||
|
slug: string; |
||||||
|
index: number; |
||||||
|
title: string; |
||||||
|
}; |
||||||
|
|
||||||
|
export type Challenge = { |
||||||
|
slug: string; |
||||||
|
index: number; |
||||||
|
title: string; |
||||||
|
}; |
||||||
|
|
||||||
|
export type Chapter = { |
||||||
|
index: number; |
||||||
|
slug: string; |
||||||
|
title: string; |
||||||
|
lessons: Lesson[]; |
||||||
|
exercises: (Quiz | Challenge)[]; |
||||||
|
}; |
||||||
|
|
||||||
|
type ChapterProps = Chapter & { |
||||||
|
isActive?: boolean; |
||||||
|
isCompleted?: boolean; |
||||||
|
}; |
||||||
|
|
||||||
|
export function Chapter(props: ChapterProps) { |
||||||
|
const { index, title, lessons, exercises, isActive = false } = props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<button |
||||||
|
className={cn( |
||||||
|
'flex w-full items-center gap-2 border-b border-zinc-800 p-2 text-sm', |
||||||
|
isActive && 'bg-zinc-300 text-zinc-900', |
||||||
|
)} |
||||||
|
> |
||||||
|
<div className="flex size-5 items-center justify-center rounded-full bg-zinc-700 text-xs text-white"> |
||||||
|
{index} |
||||||
|
</div> |
||||||
|
<span>{title}</span> |
||||||
|
</button> |
||||||
|
|
||||||
|
{isActive && ( |
||||||
|
<div className="flex flex-col border-b border-zinc-800"> |
||||||
|
<div> |
||||||
|
{lessons.map((lesson) => ( |
||||||
|
<Lesson key={lesson.slug} {...lesson} isCompleted={false} /> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="relative"> |
||||||
|
<label className="relative z-10 my-2 ml-2 block max-w-max rounded-md bg-zinc-800 p-1 px-2 text-xs"> |
||||||
|
Exercises |
||||||
|
</label> |
||||||
|
|
||||||
|
<span className="absolute left-[17px] top-0 h-full w-0.5 bg-zinc-700"></span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div> |
||||||
|
{exercises.map((exercise) => ( |
||||||
|
<Lesson key={exercise.slug} {...exercise} isCompleted={false} /> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
type LessonProps = (Lesson | Quiz | Challenge) & { |
||||||
|
isActive?: boolean; |
||||||
|
isCompleted?: boolean; |
||||||
|
}; |
||||||
|
|
||||||
|
export function Lesson(props: LessonProps) { |
||||||
|
const { title, isCompleted, isActive } = props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<a |
||||||
|
className={cn( |
||||||
|
'relative flex w-full items-center gap-2 p-2 text-sm text-zinc-600', |
||||||
|
isActive && 'bg-zinc-800 text-white', |
||||||
|
)} |
||||||
|
> |
||||||
|
<div className="relative z-10 flex size-5 items-center justify-center rounded-full bg-zinc-700 text-xs text-white"> |
||||||
|
{isCompleted && <Check className="h-4 w-4" />} |
||||||
|
</div> |
||||||
|
<span>{title}</span> |
||||||
|
|
||||||
|
<span className="absolute left-[17px] top-0 h-full w-0.5 bg-zinc-700"></span> |
||||||
|
</a> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
type CourseLayoutProps = { |
||||||
|
children: React.ReactNode; |
||||||
|
}; |
||||||
|
|
||||||
|
export function CourseLayout(props: CourseLayoutProps) { |
||||||
|
const { children } = props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<section className="grid h-screen grid-cols-[240px_1fr] overflow-hidden bg-zinc-900 text-zinc-50"> |
||||||
|
{children} |
||||||
|
</section> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,81 @@ |
|||||||
|
import { Chapter } from './Chapter'; |
||||||
|
|
||||||
|
export function CourseSidebar() { |
||||||
|
return ( |
||||||
|
<aside className="border-r border-zinc-800"> |
||||||
|
<div className="border-b border-zinc-800 p-4"> |
||||||
|
<h2 className="text-lg font-semibold">Learn SQL</h2> |
||||||
|
|
||||||
|
<div className="mt-4"> |
||||||
|
<span>5% Completed</span> |
||||||
|
<div className="mt-2 h-1 w-full bg-zinc-800"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="relative h-full"> |
||||||
|
<div className="absolute inset-0 overflow-y-auto [scrollbar-color:#3f3f46_#27272a;]"> |
||||||
|
<Chapter |
||||||
|
slug="1" |
||||||
|
index={1} |
||||||
|
title="DDL Queries" |
||||||
|
lessons={[ |
||||||
|
{ |
||||||
|
slug: '1', |
||||||
|
index: 1, |
||||||
|
title: 'Creating Tables', |
||||||
|
}, |
||||||
|
{ |
||||||
|
slug: '2', |
||||||
|
index: 2, |
||||||
|
title: 'Altering Tables', |
||||||
|
}, |
||||||
|
]} |
||||||
|
exercises={[ |
||||||
|
{ |
||||||
|
slug: '3', |
||||||
|
index: 1, |
||||||
|
title: 'Quiz 1', |
||||||
|
}, |
||||||
|
{ |
||||||
|
slug: '4', |
||||||
|
index: 2, |
||||||
|
title: 'Challenge 1', |
||||||
|
}, |
||||||
|
]} |
||||||
|
/> |
||||||
|
|
||||||
|
<Chapter |
||||||
|
slug="2" |
||||||
|
index={2} |
||||||
|
title="DML Queries" |
||||||
|
isActive={true} |
||||||
|
lessons={[ |
||||||
|
{ |
||||||
|
slug: '5', |
||||||
|
index: 1, |
||||||
|
title: 'Inserting Data', |
||||||
|
}, |
||||||
|
{ |
||||||
|
slug: '6', |
||||||
|
index: 2, |
||||||
|
title: 'Updating Data', |
||||||
|
}, |
||||||
|
]} |
||||||
|
exercises={[ |
||||||
|
{ |
||||||
|
slug: '7', |
||||||
|
index: 1, |
||||||
|
title: 'Quiz 2', |
||||||
|
}, |
||||||
|
{ |
||||||
|
slug: '8', |
||||||
|
index: 2, |
||||||
|
title: 'Challenge 2', |
||||||
|
}, |
||||||
|
]} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</aside> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { useState, type ReactNode } from 'react'; |
||||||
|
import { CourseSidebar } from './CourseSidebar'; |
||||||
|
import { CourseLayout } from './CourseLayout'; |
||||||
|
import { Circle, CircleCheck, CircleX } from 'lucide-react'; |
||||||
|
import { cn } from '../../lib/classname'; |
||||||
|
|
||||||
|
type LessonViewProps = { |
||||||
|
children: ReactNode; |
||||||
|
}; |
||||||
|
|
||||||
|
export function LessonView(props: LessonViewProps) { |
||||||
|
const { children } = props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<CourseLayout> |
||||||
|
<CourseSidebar /> |
||||||
|
|
||||||
|
<div className="relative h-full"> |
||||||
|
<div className="absolute inset-0 overflow-y-auto [scrollbar-color:#3f3f46_#27272a;]"> |
||||||
|
<div className="mx-auto max-w-xl p-4 py-10">{children}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</CourseLayout> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,235 @@ |
|||||||
|
import { useState } from 'react'; |
||||||
|
import { CourseSidebar } from './CourseSidebar'; |
||||||
|
import { CourseLayout } from './CourseLayout'; |
||||||
|
import { Circle, CircleCheck, CircleX } from 'lucide-react'; |
||||||
|
import { cn } from '../../lib/classname'; |
||||||
|
|
||||||
|
const questions = [ |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
title: |
||||||
|
'Which of the following SQL clauses is used to filter results after the GROUP BY clause?', |
||||||
|
options: [ |
||||||
|
{ id: 1, text: 'WHERE' }, |
||||||
|
{ id: 2, text: 'HAVING', isCorrectOption: true }, |
||||||
|
{ id: 3, text: 'GROUP BY' }, |
||||||
|
{ id: 4, text: 'ORDER BY' }, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
title: |
||||||
|
'Which SQL function is used to return the first non-null expression?', |
||||||
|
options: [ |
||||||
|
{ id: 1, text: 'COALESCE', isCorrectOption: true }, |
||||||
|
{ id: 2, text: 'IFNULL' }, |
||||||
|
{ id: 3, text: 'NULLIF' }, |
||||||
|
{ id: 4, text: 'NVL' }, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 3, |
||||||
|
title: 'What is the purpose of an SQL CTE (Common Table Expression)?', |
||||||
|
options: [ |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
text: 'To create temporary tables that last for the duration of a query', |
||||||
|
isCorrectOption: true, |
||||||
|
}, |
||||||
|
{ id: 2, text: 'To define reusable views' }, |
||||||
|
{ id: 3, text: 'To encapsulate subqueries' }, |
||||||
|
{ id: 4, text: 'To optimize the execution of queries' }, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 4, |
||||||
|
title: |
||||||
|
'In an SQL window function, which clause defines the subset of rows to apply the function on?', |
||||||
|
options: [ |
||||||
|
{ id: 1, text: 'ORDER BY' }, |
||||||
|
{ id: 2, text: 'PARTITION BY', isCorrectOption: true }, |
||||||
|
{ id: 3, text: 'GROUP BY' }, |
||||||
|
{ id: 4, text: 'DISTINCT' }, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 5, |
||||||
|
title: |
||||||
|
'Which SQL join returns all rows when there is a match in either of the tables?', |
||||||
|
options: [ |
||||||
|
{ id: 1, text: 'INNER JOIN' }, |
||||||
|
{ id: 2, text: 'LEFT JOIN' }, |
||||||
|
{ id: 3, text: 'RIGHT JOIN' }, |
||||||
|
{ id: 4, text: 'FULL OUTER JOIN', isCorrectOption: true }, |
||||||
|
], |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
export function QuizView() { |
||||||
|
const [selectedOptions, setSelectedOptions] = useState< |
||||||
|
Record<number, number | undefined> |
||||||
|
>({}); |
||||||
|
|
||||||
|
const [isSubmitted, setIsSubmitted] = useState(false); |
||||||
|
|
||||||
|
const isAllAnswered = |
||||||
|
Object.keys(selectedOptions).length === questions.length; |
||||||
|
const correctAnswerCount = questions.filter((question) => { |
||||||
|
const selectedOptionId = selectedOptions?.[question.id]; |
||||||
|
const correctAnswerId = question.options.find( |
||||||
|
(option) => option.isCorrectOption, |
||||||
|
)?.id; |
||||||
|
|
||||||
|
return selectedOptionId === correctAnswerId; |
||||||
|
}).length; |
||||||
|
|
||||||
|
return ( |
||||||
|
<CourseLayout> |
||||||
|
<CourseSidebar /> |
||||||
|
|
||||||
|
<div className="relative h-full"> |
||||||
|
<div className="absolute inset-0 overflow-y-auto [scrollbar-color:#3f3f46_#27272a;]"> |
||||||
|
<div className="mx-auto max-w-xl p-4 py-10"> |
||||||
|
<h3 className="mb-10 text-lg font-semibold"> |
||||||
|
SQL Quiz: Intermediate |
||||||
|
</h3> |
||||||
|
|
||||||
|
<div className="flex flex-col gap-3"> |
||||||
|
{questions.map((question) => { |
||||||
|
return ( |
||||||
|
<QuizItem |
||||||
|
key={question.id} |
||||||
|
id={question.id} |
||||||
|
title={question.title} |
||||||
|
disabled={status === 'submitted'} |
||||||
|
options={question.options.map((option) => { |
||||||
|
const selectedOptionId = selectedOptions?.[question.id]; |
||||||
|
|
||||||
|
let optionStatus: QuizOptionStatus = 'default'; |
||||||
|
if (option.isCorrectOption && isSubmitted) { |
||||||
|
optionStatus = 'correct'; |
||||||
|
} else if (selectedOptionId === option.id) { |
||||||
|
optionStatus = isSubmitted ? 'wrong' : 'selected'; |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
...option, |
||||||
|
status: optionStatus, |
||||||
|
}; |
||||||
|
})} |
||||||
|
onOptionSelectChange={(id, optionId) => { |
||||||
|
setSelectedOptions((prev) => ({ |
||||||
|
...prev, |
||||||
|
[id]: optionId, |
||||||
|
})); |
||||||
|
}} |
||||||
|
selectedOptionId={selectedOptions?.[question.id]} |
||||||
|
/> |
||||||
|
); |
||||||
|
})} |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="mt-8 flex items-center justify-end"> |
||||||
|
<button |
||||||
|
className="rounded-xl border border-zinc-700 bg-zinc-800 p-2 px-4 text-sm font-medium text-white focus:outline-none disabled:cursor-not-allowed disabled:opacity-50" |
||||||
|
disabled={isSubmitted || !isAllAnswered} |
||||||
|
onClick={() => { |
||||||
|
setIsSubmitted(true); |
||||||
|
}} |
||||||
|
> |
||||||
|
Submit my Answers |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
{isSubmitted && ( |
||||||
|
<div className="mt-8 flex items-center justify-between gap-2 rounded-xl border border-zinc-800 p-4"> |
||||||
|
<span> |
||||||
|
You got {correctAnswerCount} out of {questions.length}{' '} |
||||||
|
questions right |
||||||
|
</span> |
||||||
|
|
||||||
|
<a className="disabled:cusror-not-allowed rounded-xl border border-zinc-700 bg-zinc-800 p-2 px-4 text-sm font-medium text-white focus:outline-none"> |
||||||
|
Move to Next Lesson |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</CourseLayout> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
type QuizItemProps = { |
||||||
|
id: number; |
||||||
|
title: string; |
||||||
|
options: QuizOptionProps[]; |
||||||
|
|
||||||
|
disabled?: boolean; |
||||||
|
selectedOptionId?: number; |
||||||
|
onOptionSelectChange?: (id: number, optionId: number) => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export function QuizItem(props: QuizItemProps) { |
||||||
|
const { id, title, options, onOptionSelectChange, disabled } = props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="rounded-2xl bg-zinc-800 p-4"> |
||||||
|
<h3 className="mx-2 text-balance text-lg font-medium">{title}</h3> |
||||||
|
|
||||||
|
<div className="mt-4 flex flex-col gap-1"> |
||||||
|
{options.map((option, index) => { |
||||||
|
return ( |
||||||
|
<QuizOption |
||||||
|
key={index} |
||||||
|
id={option.id} |
||||||
|
text={option.text} |
||||||
|
status={option.status} |
||||||
|
onSelect={() => onOptionSelectChange?.(id, option.id)} |
||||||
|
disabled={disabled} |
||||||
|
/> |
||||||
|
); |
||||||
|
})} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
type QuizOptionStatus = 'selected' | 'wrong' | 'correct' | 'default'; |
||||||
|
|
||||||
|
type QuizOptionProps = { |
||||||
|
id: number; |
||||||
|
text: string; |
||||||
|
isCorrectOption?: boolean; |
||||||
|
status?: QuizOptionStatus; |
||||||
|
|
||||||
|
disabled?: boolean; |
||||||
|
onSelect?: () => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export function QuizOption(props: QuizOptionProps) { |
||||||
|
const { text, status = 'default', onSelect, disabled } = props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<button |
||||||
|
onClick={onSelect} |
||||||
|
className={cn( |
||||||
|
'flex items-start gap-2 rounded-xl p-2 text-sm disabled:cursor-not-allowed', |
||||||
|
status === 'selected' && 'ring-1 ring-zinc-500', |
||||||
|
status === 'wrong' && 'text-red-500 ring-1 ring-red-500', |
||||||
|
status === 'correct' && 'text-green-500 ring-1 ring-green-500', |
||||||
|
status === 'default' && 'hover:bg-zinc-700', |
||||||
|
)} |
||||||
|
disabled={disabled} |
||||||
|
> |
||||||
|
<span className="mt-0.5"> |
||||||
|
{status === 'wrong' && <CircleX className="size-4" />} |
||||||
|
{status === 'correct' && <CircleCheck className="size-4" />} |
||||||
|
{(status === 'selected' || status === 'default') && ( |
||||||
|
<Circle className="size-4" /> |
||||||
|
)} |
||||||
|
</span> |
||||||
|
<p>{text}</p> |
||||||
|
</button> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,42 @@ |
|||||||
|
import { GripVertical } from 'lucide-react'; |
||||||
|
import * as ResizablePrimitive from 'react-resizable-panels'; |
||||||
|
import { cn } from '../lib/classname'; |
||||||
|
|
||||||
|
const ResizablePanelGroup = ({ |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => ( |
||||||
|
<ResizablePrimitive.PanelGroup |
||||||
|
className={cn( |
||||||
|
'flex h-full w-full data-[panel-group-direction=vertical]:flex-col', |
||||||
|
className, |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
); |
||||||
|
|
||||||
|
const ResizablePanel = ResizablePrimitive.Panel; |
||||||
|
|
||||||
|
const ResizableHandle = ({ |
||||||
|
withHandle, |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & { |
||||||
|
withHandle?: boolean; |
||||||
|
}) => ( |
||||||
|
<ResizablePrimitive.PanelResizeHandle |
||||||
|
className={cn( |
||||||
|
'focus-visible:ring-ring relative flex w-px items-center justify-center bg-zinc-800 after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90', |
||||||
|
className, |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
{withHandle && ( |
||||||
|
<div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border border-zinc-800 bg-zinc-800"> |
||||||
|
<GripVertical className="h-2.5 w-2.5 text-zinc-500" /> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</ResizablePrimitive.PanelResizeHandle> |
||||||
|
); |
||||||
|
|
||||||
|
export { ResizablePanelGroup, ResizablePanel, ResizableHandle }; |
||||||
@ -0,0 +1,210 @@ |
|||||||
|
import { useRef, useState } from 'react'; |
||||||
|
import { |
||||||
|
ResizableHandle, |
||||||
|
ResizablePanel, |
||||||
|
ResizablePanelGroup, |
||||||
|
} from '../Resizable'; |
||||||
|
import { SqlTableResult } from './SqlTableResult'; |
||||||
|
import { type QueryExecResult } from 'sql.js'; |
||||||
|
import { useSqlEditor } from './use-sql-editor'; |
||||||
|
import { sql } from '@codemirror/lang-sql'; |
||||||
|
import { Prec } from '@codemirror/state'; |
||||||
|
import { keymap } from '@codemirror/view'; |
||||||
|
import { type LucideIcon, Play, WandSparkles } from 'lucide-react'; |
||||||
|
import { useSqlite } from './use-sqlite'; |
||||||
|
import { cn } from '../../lib/classname'; |
||||||
|
|
||||||
|
export type SqlCodeEditorProps = { |
||||||
|
defaultValue?: string; |
||||||
|
|
||||||
|
initSteps?: string[]; |
||||||
|
expectedResults?: QueryExecResult[]; |
||||||
|
}; |
||||||
|
|
||||||
|
export function SqlCodeEditor(props: SqlCodeEditorProps) { |
||||||
|
const { defaultValue, initSteps = [], expectedResults } = props; |
||||||
|
|
||||||
|
const editorRef = useRef<HTMLDivElement>(null); |
||||||
|
const [queryResult, setQueryResult] = useState<QueryExecResult[] | null>( |
||||||
|
null, |
||||||
|
); |
||||||
|
const [queryError, setQueryError] = useState<string | undefined>(); |
||||||
|
const [isSubmitted, setIsSubmitted] = useState<boolean>(false); |
||||||
|
|
||||||
|
const formatQuery = async (query: string) => { |
||||||
|
const { format } = await import('sql-formatter'); |
||||||
|
const formatted = format(query, { |
||||||
|
expressionWidth: 40, |
||||||
|
language: 'sql', |
||||||
|
keywordCase: 'upper', |
||||||
|
}); |
||||||
|
return formatted; |
||||||
|
}; |
||||||
|
|
||||||
|
const sqlite = useSqlite(); |
||||||
|
|
||||||
|
const editor = useSqlEditor({ |
||||||
|
container: editorRef, |
||||||
|
value: defaultValue, |
||||||
|
extensions: [ |
||||||
|
sql({ |
||||||
|
upperCaseKeywords: true, |
||||||
|
schemas: [], |
||||||
|
}), |
||||||
|
Prec.highest( |
||||||
|
keymap.of([ |
||||||
|
{ |
||||||
|
key: 'Mod-s', |
||||||
|
run: (view) => { |
||||||
|
const query = view.state.doc.toString(); |
||||||
|
formatQuery(query).then((formatted) => { |
||||||
|
view.dispatch({ |
||||||
|
changes: { |
||||||
|
from: 0, |
||||||
|
to: view.state.doc.length, |
||||||
|
insert: formatted, |
||||||
|
}, |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
return true; |
||||||
|
}, |
||||||
|
}, |
||||||
|
]), |
||||||
|
), |
||||||
|
], |
||||||
|
}); |
||||||
|
|
||||||
|
const handleQuery = (query: string) => { |
||||||
|
try { |
||||||
|
if (!sqlite) { |
||||||
|
throw new Error('SQLite is not initialized'); |
||||||
|
} |
||||||
|
|
||||||
|
const db = new sqlite.Database(); |
||||||
|
initSteps.forEach((step) => { |
||||||
|
db.exec(step); |
||||||
|
}); |
||||||
|
|
||||||
|
const results = db.exec(query); |
||||||
|
db.close(); |
||||||
|
return { |
||||||
|
results, |
||||||
|
error: undefined, |
||||||
|
}; |
||||||
|
} catch (error) { |
||||||
|
const err = error as Error; |
||||||
|
return { |
||||||
|
results: null, |
||||||
|
error: err.message, |
||||||
|
}; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<ResizablePanelGroup direction="vertical"> |
||||||
|
<ResizablePanel defaultSize={65} className="flex flex-col"> |
||||||
|
<div className="relative grow"> |
||||||
|
<div |
||||||
|
id="editor" |
||||||
|
ref={editorRef} |
||||||
|
data-enable-grammarly={false} |
||||||
|
className="absolute inset-x-0 inset-y-2 overflow-y-auto [scrollbar-color:#3f3f46_#27272a;] [&>div]:h-full" |
||||||
|
></div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="flex items-center justify-end gap-1 border-t border-zinc-800 p-2"> |
||||||
|
<DatabaseActionButton |
||||||
|
icon={WandSparkles} |
||||||
|
onClick={async () => { |
||||||
|
const query = editor?.state?.doc.toString(); |
||||||
|
if (!query) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const formatted = await formatQuery(query); |
||||||
|
editor?.dispatch({ |
||||||
|
changes: { |
||||||
|
from: 0, |
||||||
|
to: editor?.state?.doc.length, |
||||||
|
insert: formatted, |
||||||
|
}, |
||||||
|
}); |
||||||
|
}} |
||||||
|
/> |
||||||
|
|
||||||
|
<DatabaseActionButton |
||||||
|
icon={Play} |
||||||
|
onClick={() => { |
||||||
|
const query = editor?.state?.doc.toString(); |
||||||
|
if (!query) { |
||||||
|
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); |
||||||
|
}} |
||||||
|
className="bg-zinc-800 px-3 text-white" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</ResizablePanel> |
||||||
|
|
||||||
|
<ResizableHandle withHandle={true} /> |
||||||
|
|
||||||
|
<ResizablePanel defaultSize={35}> |
||||||
|
<SqlTableResult |
||||||
|
results={queryResult} |
||||||
|
error={queryError} |
||||||
|
matchAnswers={isSubmitted} |
||||||
|
expectedResults={expectedResults} |
||||||
|
onTryAgain={() => { |
||||||
|
setQueryResult(null); |
||||||
|
setQueryError(undefined); |
||||||
|
setIsSubmitted(false); |
||||||
|
}} |
||||||
|
/> |
||||||
|
</ResizablePanel> |
||||||
|
</ResizablePanelGroup> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
type DatabaseActionButtonProps = { |
||||||
|
icon?: LucideIcon; |
||||||
|
label?: string; |
||||||
|
onClick?: () => void; |
||||||
|
className?: string; |
||||||
|
}; |
||||||
|
|
||||||
|
function DatabaseActionButton(props: DatabaseActionButtonProps) { |
||||||
|
const { icon: Icon, label, onClick, className } = props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<button |
||||||
|
className={cn( |
||||||
|
'flex h-[30px] min-w-[30px] items-center justify-center gap-1.5 rounded-md p-1 text-sm text-zinc-200 outline-none hover:bg-zinc-800 hover:text-white focus:outline-none', |
||||||
|
className, |
||||||
|
)} |
||||||
|
onClick={onClick} |
||||||
|
> |
||||||
|
{Icon && <Icon className="h-4 w-4" />} |
||||||
|
{label && <span>{label}</span>} |
||||||
|
</button> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,115 @@ |
|||||||
|
import { ServerCrash } from 'lucide-react'; |
||||||
|
import type { QueryExecResult } from 'sql.js'; |
||||||
|
|
||||||
|
type SqlTableResultProps = { |
||||||
|
results: QueryExecResult[] | null; |
||||||
|
error?: string; |
||||||
|
|
||||||
|
onTryAgain?: () => void; |
||||||
|
onNext?: () => void; |
||||||
|
|
||||||
|
matchAnswers?: boolean; |
||||||
|
expectedResults?: QueryExecResult[] | null; |
||||||
|
}; |
||||||
|
|
||||||
|
export function SqlTableResult(props: SqlTableResultProps) { |
||||||
|
const { |
||||||
|
results, |
||||||
|
error, |
||||||
|
onNext, |
||||||
|
onTryAgain, |
||||||
|
expectedResults, |
||||||
|
matchAnswers = false, |
||||||
|
} = props; |
||||||
|
|
||||||
|
const isCorrectAnswer = |
||||||
|
results && |
||||||
|
expectedResults && |
||||||
|
results.length === expectedResults.length && |
||||||
|
results.every((result, index) => { |
||||||
|
const expected = expectedResults[index]; |
||||||
|
return ( |
||||||
|
result.columns.length === expected.columns.length && |
||||||
|
result.values.length === expected.values.length && |
||||||
|
result.columns.every((column, i) => column === expected.columns[i]) && |
||||||
|
result.values.every((row, i) => |
||||||
|
row.every((cell, j) => cell === expected.values[i][j]), |
||||||
|
) |
||||||
|
); |
||||||
|
}); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="relative h-full w-full"> |
||||||
|
<div className="absolute inset-0 overflow-y-auto [scrollbar-color:#3f3f46_#27272a;]"> |
||||||
|
{!isCorrectAnswer && results && expectedResults && matchAnswers && ( |
||||||
|
<div className="border-b border-zinc-800 p-1 py-8 text-sm"> |
||||||
|
<p className="text-balance text-center"> |
||||||
|
Wrong answer! Do you want to try again? |
||||||
|
</p> |
||||||
|
<div className="mt-2 flex items-center justify-center gap-2"> |
||||||
|
<button |
||||||
|
className="rounded-md bg-zinc-800 px-2 py-0.5 outline-none focus:outline-none" |
||||||
|
onClick={onTryAgain} |
||||||
|
> |
||||||
|
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> |
||||||
|
)} |
||||||
|
|
||||||
|
{error && !results && ( |
||||||
|
<div className="mt-4 flex flex-col items-center justify-center p-2 text-center text-red-500"> |
||||||
|
<ServerCrash className="h-8 w-8" /> |
||||||
|
<span className="mt-4">{error}</span> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
|
||||||
|
{results && ( |
||||||
|
<> |
||||||
|
{results.length === 0 && ( |
||||||
|
<p className="p-2 text-sm uppercase text-zinc-200">Ok</p> |
||||||
|
)} |
||||||
|
{results.map((result, index) => { |
||||||
|
return ( |
||||||
|
<table key={index} className="m-px text-left font-mono"> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
{result.columns.map((column, i) => ( |
||||||
|
<th |
||||||
|
key={i} |
||||||
|
className="border border-zinc-800 p-1 px-2 font-normal text-white" |
||||||
|
> |
||||||
|
{column} |
||||||
|
</th> |
||||||
|
))} |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
{result.values.map((row, index) => ( |
||||||
|
<tr key={index}> |
||||||
|
{row.map((cell, index) => ( |
||||||
|
<td |
||||||
|
key={index} |
||||||
|
className="border border-zinc-800 p-1 px-2 font-normal text-white" |
||||||
|
> |
||||||
|
{cell} |
||||||
|
</td> |
||||||
|
))} |
||||||
|
</tr> |
||||||
|
))} |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
); |
||||||
|
})} |
||||||
|
</> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,77 @@ |
|||||||
|
import { HighlightStyle } from '@codemirror/language'; |
||||||
|
import { EditorView } from 'codemirror'; |
||||||
|
import { tags as t } from '@lezer/highlight'; |
||||||
|
|
||||||
|
export const editorDarkTheme = EditorView.theme( |
||||||
|
{ |
||||||
|
// Styling for the editor background and text
|
||||||
|
'&': {}, |
||||||
|
// Styling for the editor when focused
|
||||||
|
'&.cm-focused': { |
||||||
|
outline: 'none', |
||||||
|
}, |
||||||
|
// Styling for code blocks
|
||||||
|
'.cm-content': {}, |
||||||
|
// Line number styles
|
||||||
|
'.cm-lineNumbers .cm-gutterElement': { |
||||||
|
color: '#757575', // Text color for line numbers
|
||||||
|
paddingRight: '1em', |
||||||
|
}, |
||||||
|
// Scrollbar styles
|
||||||
|
'.cm-scroller': { |
||||||
|
paddingRight: '12px', |
||||||
|
paddingLeft: '12px', |
||||||
|
}, |
||||||
|
'.cm-scroller::-webkit-scrollbar': {}, |
||||||
|
// Highlight active line
|
||||||
|
'.cm-activeLine': { |
||||||
|
backgroundColor: '#27272a', // Active line background color
|
||||||
|
}, |
||||||
|
// Cursor styles
|
||||||
|
'.cm-cursor': { |
||||||
|
borderColor: '#f4f4f5', |
||||||
|
}, |
||||||
|
// Code line styling for inserted and deleted lines
|
||||||
|
'.code-line.inserted': { |
||||||
|
backgroundColor: 'rgba(72, 187, 120, 0.2)', // Green background for inserted lines
|
||||||
|
}, |
||||||
|
'.code-line.deleted': { |
||||||
|
backgroundColor: 'rgba(239, 68, 68, 0.1)', // Red background for deleted lines
|
||||||
|
}, |
||||||
|
// Highlighted line
|
||||||
|
'.highlight-line': { |
||||||
|
borderLeft: '2px solid #EC4899', // Pink border for highlighted line
|
||||||
|
backgroundColor: 'rgba(229, 231, 235, 0.4)', // Light gray background for highlighted lines
|
||||||
|
}, |
||||||
|
'.cm-gutters': { |
||||||
|
backgroundColor: '#18181b', |
||||||
|
}, |
||||||
|
'.cm-activeLineGutter': { |
||||||
|
backgroundColor: '#27272a', |
||||||
|
}, |
||||||
|
'.cm-line': { |
||||||
|
color: '#a1a1aa', |
||||||
|
}, |
||||||
|
'.cm-foldPlaceholder': { |
||||||
|
border: 'none', |
||||||
|
backgroundColor: 'transparent', |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
dark: true, |
||||||
|
}, |
||||||
|
); |
||||||
|
|
||||||
|
export const editorDarkHightlightStyle = HighlightStyle.define([ |
||||||
|
{ tag: t.keyword, color: '#3B82F6' }, |
||||||
|
{ tag: t.operator, color: '#F59E0B' }, |
||||||
|
{ tag: t.variableName, color: '#D946EF' }, |
||||||
|
{ tag: t.number, color: '#10B981' }, |
||||||
|
{ tag: t.string, color: '#A855F7' }, |
||||||
|
{ tag: t.punctuation, color: '#a1a1aa' }, |
||||||
|
{ tag: t.typeName, color: '#D946EF' }, |
||||||
|
{ tag: t.attributeName, color: '#A855F7' }, |
||||||
|
{ tag: t.name, color: '#f4f4f5' }, |
||||||
|
{ tag: t.comment, color: '#71717a' }, |
||||||
|
{ tag: t.paren, color: '#a1a1aa' }, |
||||||
|
]); |
||||||
@ -0,0 +1,90 @@ |
|||||||
|
import { type RefObject, useEffect, useState } from 'react'; |
||||||
|
import { Annotation, type Extension } from '@codemirror/state'; |
||||||
|
import { EditorView, keymap, ViewUpdate } from '@codemirror/view'; |
||||||
|
import { basicSetup } from 'codemirror'; |
||||||
|
import { |
||||||
|
defaultKeymap, |
||||||
|
history, |
||||||
|
historyKeymap, |
||||||
|
indentWithTab, |
||||||
|
} from '@codemirror/commands'; |
||||||
|
import { syntaxHighlighting } from '@codemirror/language'; |
||||||
|
import { |
||||||
|
editorDarkHightlightStyle, |
||||||
|
editorDarkTheme, |
||||||
|
} from './sql-code-editor-theme'; |
||||||
|
|
||||||
|
const External = Annotation.define<boolean>(); |
||||||
|
|
||||||
|
export interface UseSqlEditorProps { |
||||||
|
value?: string; |
||||||
|
autoFocus?: boolean; |
||||||
|
onChange?: (value: string, viewUpdate: ViewUpdate) => void; |
||||||
|
onUpdate?: (viewUpdate: ViewUpdate) => void; |
||||||
|
onCreateEditor?: (view: EditorView) => void; |
||||||
|
|
||||||
|
extensions?: Extension[]; |
||||||
|
container?: RefObject<HTMLDivElement>; |
||||||
|
} |
||||||
|
|
||||||
|
export function useSqlEditor(props: UseSqlEditorProps) { |
||||||
|
const { |
||||||
|
value: initialValue, |
||||||
|
onChange, |
||||||
|
onCreateEditor, |
||||||
|
onUpdate, |
||||||
|
container, |
||||||
|
|
||||||
|
extensions = [], |
||||||
|
} = props; |
||||||
|
|
||||||
|
const [editor, setEditor] = useState<EditorView | null>(null); |
||||||
|
|
||||||
|
const updateListener = EditorView.updateListener.of((vu) => { |
||||||
|
if ( |
||||||
|
vu.docChanged && |
||||||
|
typeof onChange === 'function' && |
||||||
|
// Fix echoing of the remote changes:
|
||||||
|
// If transaction is market as remote we don't have to call `onChange` handler again
|
||||||
|
!vu.transactions.some((tr) => tr.annotation(External)) |
||||||
|
) { |
||||||
|
const doc = vu.state.doc; |
||||||
|
const value = doc.toString(); |
||||||
|
onChange(value, vu); |
||||||
|
} |
||||||
|
|
||||||
|
onUpdate?.(vu); |
||||||
|
}); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (!container?.current) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
let editorInstance = new EditorView({ |
||||||
|
doc: initialValue, |
||||||
|
extensions: [ |
||||||
|
basicSetup, |
||||||
|
history(), |
||||||
|
keymap.of([indentWithTab, ...defaultKeymap, ...historyKeymap]), |
||||||
|
updateListener, |
||||||
|
editorDarkTheme, |
||||||
|
syntaxHighlighting(editorDarkHightlightStyle), |
||||||
|
EditorView.contentAttributes.of({ |
||||||
|
'data-enable-grammarly': 'false', |
||||||
|
}), |
||||||
|
].concat(extensions), |
||||||
|
parent: container.current, |
||||||
|
}); |
||||||
|
|
||||||
|
onCreateEditor?.(editorInstance); |
||||||
|
setEditor(editorInstance); |
||||||
|
|
||||||
|
return () => { |
||||||
|
editorInstance.destroy(); |
||||||
|
setEditor(null); |
||||||
|
}; |
||||||
|
}, [container]); |
||||||
|
|
||||||
|
return editor; |
||||||
|
} |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
import initSqlJs, { type SqlJsStatic } from 'sql.js'; |
||||||
|
|
||||||
|
export function useSqlite() { |
||||||
|
const [sql, setSql] = useState<SqlJsStatic | null>(null); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
(async () => { |
||||||
|
const SQL = await initSqlJs({ |
||||||
|
locateFile: (file) => { |
||||||
|
return `https://sql.js.org/dist/${file}`; |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
setSql(SQL); |
||||||
|
})(); |
||||||
|
}, []); |
||||||
|
|
||||||
|
return sql; |
||||||
|
} |
||||||
@ -0,0 +1,34 @@ |
|||||||
|
--- |
||||||
|
title: Challenge 1 |
||||||
|
description: Write a SQL query to find the total number of orders in the `orders` table. |
||||||
|
order: 100 |
||||||
|
defaultValue: SELECT * FROM orders; |
||||||
|
initSteps: |
||||||
|
- CREATE TABLE orders ( |
||||||
|
id INTEGER PRIMARY KEY, |
||||||
|
customer_id INTEGER, |
||||||
|
order_date DATE, |
||||||
|
total DECIMAL(10, 2) |
||||||
|
); |
||||||
|
- INSERT INTO orders (id, customer_id, order_date, total) |
||||||
|
VALUES |
||||||
|
(1, 1, '2021-01-01', 100.00), |
||||||
|
(2, 2, '2021-01-02', 200.00), |
||||||
|
(3, 1, '2021-01-03', 300.00), |
||||||
|
(4, 3, '2021-01-04', 400.00), |
||||||
|
(5, 2, '2021-01-05', 500.00); |
||||||
|
expectedResults: |
||||||
|
- columns: [total_orders] |
||||||
|
values: |
||||||
|
- [5] |
||||||
|
--- |
||||||
|
|
||||||
|
<!-- /sql/:chapterId/:(lessonId/challengeId/quizId) --> |
||||||
|
|
||||||
|
## Instructions |
||||||
|
|
||||||
|
Write a SQL query to find the total number of orders in the `orders` table. |
||||||
|
|
||||||
|
## Result |
||||||
|
|
||||||
|
Your query should return a single column with the total number of orders in the `orders` table. |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
--- |
||||||
|
title: Introduction |
||||||
|
description: Learn the basics of SQL, the language for querying databases. |
||||||
|
order: 1 |
||||||
|
--- |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
--- |
||||||
|
title: Intro to SQL |
||||||
|
description: Learn the basics of SQL, the language for querying databases. |
||||||
|
order: 1 |
||||||
|
--- |
||||||
|
|
||||||
|
The SQL language is widely used today across web frameworks and database applications. Knowing SQL gives you the freedom to explore your data, and the power to make better decisions. By learning SQL, you will also learn concepts that apply to nearly every data storage system. |
||||||
|
|
||||||
|
The statements covered in this course use SQLite Relational Database Management System (RDBMS). You can also access a glossary of all the SQL commands taught in this course. |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
--- |
||||||
|
title: Learn SQL |
||||||
|
description: Learn the basics of SQL, the language for querying databases. |
||||||
|
order: 1 |
||||||
|
--- |
||||||
@ -0,0 +1,242 @@ |
|||||||
|
import type { MarkdownFileType } from './file'; |
||||||
|
|
||||||
|
export interface CourseFrontmatter { |
||||||
|
order: number; |
||||||
|
title: string; |
||||||
|
description: string; |
||||||
|
} |
||||||
|
|
||||||
|
export type LessonFrontmatter = { |
||||||
|
title: string; |
||||||
|
description: string; |
||||||
|
order: number; |
||||||
|
}; |
||||||
|
|
||||||
|
export type LessonFileType = MarkdownFileType<LessonFrontmatter> & { |
||||||
|
id: string; |
||||||
|
}; |
||||||
|
|
||||||
|
export type QuizFrontmatter = { |
||||||
|
id: string; |
||||||
|
order: number; |
||||||
|
title: string; |
||||||
|
}; |
||||||
|
|
||||||
|
export type QuizFileType = MarkdownFileType<QuizFrontmatter> & { |
||||||
|
id: string; |
||||||
|
}; |
||||||
|
|
||||||
|
export type ChallengeFrontmatter = { |
||||||
|
title: string; |
||||||
|
desctiption: string; |
||||||
|
order: number; |
||||||
|
|
||||||
|
defaultValue?: string; |
||||||
|
initSteps?: string[]; |
||||||
|
expectedResults?: { |
||||||
|
columns: string[]; |
||||||
|
values: string[][]; |
||||||
|
}[]; |
||||||
|
}; |
||||||
|
|
||||||
|
export type ChallengeFileType = MarkdownFileType<ChallengeFrontmatter> & { |
||||||
|
id: string; |
||||||
|
}; |
||||||
|
|
||||||
|
export type ChapterFrontmatter = { |
||||||
|
id: string; |
||||||
|
order: number; |
||||||
|
title: string; |
||||||
|
}; |
||||||
|
|
||||||
|
export type ChapterFileType = MarkdownFileType<ChapterFrontmatter> & { |
||||||
|
id: string; |
||||||
|
lessons: LessonFileType[]; |
||||||
|
exercises: (QuizFileType | ChallengeFileType)[]; |
||||||
|
}; |
||||||
|
|
||||||
|
export type CourseFileType = MarkdownFileType<CourseFrontmatter> & { |
||||||
|
id: string; |
||||||
|
chapters: ChapterFileType[]; |
||||||
|
}; |
||||||
|
|
||||||
|
function coursePathToId(filePath: string): string { |
||||||
|
const fileName = filePath.split('/').pop() || ''; |
||||||
|
return fileName.replace('.md', ''); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Gets the IDs of all the courses available on the website |
||||||
|
* |
||||||
|
* @returns string[] Array of course IDs |
||||||
|
*/ |
||||||
|
export async function getCourseIds() { |
||||||
|
const courseFiles = import.meta.glob<CourseFileType>( |
||||||
|
'/src/data/courses/*/*.md', |
||||||
|
{ |
||||||
|
eager: true, |
||||||
|
}, |
||||||
|
); |
||||||
|
|
||||||
|
return Object.keys(courseFiles).map(coursePathToId); |
||||||
|
} |
||||||
|
|
||||||
|
export async function getCourseById(id: string): Promise<CourseFileType> { |
||||||
|
const courseFilesMap: Record<string, CourseFileType> = |
||||||
|
import.meta.glob<CourseFileType>('/src/data/courses/*/*.md', { |
||||||
|
eager: true, |
||||||
|
}); |
||||||
|
|
||||||
|
const courseFile = Object.values(courseFilesMap).find((courseFile) => { |
||||||
|
return coursePathToId(courseFile.file) === id; |
||||||
|
}); |
||||||
|
|
||||||
|
if (!courseFile) { |
||||||
|
throw new Error(`Course with ID ${id} not found`); |
||||||
|
} |
||||||
|
|
||||||
|
const chapters = await getChaptersByCourseId(id); |
||||||
|
|
||||||
|
return { |
||||||
|
...courseFile, |
||||||
|
id: coursePathToId(courseFile.file), |
||||||
|
chapters, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
export function chapterPathToId(filePath: string): string { |
||||||
|
const fileName = filePath.split('/').pop() || ''; |
||||||
|
return fileName.replace('.md', ''); |
||||||
|
} |
||||||
|
|
||||||
|
export async function getChaptersByCourseId(courseId: string) { |
||||||
|
const chapterFilesMap = import.meta.glob<ChapterFileType>( |
||||||
|
`/src/data/courses/*/chapters/*/*.md`, |
||||||
|
{ |
||||||
|
eager: true, |
||||||
|
}, |
||||||
|
); |
||||||
|
|
||||||
|
const chapterFiles = Object.values(chapterFilesMap).filter((chapterFile) => { |
||||||
|
const [_, currentCourseId] = |
||||||
|
chapterFile.file.match(/\/courses\/([^/]+)\/chapters/) || []; |
||||||
|
return currentCourseId === courseId; |
||||||
|
}); |
||||||
|
|
||||||
|
const enrichedChapters: ChapterFileType[] = []; |
||||||
|
for (const chapterFile of chapterFiles) { |
||||||
|
const chapterId = chapterPathToId(chapterFile.file); |
||||||
|
const lessons = await getLessonsByCourseId(courseId, chapterId); |
||||||
|
const exercises = await getExercisesByCourseId(courseId, chapterId); |
||||||
|
|
||||||
|
enrichedChapters.push({ |
||||||
|
...chapterFile, |
||||||
|
id: chapterId, |
||||||
|
lessons, |
||||||
|
exercises, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
return enrichedChapters.sort( |
||||||
|
(a, b) => a.frontmatter.order - b.frontmatter.order, |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export function lessonPathToId(filePath: string): string { |
||||||
|
const fileName = filePath.split('/').pop() || ''; |
||||||
|
return fileName.replace('.md', ''); |
||||||
|
} |
||||||
|
|
||||||
|
export async function getLessonsByCourseId( |
||||||
|
courseId: string, |
||||||
|
chapterId: string, |
||||||
|
): Promise<LessonFileType[]> { |
||||||
|
const lessonFilesMap = import.meta.glob<LessonFileType>( |
||||||
|
`/src/data/courses/*/chapters/*/lessons/*.md`, |
||||||
|
{ |
||||||
|
eager: true, |
||||||
|
}, |
||||||
|
); |
||||||
|
|
||||||
|
return Object.values(lessonFilesMap) |
||||||
|
.filter((lessonFile) => { |
||||||
|
const [, currentCourseId, currentChapterId] = |
||||||
|
lessonFile.file.match( |
||||||
|
/\/courses\/([^/]+)\/chapters\/([^/]+)\/lessons/, |
||||||
|
) || []; |
||||||
|
|
||||||
|
return currentCourseId === courseId && currentChapterId === chapterId; |
||||||
|
}) |
||||||
|
.map((lessonFile) => ({ |
||||||
|
...lessonFile, |
||||||
|
id: lessonPathToId(lessonFile.file), |
||||||
|
})) |
||||||
|
.sort((a, b) => a.frontmatter.order - b.frontmatter.order); |
||||||
|
} |
||||||
|
|
||||||
|
export function exercisePathToId(filePath: string): string { |
||||||
|
const fileName = filePath.split('/').pop() || ''; |
||||||
|
return fileName.replace('.md', ''); |
||||||
|
} |
||||||
|
|
||||||
|
export async function getExercisesByCourseId( |
||||||
|
courseId: string, |
||||||
|
chapterId: string, |
||||||
|
): Promise<(QuizFileType | ChallengeFileType)[]> { |
||||||
|
const exerciseFilesMap = import.meta.glob<QuizFileType | ChallengeFileType>( |
||||||
|
`/src/data/courses/*/chapters/*/exercises/*.md`, |
||||||
|
{ |
||||||
|
eager: true, |
||||||
|
}, |
||||||
|
); |
||||||
|
|
||||||
|
return Object.values(exerciseFilesMap) |
||||||
|
.filter((exerciseFile) => { |
||||||
|
const [, currentCourseId, currentChapterId] = |
||||||
|
exerciseFile.file.match( |
||||||
|
/\/courses\/([^/]+)\/chapters\/([^/]+)\/exercises/, |
||||||
|
) || []; |
||||||
|
|
||||||
|
return currentCourseId === courseId && currentChapterId === chapterId; |
||||||
|
}) |
||||||
|
.map((exerciseFile) => ({ |
||||||
|
...exerciseFile, |
||||||
|
id: exercisePathToId(exerciseFile.file), |
||||||
|
})) |
||||||
|
.sort((a, b) => a.frontmatter.order - b.frontmatter.order); |
||||||
|
} |
||||||
|
|
||||||
|
export async function getCourseExerciseById( |
||||||
|
courseId: string, |
||||||
|
chapterId: string, |
||||||
|
exerciseId: string, |
||||||
|
) { |
||||||
|
const exerciseFilesMap = import.meta.glob<QuizFileType | ChallengeFileType>( |
||||||
|
`/src/data/courses/*/chapters/*/exercises/*.md`, |
||||||
|
{ |
||||||
|
eager: true, |
||||||
|
}, |
||||||
|
); |
||||||
|
|
||||||
|
const exerciseFile = Object.values(exerciseFilesMap).find((exerciseFile) => { |
||||||
|
const [, currentCourseId, currentChapterId, currentExerciseId] = |
||||||
|
exerciseFile.file.match( |
||||||
|
/\/courses\/([^/]+)\/chapters\/([^/]+)\/exercises\/([^/]+)\.md/, |
||||||
|
) || []; |
||||||
|
|
||||||
|
return ( |
||||||
|
currentCourseId === courseId && |
||||||
|
currentChapterId === chapterId && |
||||||
|
currentExerciseId === exerciseId |
||||||
|
); |
||||||
|
}); |
||||||
|
|
||||||
|
if (!exerciseFile) { |
||||||
|
throw new Error(`Exercise with ID ${exerciseId} not found`); |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
...exerciseFile, |
||||||
|
id: exercisePathToId(exerciseFile.file), |
||||||
|
}; |
||||||
|
} |
||||||
@ -0,0 +1,23 @@ |
|||||||
|
--- |
||||||
|
import { ChallengeView } from '../../components/Course/ChallengeView'; |
||||||
|
import type { ChallengeFileType } from '../../lib/course'; |
||||||
|
import { getCourseById, getCourseExerciseById } from '../../lib/course'; |
||||||
|
|
||||||
|
const course = await getCourseById('sql'); |
||||||
|
const exercise = (await getCourseExerciseById( |
||||||
|
'sql', |
||||||
|
'introduction', |
||||||
|
'challenge-1', |
||||||
|
)) as ChallengeFileType; |
||||||
|
--- |
||||||
|
|
||||||
|
<ChallengeView |
||||||
|
defaultValue={exercise.frontmatter.defaultValue} |
||||||
|
expectedResults={exercise.frontmatter.expectedResults} |
||||||
|
initSteps={exercise.frontmatter.initSteps} |
||||||
|
client:load |
||||||
|
> |
||||||
|
<div class='prose prose-xl prose-invert'> |
||||||
|
<exercise.Content /> |
||||||
|
</div> |
||||||
|
</ChallengeView> |
||||||
Loading…
Reference in new issue