113 lines
3.7 KiB
TypeScript
113 lines
3.7 KiB
TypeScript
"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>
|
|
);
|
|
}
|