First commit
This commit is contained in:
mdares
68
components/teacher/TeacherDashboardClient.tsx
Normal file
68
components/teacher/TeacherDashboardClient.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useEffect, useState } from "react";
|
||||
import { getTeacherCourses, teacherCoursesUpdatedEventName } from "@/lib/data/teacherCourses";
|
||||
import type { Course } from "@/types/course";
|
||||
|
||||
export default function TeacherDashboardClient() {
|
||||
const [courses, setCourses] = useState<Course[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const load = () => setCourses(getTeacherCourses());
|
||||
load();
|
||||
window.addEventListener(teacherCoursesUpdatedEventName, load);
|
||||
return () => window.removeEventListener(teacherCoursesUpdatedEventName, load);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-slate-900">Teacher Dashboard</h1>
|
||||
<p className="text-slate-600">Manage teacher-created courses stored locally for MVP.</p>
|
||||
</div>
|
||||
<Link
|
||||
className="rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white hover:brightness-105"
|
||||
href="/teacher/courses/new"
|
||||
>
|
||||
Create course
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{courses.length === 0 ? (
|
||||
<div className="rounded-xl border border-dashed border-slate-300 bg-white p-6 text-sm text-slate-600">
|
||||
No teacher-created courses yet.
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-4">
|
||||
{courses.map((course) => (
|
||||
<article key={course.slug} className="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
|
||||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-brand">{course.level}</p>
|
||||
<h2 className="text-xl font-semibold text-slate-900">{course.title}</h2>
|
||||
<p className="mt-1 text-sm text-slate-600">{course.summary}</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Link
|
||||
className="rounded-md border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-50"
|
||||
href={`/teacher/courses/${course.slug}/edit`}
|
||||
>
|
||||
Edit
|
||||
</Link>
|
||||
<Link
|
||||
className="rounded-md border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-50"
|
||||
href={`/teacher/courses/${course.slug}/lessons/new`}
|
||||
>
|
||||
Add lesson
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
176
components/teacher/TeacherEditCourseForm.tsx
Normal file
176
components/teacher/TeacherEditCourseForm.tsx
Normal file
@@ -0,0 +1,176 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { FormEvent, useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { getTeacherCourseBySlug, teacherCoursesUpdatedEventName, updateTeacherCourse } from "@/lib/data/teacherCourses";
|
||||
import type { Course, CourseLevel } from "@/types/course";
|
||||
|
||||
const levels: CourseLevel[] = ["Beginner", "Intermediate", "Advanced"];
|
||||
|
||||
type TeacherEditCourseFormProps = {
|
||||
slug: string;
|
||||
};
|
||||
|
||||
export default function TeacherEditCourseForm({ slug }: TeacherEditCourseFormProps) {
|
||||
const router = useRouter();
|
||||
const [course, setCourse] = useState<Course | null>(null);
|
||||
const [title, setTitle] = useState("");
|
||||
const [level, setLevel] = useState<CourseLevel>("Beginner");
|
||||
const [summary, setSummary] = useState("");
|
||||
const [instructor, setInstructor] = useState("");
|
||||
const [weeks, setWeeks] = useState(4);
|
||||
const [rating, setRating] = useState(5);
|
||||
const [saved, setSaved] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const load = () => {
|
||||
const found = getTeacherCourseBySlug(slug) ?? null;
|
||||
setCourse(found);
|
||||
if (!found) return;
|
||||
setTitle(found.title);
|
||||
setLevel(found.level);
|
||||
setSummary(found.summary);
|
||||
setInstructor(found.instructor);
|
||||
setWeeks(found.weeks);
|
||||
setRating(found.rating);
|
||||
};
|
||||
|
||||
load();
|
||||
window.addEventListener(teacherCoursesUpdatedEventName, load);
|
||||
return () => window.removeEventListener(teacherCoursesUpdatedEventName, load);
|
||||
}, [slug]);
|
||||
|
||||
const submit = (event: FormEvent) => {
|
||||
event.preventDefault();
|
||||
if (!course) return;
|
||||
|
||||
updateTeacherCourse(course.slug, {
|
||||
title: title.trim(),
|
||||
level,
|
||||
summary: summary.trim(),
|
||||
instructor: instructor.trim(),
|
||||
weeks: Math.max(1, weeks),
|
||||
rating: Math.min(5, Math.max(0, rating)),
|
||||
});
|
||||
setSaved(true);
|
||||
window.setTimeout(() => setSaved(false), 1200);
|
||||
};
|
||||
|
||||
if (!course) {
|
||||
return (
|
||||
<div className="mx-auto max-w-2xl space-y-3 rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<h1 className="text-2xl font-bold text-slate-900">Teacher course not found</h1>
|
||||
<p className="text-slate-600">This editor only works for courses created in the teacher area.</p>
|
||||
<Link className="inline-flex rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white" href="/teacher">
|
||||
Back to dashboard
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-3xl space-y-5">
|
||||
<form className="space-y-4 rounded-xl border border-slate-200 bg-white p-6 shadow-sm" onSubmit={submit}>
|
||||
<h1 className="text-2xl font-bold text-slate-900">Edit Course</h1>
|
||||
|
||||
<label className="block">
|
||||
<span className="mb-1 block text-sm text-slate-700">Title</span>
|
||||
<input
|
||||
className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
|
||||
onChange={(event) => setTitle(event.target.value)}
|
||||
value={title}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="block">
|
||||
<span className="mb-1 block text-sm text-slate-700">Level</span>
|
||||
<select
|
||||
className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
|
||||
onChange={(event) => setLevel(event.target.value as CourseLevel)}
|
||||
value={level}
|
||||
>
|
||||
{levels.map((item) => (
|
||||
<option key={item} value={item}>
|
||||
{item}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="block">
|
||||
<span className="mb-1 block text-sm text-slate-700">Summary</span>
|
||||
<textarea
|
||||
className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
|
||||
onChange={(event) => setSummary(event.target.value)}
|
||||
rows={3}
|
||||
value={summary}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<label className="block">
|
||||
<span className="mb-1 block text-sm text-slate-700">Instructor</span>
|
||||
<input
|
||||
className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
|
||||
onChange={(event) => setInstructor(event.target.value)}
|
||||
value={instructor}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="block">
|
||||
<span className="mb-1 block text-sm text-slate-700">Weeks</span>
|
||||
<input
|
||||
className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
|
||||
min={1}
|
||||
onChange={(event) => setWeeks(Number(event.target.value))}
|
||||
type="number"
|
||||
value={weeks}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="block">
|
||||
<span className="mb-1 block text-sm text-slate-700">Rating (0-5)</span>
|
||||
<input
|
||||
className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
|
||||
max={5}
|
||||
min={0}
|
||||
onChange={(event) => setRating(Number(event.target.value))}
|
||||
step={0.1}
|
||||
type="number"
|
||||
value={rating}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<button className="rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white hover:brightness-105" type="submit">
|
||||
Save changes
|
||||
</button>
|
||||
{saved ? <span className="text-sm font-medium text-emerald-700">Saved</span> : null}
|
||||
<button
|
||||
className="rounded-md border border-slate-300 px-4 py-2 text-sm hover:bg-slate-50"
|
||||
onClick={() => router.push(`/teacher/courses/${course.slug}/lessons/new`)}
|
||||
type="button"
|
||||
>
|
||||
Add lesson
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<section className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<h2 className="text-lg font-semibold text-slate-900">Lessons</h2>
|
||||
<div className="mt-3 space-y-2">
|
||||
{course.lessons.map((lesson) => (
|
||||
<div key={lesson.id} className="rounded-md border border-slate-200 p-3 text-sm">
|
||||
<p className="font-medium text-slate-900">{lesson.title}</p>
|
||||
<p className="text-slate-600">
|
||||
{lesson.type} | {lesson.minutes} min {lesson.isPreview ? "| Preview" : ""}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
112
components/teacher/TeacherNewCourseForm.tsx
Normal file
112
components/teacher/TeacherNewCourseForm.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
"use client";
|
||||
|
||||
import { FormEvent, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { getAllCourseSlugs } from "@/lib/data/courseCatalog";
|
||||
import { createTeacherCourse } from "@/lib/data/teacherCourses";
|
||||
import type { CourseLevel } from "@/types/course";
|
||||
|
||||
const levels: CourseLevel[] = ["Beginner", "Intermediate", "Advanced"];
|
||||
|
||||
export default function TeacherNewCourseForm() {
|
||||
const router = useRouter();
|
||||
const [title, setTitle] = useState("");
|
||||
const [level, setLevel] = useState<CourseLevel>("Beginner");
|
||||
const [summary, setSummary] = useState("");
|
||||
const [instructor, setInstructor] = useState("");
|
||||
const [weeks, setWeeks] = useState(4);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const submit = (event: FormEvent) => {
|
||||
event.preventDefault();
|
||||
setError(null);
|
||||
|
||||
const cleanTitle = title.trim();
|
||||
const cleanSummary = summary.trim();
|
||||
const cleanInstructor = instructor.trim();
|
||||
|
||||
if (!cleanTitle || !cleanSummary || !cleanInstructor) {
|
||||
setError("Title, summary, and instructor are required.");
|
||||
return;
|
||||
}
|
||||
|
||||
const created = createTeacherCourse(
|
||||
{
|
||||
title: cleanTitle,
|
||||
level,
|
||||
summary: cleanSummary,
|
||||
instructor: cleanInstructor,
|
||||
weeks: Math.max(1, weeks),
|
||||
},
|
||||
getAllCourseSlugs(),
|
||||
);
|
||||
|
||||
router.push(`/teacher/courses/${created.slug}/edit`);
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="mx-auto max-w-2xl space-y-4 rounded-xl border border-slate-200 bg-white p-6 shadow-sm" onSubmit={submit}>
|
||||
<h1 className="text-2xl font-bold text-slate-900">Create Course</h1>
|
||||
|
||||
<label className="block">
|
||||
<span className="mb-1 block text-sm text-slate-700">Title</span>
|
||||
<input
|
||||
className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
|
||||
onChange={(event) => setTitle(event.target.value)}
|
||||
value={title}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="block">
|
||||
<span className="mb-1 block text-sm text-slate-700">Level</span>
|
||||
<select
|
||||
className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
|
||||
onChange={(event) => setLevel(event.target.value as CourseLevel)}
|
||||
value={level}
|
||||
>
|
||||
{levels.map((item) => (
|
||||
<option key={item} value={item}>
|
||||
{item}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="block">
|
||||
<span className="mb-1 block text-sm text-slate-700">Summary</span>
|
||||
<textarea
|
||||
className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
|
||||
onChange={(event) => setSummary(event.target.value)}
|
||||
rows={3}
|
||||
value={summary}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="block">
|
||||
<span className="mb-1 block text-sm text-slate-700">Instructor</span>
|
||||
<input
|
||||
className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
|
||||
onChange={(event) => setInstructor(event.target.value)}
|
||||
value={instructor}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="block">
|
||||
<span className="mb-1 block text-sm text-slate-700">Weeks</span>
|
||||
<input
|
||||
className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
|
||||
min={1}
|
||||
onChange={(event) => setWeeks(Number(event.target.value))}
|
||||
type="number"
|
||||
value={weeks}
|
||||
/>
|
||||
</label>
|
||||
|
||||
{error ? <p className="text-sm text-red-600">{error}</p> : null}
|
||||
|
||||
<button className="rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white hover:brightness-105" type="submit">
|
||||
Create course
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
135
components/teacher/TeacherNewLessonForm.tsx
Normal file
135
components/teacher/TeacherNewLessonForm.tsx
Normal file
@@ -0,0 +1,135 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { FormEvent, useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { addLessonToTeacherCourse, getTeacherCourseBySlug, teacherCoursesUpdatedEventName } from "@/lib/data/teacherCourses";
|
||||
import type { Course, LessonType } from "@/types/course";
|
||||
|
||||
const lessonTypes: LessonType[] = ["video", "reading", "interactive"];
|
||||
|
||||
type TeacherNewLessonFormProps = {
|
||||
slug: string;
|
||||
};
|
||||
|
||||
export default function TeacherNewLessonForm({ slug }: TeacherNewLessonFormProps) {
|
||||
const router = useRouter();
|
||||
const [course, setCourse] = useState<Course | null>(null);
|
||||
const [title, setTitle] = useState("");
|
||||
const [type, setType] = useState<LessonType>("video");
|
||||
const [minutes, setMinutes] = useState(10);
|
||||
const [isPreview, setIsPreview] = useState(false);
|
||||
const [videoUrl, setVideoUrl] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const load = () => setCourse(getTeacherCourseBySlug(slug) ?? null);
|
||||
load();
|
||||
window.addEventListener(teacherCoursesUpdatedEventName, load);
|
||||
return () => window.removeEventListener(teacherCoursesUpdatedEventName, load);
|
||||
}, [slug]);
|
||||
|
||||
const submit = (event: FormEvent) => {
|
||||
event.preventDefault();
|
||||
setError(null);
|
||||
|
||||
if (!course) {
|
||||
setError("Teacher course not found.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!title.trim()) {
|
||||
setError("Lesson title is required.");
|
||||
return;
|
||||
}
|
||||
|
||||
addLessonToTeacherCourse(course.slug, {
|
||||
title: title.trim(),
|
||||
type,
|
||||
minutes: Math.max(1, minutes),
|
||||
isPreview,
|
||||
videoUrl: type === "video" ? videoUrl.trim() : undefined,
|
||||
});
|
||||
|
||||
router.push(`/teacher/courses/${course.slug}/edit`);
|
||||
};
|
||||
|
||||
if (!course) {
|
||||
return (
|
||||
<div className="mx-auto max-w-2xl space-y-3 rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<h1 className="text-2xl font-bold text-slate-900">Teacher course not found</h1>
|
||||
<p className="text-slate-600">This lesson creator only works for courses created in the teacher area.</p>
|
||||
<Link className="inline-flex rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white" href="/teacher">
|
||||
Back to dashboard
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<form className="mx-auto max-w-2xl space-y-4 rounded-xl border border-slate-200 bg-white p-6 shadow-sm" onSubmit={submit}>
|
||||
<h1 className="text-2xl font-bold text-slate-900">Add Lesson</h1>
|
||||
<p className="text-sm text-slate-600">Course: {course.title}</p>
|
||||
|
||||
<label className="block">
|
||||
<span className="mb-1 block text-sm text-slate-700">Lesson title</span>
|
||||
<input
|
||||
className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
|
||||
onChange={(event) => setTitle(event.target.value)}
|
||||
value={title}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<label className="block">
|
||||
<span className="mb-1 block text-sm text-slate-700">Type</span>
|
||||
<select
|
||||
className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
|
||||
onChange={(event) => setType(event.target.value as LessonType)}
|
||||
value={type}
|
||||
>
|
||||
{lessonTypes.map((item) => (
|
||||
<option key={item} value={item}>
|
||||
{item}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="block">
|
||||
<span className="mb-1 block text-sm text-slate-700">Minutes</span>
|
||||
<input
|
||||
className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
|
||||
min={1}
|
||||
onChange={(event) => setMinutes(Number(event.target.value))}
|
||||
type="number"
|
||||
value={minutes}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label className="flex items-center gap-2 text-sm text-slate-700">
|
||||
<input checked={isPreview} onChange={(event) => setIsPreview(event.target.checked)} type="checkbox" />
|
||||
Mark as preview lesson
|
||||
</label>
|
||||
|
||||
{type === "video" ? (
|
||||
<label className="block">
|
||||
<span className="mb-1 block text-sm text-slate-700">Video URL (placeholder)</span>
|
||||
<input
|
||||
className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
|
||||
onChange={(event) => setVideoUrl(event.target.value)}
|
||||
placeholder="https://example.com/video"
|
||||
value={videoUrl}
|
||||
/>
|
||||
</label>
|
||||
) : null}
|
||||
|
||||
{error ? <p className="text-sm text-red-600">{error}</p> : null}
|
||||
|
||||
<button className="rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white hover:brightness-105" type="submit">
|
||||
Save lesson
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user