advance
This commit is contained in:
Marcelo
304
app/(protected)/courses/[slug]/learn/page.tsx
Normal file → Executable file
304
app/(protected)/courses/[slug]/learn/page.tsx
Normal file → Executable file
@@ -1,214 +1,130 @@
|
||||
"use client";
|
||||
import { notFound, redirect } from "next/navigation";
|
||||
import { db } from "@/lib/prisma";
|
||||
import { requireUser } from "@/lib/auth/requireUser";
|
||||
import StudentClassroomClient from "@/components/courses/StudentClassroomClient";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useParams } from "next/navigation";
|
||||
import LessonRow from "@/components/LessonRow";
|
||||
import ProgressBar from "@/components/ProgressBar";
|
||||
import { getCourseBySlug } from "@/lib/data/courseCatalog";
|
||||
import {
|
||||
getCourseProgress,
|
||||
getCourseProgressPercent,
|
||||
markLessonComplete,
|
||||
setLastLesson,
|
||||
} from "@/lib/progress/localProgress";
|
||||
import { teacherCoursesUpdatedEventName } from "@/lib/data/teacherCourses";
|
||||
import { supabaseBrowser } from "@/lib/supabase/browser";
|
||||
import type { Course, Lesson } from "@/types/course";
|
||||
|
||||
const lessonContent = (lesson: Lesson) => {
|
||||
if (lesson.type === "video") {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="aspect-video rounded-2xl border border-slate-300 bg-[#f6f6f7] p-4">
|
||||
<div className="flex h-full items-center justify-center rounded-xl border-2 border-dashed border-slate-300 text-lg text-slate-500">
|
||||
Video placeholder ({lesson.minutes} min)
|
||||
</div>
|
||||
</div>
|
||||
{lesson.videoUrl ? (
|
||||
<p className="text-sm text-slate-500">
|
||||
Demo video URL: <span className="font-medium text-slate-700">{lesson.videoUrl}</span>
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
function getText(value: unknown): string {
|
||||
if (!value) return "";
|
||||
if (typeof value === "string") return value;
|
||||
if (typeof value === "object") {
|
||||
const record = value as Record<string, unknown>;
|
||||
if (typeof record.es === "string") return record.es;
|
||||
if (typeof record.en === "string") return record.en;
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
if (lesson.type === "reading") {
|
||||
return (
|
||||
<div className="rounded-2xl border border-slate-300 bg-white p-5">
|
||||
<p className="text-lg leading-9 text-slate-700">
|
||||
Reading placeholder content for lesson: {lesson.title}. Replace with full lesson text and references in Phase 2.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="rounded-2xl border border-slate-300 bg-white p-5">
|
||||
<p className="text-lg text-slate-700">Interactive placeholder for lesson: {lesson.title}.</p>
|
||||
<button className="acve-button-secondary mt-3 px-3 py-1.5 text-sm" type="button">
|
||||
Start interactive
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
type PageProps = {
|
||||
params: Promise<{ slug: string }>;
|
||||
searchParams: Promise<{ lesson?: string }>;
|
||||
};
|
||||
|
||||
export default function CourseLearnPage() {
|
||||
const params = useParams<{ slug: string }>();
|
||||
const slug = params.slug;
|
||||
const [course, setCourse] = useState<Course | undefined>(() => getCourseBySlug(slug));
|
||||
const [hasResolvedCourse, setHasResolvedCourse] = useState(false);
|
||||
export default async function CourseLearnPage({ params, searchParams }: PageProps) {
|
||||
const { slug } = await params;
|
||||
const { lesson: requestedLessonId } = await searchParams;
|
||||
|
||||
const [userId, setUserId] = useState("guest");
|
||||
const [isAuthed, setIsAuthed] = useState(false);
|
||||
const [selectedLessonId, setSelectedLessonId] = useState<string | null>(null);
|
||||
const [completedLessonIds, setCompletedLessonIds] = useState<string[]>([]);
|
||||
const [progress, setProgress] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const loadCourse = () => {
|
||||
setCourse(getCourseBySlug(slug));
|
||||
setHasResolvedCourse(true);
|
||||
};
|
||||
loadCourse();
|
||||
window.addEventListener(teacherCoursesUpdatedEventName, loadCourse);
|
||||
return () => window.removeEventListener(teacherCoursesUpdatedEventName, loadCourse);
|
||||
}, [slug]);
|
||||
|
||||
useEffect(() => {
|
||||
const client = supabaseBrowser();
|
||||
if (!client) return;
|
||||
|
||||
client.auth.getUser().then(({ data }) => {
|
||||
setUserId(data.user?.id ?? "guest");
|
||||
setIsAuthed(Boolean(data.user));
|
||||
});
|
||||
|
||||
const { data } = client.auth.onAuthStateChange((_event, session) => {
|
||||
setUserId(session?.user?.id ?? "guest");
|
||||
setIsAuthed(Boolean(session?.user));
|
||||
});
|
||||
|
||||
return () => data.subscription.unsubscribe();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!course) return;
|
||||
|
||||
const progressState = getCourseProgress(userId, course.slug);
|
||||
const fallback = course.lessons[0]?.id ?? null;
|
||||
setSelectedLessonId(progressState.lastLessonId ?? fallback);
|
||||
setCompletedLessonIds(progressState.completedLessonIds);
|
||||
setProgress(getCourseProgressPercent(userId, course.slug, course.lessons.length));
|
||||
}, [course, userId]);
|
||||
|
||||
const completionSet = new Set(completedLessonIds);
|
||||
|
||||
if (!course && !hasResolvedCourse) {
|
||||
return (
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<p className="text-slate-600">Loading course...</p>
|
||||
</div>
|
||||
);
|
||||
const user = await requireUser();
|
||||
if (!user?.id) {
|
||||
redirect(`/courses/${slug}`);
|
||||
}
|
||||
|
||||
const course = await db.course.findUnique({
|
||||
where: { slug },
|
||||
select: {
|
||||
id: true,
|
||||
slug: true,
|
||||
title: true,
|
||||
price: true,
|
||||
modules: {
|
||||
orderBy: { orderIndex: "asc" },
|
||||
select: {
|
||||
id: true,
|
||||
title: true,
|
||||
lessons: {
|
||||
orderBy: { orderIndex: "asc" },
|
||||
select: {
|
||||
id: true,
|
||||
title: true,
|
||||
description: true,
|
||||
videoUrl: true,
|
||||
estimatedDuration: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (!course) {
|
||||
return (
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<h1 className="text-2xl font-bold text-slate-900">Course not found</h1>
|
||||
<p className="mt-2 text-slate-600">The requested course slug does not exist in mock data.</p>
|
||||
<Link className="mt-4 inline-flex rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white" href="/courses">
|
||||
Back to courses
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
notFound();
|
||||
}
|
||||
|
||||
const selectedLesson =
|
||||
course.lessons.find((lesson) => lesson.id === selectedLessonId) ?? course.lessons[0];
|
||||
let enrollment = await db.enrollment.findUnique({
|
||||
where: {
|
||||
userId_courseId: {
|
||||
userId: user.id,
|
||||
courseId: course.id,
|
||||
},
|
||||
},
|
||||
select: { id: true },
|
||||
});
|
||||
|
||||
if (!selectedLesson) {
|
||||
return (
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<h1 className="text-2xl font-bold text-slate-900">No lessons available</h1>
|
||||
<p className="mt-2 text-slate-600">This course currently has no lessons configured.</p>
|
||||
<Link className="mt-4 inline-flex rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white" href={`/courses/${course.slug}`}>
|
||||
Back to course
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
if (!enrollment) {
|
||||
const isFree = Number(course.price) === 0;
|
||||
if (isFree) {
|
||||
enrollment = await db.enrollment.create({
|
||||
data: {
|
||||
userId: user.id,
|
||||
courseId: course.id,
|
||||
amountPaid: 0,
|
||||
},
|
||||
select: { id: true },
|
||||
});
|
||||
} else {
|
||||
redirect(`/courses/${slug}`);
|
||||
}
|
||||
}
|
||||
|
||||
const isLocked = (lesson: Lesson) => !lesson.isPreview && !isAuthed;
|
||||
const completedProgress = await db.userProgress.findMany({
|
||||
where: {
|
||||
userId: user.id,
|
||||
isCompleted: true,
|
||||
lesson: {
|
||||
module: {
|
||||
courseId: course.id,
|
||||
},
|
||||
},
|
||||
},
|
||||
select: {
|
||||
lessonId: true,
|
||||
},
|
||||
});
|
||||
|
||||
const onSelectLesson = (lesson: Lesson) => {
|
||||
if (isLocked(lesson)) return;
|
||||
setSelectedLessonId(lesson.id);
|
||||
setLastLesson(userId, course.slug, lesson.id);
|
||||
};
|
||||
const modules = course.modules.map((module) => ({
|
||||
id: module.id,
|
||||
title: getText(module.title) || "Untitled module",
|
||||
lessons: module.lessons.map((lesson) => ({
|
||||
id: lesson.id,
|
||||
title: getText(lesson.title) || "Untitled lesson",
|
||||
description: getText(lesson.description),
|
||||
videoUrl: lesson.videoUrl,
|
||||
estimatedDuration: lesson.estimatedDuration,
|
||||
})),
|
||||
}));
|
||||
|
||||
const onMarkComplete = () => {
|
||||
if (!selectedLesson) return;
|
||||
markLessonComplete(userId, course.slug, selectedLesson.id);
|
||||
const progressState = getCourseProgress(userId, course.slug);
|
||||
setCompletedLessonIds(progressState.completedLessonIds);
|
||||
setProgress(getCourseProgressPercent(userId, course.slug, course.lessons.length));
|
||||
};
|
||||
const flattenedLessonIds = modules.flatMap((module) => module.lessons.map((lesson) => lesson.id));
|
||||
const initialSelectedLessonId =
|
||||
requestedLessonId && flattenedLessonIds.includes(requestedLessonId)
|
||||
? requestedLessonId
|
||||
: flattenedLessonIds[0] ?? "";
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<header className="acve-panel p-6">
|
||||
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||
<div>
|
||||
<Link className="inline-flex items-center gap-2 text-base text-slate-600 hover:text-brand md:text-xl" href={`/courses/${course.slug}`}>
|
||||
<span className="text-base">{"<-"}</span>
|
||||
Back to Course
|
||||
</Link>
|
||||
<h1 className="mt-2 text-3xl text-[#222b39] md:text-5xl">Course Content</h1>
|
||||
</div>
|
||||
<div className="min-w-[240px]">
|
||||
<ProgressBar value={progress} label={`${progress}% complete`} />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="space-y-3">
|
||||
{course.lessons.map((lesson, index) => (
|
||||
<div key={lesson.id} className="space-y-1">
|
||||
<LessonRow
|
||||
index={index}
|
||||
isActive={lesson.id === selectedLesson?.id}
|
||||
isLocked={isLocked(lesson)}
|
||||
lesson={lesson}
|
||||
onSelect={() => onSelectLesson(lesson)}
|
||||
/>
|
||||
{completionSet.has(lesson.id) ? (
|
||||
<p className="pl-2 text-sm font-medium text-[#2f9d73]">Completed</p>
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
|
||||
<section className="acve-panel space-y-4 p-6">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h2 className="text-2xl text-[#222b39] md:text-4xl">{selectedLesson.title}</h2>
|
||||
<p className="mt-1 text-base text-slate-600">
|
||||
{selectedLesson.type} | {selectedLesson.minutes} min
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
className="acve-button-primary px-4 py-2 text-sm font-semibold hover:brightness-105"
|
||||
onClick={onMarkComplete}
|
||||
type="button"
|
||||
>
|
||||
Mark complete
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{lessonContent(selectedLesson)}
|
||||
</section>
|
||||
</div>
|
||||
<StudentClassroomClient
|
||||
courseSlug={course.slug}
|
||||
courseTitle={getText(course.title) || "Untitled course"}
|
||||
modules={modules}
|
||||
initialSelectedLessonId={initialSelectedLessonId}
|
||||
initialCompletedLessonIds={completedProgress.map((progress) => progress.lessonId)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user