@btst/stack 5.0.0 → 5.2.0

package/src/plugins/school/client/components/pages/lesson-player-page.internal.tsx

@@ -0,0 +1,290 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import { Button } from "@workspace/ui/components/button";
+import { usePluginSiteNavigation } from "@btst/stack/context";
+import {
+	useSuspenseCourse,
+	useLesson,
+	useLessonProgress,
+	useSubmitQuiz,
+} from "../../hooks";
+import { SCHOOL_PLUGIN_ID } from "../../constants";
+import {
+	SchoolShell,
+	Curriculum,
+	ErrorMessage,
+	CompletedLabel,
+} from "./school-shared";
+import type { QuizAttempt } from "../../../types";
+
+export function LessonPlayerPage({
+	slug,
+	lessonId,
+}: {
+	slug: string;
+	lessonId: string;
+}) {
+	const { data: course } = useSuspenseCourse(slug);
+	const { data } = useLesson(lessonId);
+	const save = useLessonProgress();
+	const { Link, resolve } = usePluginSiteNavigation(SCHOOL_PLUGIN_ID);
+	const lastSaved = useRef(0);
+	const { lesson, enrollment, progress } = data;
+	useEffect(() => {
+		if (enrollment && lesson.type === "text")
+			void save
+				.mutateAsync({
+					id: lesson.id,
+					positionSecs: progress?.positionSecs ?? 0,
+				})
+				.catch(() => {});
+	}, [lesson.id, enrollment?.id]);
+	if (lesson.courseId !== course.id)
+		throw new Error("This lesson does not belong to this course.");
+	const next =
+		course.lessons[
+			course.lessons.findIndex((item) => item.id === lessonId) + 1
+		];
+	const savePosition = (position: number) => {
+		if (!enrollment) return;
+		lastSaved.current = position;
+		void save
+			.mutateAsync({ id: lessonId, positionSecs: position })
+			.catch(() => {});
+	};
+	return (
+		<SchoolShell title={course.title}>
+			<div className="school-player-grid">
+				<aside>
+					<Link href={resolve("learn", slug).href}>Course overview</Link>
+					<Curriculum
+						course={course}
+						activeLessonId={lessonId}
+						enrollment={enrollment}
+					/>
+				</aside>
+				<article className="school-lesson">
+					<div className="school-lesson-heading">
+						<h2>{lesson.title}</h2>
+						{progress?.completed && <CompletedLabel />}
+					</div>
+					{lesson.isFreePreview && !enrollment && (
+						<p className="school-preview-note">
+							Free preview.{" "}
+							<Link href={resolve("learn", slug).href}>
+								Enroll to save your progress.
+							</Link>
+						</p>
+					)}
+					{lesson.type === "video" && lesson.videoUrl && (
+						<video
+							key={lesson.id}
+							controls
+							preload="metadata"
+							className="school-video"
+							aria-label={lesson.title}
+							onLoadedMetadata={(event) => {
+								if (progress?.positionSecs)
+									event.currentTarget.currentTime = progress.positionSecs;
+							}}
+							onPause={(event) => savePosition(event.currentTarget.currentTime)}
+							onTimeUpdate={(event) => {
+								if (
+									Math.abs(
+										event.currentTarget.currentTime - lastSaved.current,
+									) >= 10
+								)
+									savePosition(event.currentTarget.currentTime);
+							}}
+						>
+							<source src={lesson.videoUrl} />
+							<track kind="captions" />
+							Your browser does not support video playback.{" "}
+							<a href={lesson.videoUrl}>Open the lesson video</a>.
+						</video>
+					)}
+					{lesson.type === "quiz" ? (
+						<LessonQuiz lessonId={lessonId} />
+					) : (
+						<div className="school-lesson-content">
+							<ReactMarkdown>{lesson.content}</ReactMarkdown>
+						</div>
+					)}
+					{lesson.resources.length > 0 && (
+						<section className="school-section">
+							<h3>Lesson resources</h3>
+							<ul>
+								{lesson.resources.map((resource) => (
+									<li key={resource.url}>
+										<a
+											href={resource.url}
+											target="_blank"
+											rel="noopener noreferrer"
+											download
+										>
+											{resource.label}
+										</a>
+									</li>
+								))}
+							</ul>
+						</section>
+					)}
+					<ErrorMessage error={save.error} />
+					{enrollment && lesson.type !== "quiz" && !progress?.completed && (
+						<Button
+							disabled={save.isPending}
+							onClick={() =>
+								void save
+									.mutateAsync({ id: lessonId, completed: true })
+									.catch(() => {})
+							}
+						>
+							{save.isPending ? "Saving…" : "Mark lesson complete"}
+						</Button>
+					)}
+					{next &&
+						(progress?.completed || lesson.type === "quiz" || save.data) && (
+							<p className="school-next-lesson">
+								<Link href={resolve("learn", slug, "lessons", next.id).href}>
+									Next lesson: {next.title}
+								</Link>
+							</p>
+						)}
+					{enrollment?.certificateId && (
+						<p>
+							<Link
+								href={
+									resolve("learn", "certificates", enrollment.certificateId)
+										.href
+								}
+							>
+								View your certificate
+							</Link>
+						</p>
+					)}
+				</article>
+			</div>
+		</SchoolShell>
+	);
+}
+
+export function LessonQuiz({ lessonId }: { lessonId: string }) {
+	const { data } = useLesson(lessonId);
+	const submit = useSubmitQuiz();
+	const [answers, setAnswers] = useState<Record<string, number>>({});
+	const [result, setResult] = useState<QuizAttempt | null>(null);
+	const quiz = data.lesson.quiz;
+	if (!quiz) return <p>This lesson has no quiz.</p>;
+	const atLimit =
+		!!quiz.maxAttempts && data.attempts.length >= quiz.maxAttempts;
+	const send = async (event: React.FormEvent) => {
+		event.preventDefault();
+		try {
+			setResult(
+				await submit.mutateAsync({
+					id: lessonId,
+					answers: quiz.questions.map((question) => ({
+						questionId: question.id,
+						answer: answers[question.id]!,
+					})),
+				}),
+			);
+		} catch {
+			/* The operation reports scoring and attempt-limit errors below. */
+		}
+	};
+	return (
+		<section className="school-quiz">
+			<h3>Check your understanding</h3>
+			{quiz.passMark !== undefined && <p>Pass mark: {quiz.passMark}%</p>}
+			{quiz.maxAttempts && (
+				<p>
+					{data.attempts.length} of {quiz.maxAttempts} attempts used
+				</p>
+			)}
+			{result && (
+				<div role="status" className="school-quiz-result">
+					<strong>
+						{result.passed ? "Quiz passed" : "Keep practicing"}: {result.score}%
+					</strong>
+					<p>
+						{result.passed
+							? "This lesson is complete. Your course progress has been updated."
+							: "Review the lesson before trying again."}
+					</p>
+				</div>
+			)}
+			{!data.enrollment && (
+				<p>Enroll in this course to submit your answers and save your score.</p>
+			)}
+			<form onSubmit={(event) => void send(event)}>
+				{quiz.questions.map((question, index) => (
+					<fieldset
+						key={question.id}
+						disabled={submit.isPending || atLimit || !data.enrollment}
+						className="school-question"
+					>
+						<legend>
+							{index + 1}. {question.question}
+						</legend>
+						{question.options.map((option, optionIndex) => (
+							<label key={optionIndex} className="school-answer">
+								<input
+									type="radio"
+									name={question.id}
+									value={optionIndex}
+									checked={answers[question.id] === optionIndex}
+									onChange={() =>
+										setAnswers((old) => ({
+											...old,
+											[question.id]: optionIndex,
+										}))
+									}
+									required
+								/>
+								{option}
+							</label>
+						))}
+					</fieldset>
+				))}
+				<ErrorMessage error={submit.error} />
+				{atLimit ? (
+					<p>All attempts have been used.</p>
+				) : (
+					<Button
+						type="submit"
+						disabled={
+							submit.isPending ||
+							!data.enrollment ||
+							quiz.questions.some(
+								(question) => answers[question.id] === undefined,
+							)
+						}
+					>
+						{submit.isPending ? "Checking answers…" : "Submit quiz"}
+					</Button>
+				)}
+			</form>
+			{data.attempts.length > 0 && (
+				<section className="school-section">
+					<h3>Your attempts</h3>
+					<ol className="school-attempts">
+						{data.attempts.map((attempt) => (
+							<li key={attempt.id}>
+								<span>
+									{new Date(attempt.attemptedAt).toLocaleString("en-US", {
+										timeZone: "UTC",
+										timeZoneName: "short",
+									})}
+								</span>
+								<strong>{attempt.score}%</strong>
+								<span>{attempt.passed ? "Passed" : "Not passed"}</span>
+							</li>
+						))}
+					</ol>
+				</section>
+			)}
+		</section>
+	);
+}

package/src/plugins/school/client/components/pages/lesson-player-page.tsx

@@ -0,0 +1,28 @@
+"use client";
+import { lazy } from "react";
+import { ComposedRoute } from "@btst/stack/client/components";
+import { SchoolLoading, SchoolNotFound, SchoolError } from "./route-state";
+const Page = lazy(() =>
+	import("./lesson-player-page.internal").then((m) => ({
+		default: m.LessonPlayerPage,
+	})),
+);
+export function LessonPlayerPageComponent({
+	slug,
+	lessonId,
+}: {
+	slug: string;
+	lessonId: string;
+}) {
+	return (
+		<ComposedRoute
+			path={`/learn/${slug}/lessons/${lessonId}`}
+			PageComponent={Page}
+			LoadingComponent={SchoolLoading}
+			ErrorComponent={SchoolError}
+			NotFoundComponent={SchoolNotFound}
+			props={{ slug, lessonId }}
+			onError={(error) => console.error("[btst/school]", error)}
+		/>
+	);
+}

package/src/plugins/school/client/components/pages/my-courses-page.internal.tsx

@@ -0,0 +1,120 @@
+"use client";
+import { Button } from "@workspace/ui/components/button";
+import { usePluginSiteNavigation } from "@btst/stack/context";
+import { school, useSuspenseMyCourses } from "../../hooks";
+import { SCHOOL_PLUGIN_ID } from "../../constants";
+import {
+	SchoolShell,
+	ErrorMessage,
+	EmptyMessage,
+	CourseCard,
+	CompletedLabel,
+} from "./school-shared";
+
+export function MyCoursesPage() {
+	const { data: enrollments } = useSuspenseMyCourses();
+	const cancel = school.schoolCourses.cancel.use();
+	const retryCertificate = school.schoolCourses.retryCertificate.use();
+	const { Link, resolve } = usePluginSiteNavigation(SCHOOL_PLUGIN_ID);
+	const active = enrollments.filter(
+		(enrollment) => enrollment.status !== "cancelled",
+	);
+	return (
+		<SchoolShell title="My courses" description="Pick up where you left off.">
+			{active.length ? (
+				<div className="school-course-grid">
+					{active.map((enrollment) => {
+						const next = enrollment.lastLessonId ?? enrollment.lessons[0]?.id;
+						return (
+							<div className="school-enrolled-course" key={enrollment.id}>
+								<CourseCard
+									course={enrollment.course}
+									enrollment={enrollment}
+								/>
+								<div className="school-enrolled-actions">
+									{enrollment.status === "completed" ? (
+										<CompletedLabel />
+									) : (
+										next && (
+											<Button asChild>
+												<Link
+													href={
+														resolve(
+															"learn",
+															enrollment.course.slug,
+															"lessons",
+															next,
+														).href
+													}
+												>
+													Continue learning
+												</Link>
+											</Button>
+										)
+									)}
+									{enrollment.status === "enrolled" && (
+										<Button
+											type="button"
+											variant="ghost"
+											disabled={cancel.isPending}
+											onClick={() => {
+												if (
+													window.confirm(
+														`Cancel your enrollment in “${enrollment.course.title}”? Your progress will be kept, but you will lose lesson access. This enrollment cannot be restarted.`,
+													)
+												)
+													void cancel
+														.mutateAsync(enrollment.courseId)
+														.catch(() => {});
+											}}
+										>
+											Cancel enrollment
+										</Button>
+									)}
+									{enrollment.certificatePending && (
+										<Button
+											type="button"
+											variant="outline"
+											disabled={retryCertificate.isPending}
+											onClick={() =>
+												void retryCertificate
+													.mutateAsync(enrollment.courseId)
+													.catch(() => {})
+											}
+										>
+											{retryCertificate.isPending
+												? "Retrying certificate…"
+												: "Retry certificate"}
+										</Button>
+									)}
+									{enrollment.certificateId && (
+										<Link
+											href={
+												resolve(
+													"learn",
+													"certificates",
+													enrollment.certificateId,
+												).href
+											}
+										>
+											View certificate
+										</Link>
+									)}
+								</div>
+							</div>
+						);
+					})}
+				</div>
+			) : (
+				<EmptyMessage>
+					<h2>Your first lesson starts here</h2>
+					<p>
+						Enroll in a course to keep your lessons and progress in one place.
+					</p>
+					<Link href={resolve("learn").href}>Browse courses</Link>
+				</EmptyMessage>
+			)}
+			<ErrorMessage error={cancel.error ?? retryCertificate.error} />
+		</SchoolShell>
+	);
+}

package/src/plugins/school/client/components/pages/my-courses-page.tsx

@@ -0,0 +1,23 @@
+"use client";
+import { lazy } from "react";
+import { ComposedRoute } from "@btst/stack/client/components";
+import { SchoolLoading, SchoolNotFound, SchoolError } from "./route-state";
+import { schoolPermissions } from "../../../permissions";
+const Page = lazy(() =>
+	import("./my-courses-page.internal").then((m) => ({
+		default: m.MyCoursesPage,
+	})),
+);
+export function MyCoursesPageComponent() {
+	return (
+		<ComposedRoute
+			path={`/learn/me`}
+			PageComponent={Page}
+			LoadingComponent={SchoolLoading}
+			ErrorComponent={SchoolError}
+			NotFoundComponent={SchoolNotFound}
+			permission={schoolPermissions.enrollment.read({ scope: "own" })}
+			onError={(error) => console.error("[btst/school]", error)}
+		/>
+	);
+}

package/src/plugins/school/client/components/pages/quiz-page.internal.tsx

@@ -0,0 +1,2 @@
+"use client";
+export { LessonPlayerPage as QuizPage } from "./lesson-player-page.internal";

package/src/plugins/school/client/components/pages/quiz-page.tsx

@@ -0,0 +1,28 @@
+"use client";
+import { lazy } from "react";
+import { ComposedRoute } from "@btst/stack/client/components";
+import { SchoolLoading, SchoolNotFound, SchoolError } from "./route-state";
+import { schoolPermissions } from "../../../permissions";
+const Page = lazy(() =>
+	import("./quiz-page.internal").then((m) => ({ default: m.QuizPage })),
+);
+export function QuizPageComponent({
+	slug,
+	lessonId,
+}: {
+	slug: string;
+	lessonId: string;
+}) {
+	return (
+		<ComposedRoute
+			path={`/learn/${slug}/lessons/${lessonId}/quiz`}
+			PageComponent={Page}
+			LoadingComponent={SchoolLoading}
+			ErrorComponent={SchoolError}
+			NotFoundComponent={SchoolNotFound}
+			props={{ slug, lessonId }}
+			permission={schoolPermissions.enrollment.read({ scope: "own" })}
+			onError={(error) => console.error("[btst/school]", error)}
+		/>
+	);
+}

package/src/plugins/school/client/components/pages/route-state.tsx

@@ -0,0 +1,32 @@
+"use client";
+import type { FallbackProps } from "react-error-boundary";
+import { Button } from "@workspace/ui/components/button";
+
+export function SchoolLoading() {
+	return (
+		<div className="school-shell" role="status">
+			Loading course content…
+		</div>
+	);
+}
+export function SchoolNotFound() {
+	return (
+		<div className="school-shell">
+			<h1>Course content not found</h1>
+			<p>Check the address or return to the course catalog.</p>
+		</div>
+	);
+}
+export function SchoolError({ error, resetErrorBoundary }: FallbackProps) {
+	return (
+		<div className="school-shell" role="alert">
+			<h1>Unable to load this page</h1>
+			<p>
+				{error instanceof Error
+					? error.message
+					: "Check your connection and try again."}
+			</p>
+			<Button onClick={resetErrorBoundary}>Try again</Button>
+		</div>
+	);
+}