First commit
This commit is contained in:
mdares
214
app/(protected)/courses/[slug]/learn/page.tsx
Normal file
214
app/(protected)/courses/[slug]/learn/page.tsx
Normal file
@@ -0,0 +1,214 @@
|
||||
"use client";
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
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);
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
const selectedLesson =
|
||||
course.lessons.find((lesson) => lesson.id === selectedLessonId) ?? course.lessons[0];
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
const isLocked = (lesson: Lesson) => !lesson.isPreview && !isAuthed;
|
||||
|
||||
const onSelectLesson = (lesson: Lesson) => {
|
||||
if (isLocked(lesson)) return;
|
||||
setSelectedLessonId(lesson.id);
|
||||
setLastLesson(userId, course.slug, lesson.id);
|
||||
};
|
||||
|
||||
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));
|
||||
};
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user