npx shadcn-ui@latest add input
npx prima migrate reset
npx prima db push
const requiredFields = [
course.title,
course.description,
course.imageUrl,
course.price,
course.categoryId,
course.chapters.some((chapter) => chapter.isPublished),
];
const totalFields = requiredFields.length;
const completedFields = requiredFields.filter(Boolean).length;
const completed = `(${completedFields}/${totalFields})`;
const isComplete = requiredFields.every(Boolean);
const [isEditing, setIsEditing] = useState(false);
const toggleEdit = () => setIsEditing((current) => !current);
const router = useRouter();
const formSchema = z.object({
title: z.string().min(1, {
message: "Title is required",
}),
});
type Values = z.infer<typeof formSchema>;
const form = useForm<Values>({
resolver: zodResolver(formSchema),
defaultValues: {
title: initialTitle,
},
};
const { isSubmitting, isValid } = form.formState;
const onSubmit = async (values: z.infer<typeof formSchema>) => {
try {
await axios.patch(`/api/courses/${courseId}`, values);
toast.success("Course updated");
toggleEdit();
router.refresh();
} catch {
toast.error("Something went wrong");
}
};
<Button onClick={toggleEdit} variant="ghost">
{isEditing ? (
<>Cancel</>
) : (
<>
<Pencil className="h-4 w-4 mr-2" />
Edit title
</>
)}
</Button>;
{
!isEditing && <p className="text-sm mt-2">{initialTitle}</p>;
}
{
isEditing && (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 mt-4">
<FormField
control={form.control}
name="title"
render={({ field }) => (
<FormItem>
<FormControl>
<Input disabled={isSubmitting} placeholder="e.g. 'Advanced web development'" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="flex items-center gap-x-2">
<Button disabled={!isValid || isSubmitting} type="submit">
Save
</Button>
</div>
</form>
</Form>
);
}
import { auth } from "@clerk/nextjs";
import { NextResponse } from "next/server";
import { db } from "@/lib/db";
export async function PATCH(req: Request, { params }: { params: { courseId: string } }) {
try {
const { userId } = auth();
const { courseId } = params;
const values = await req.json();
if (!userId) {
return new NextResponse("Unauthorized", { status: 401 });
}
const course = await db.course.update({
where: {
id: courseId,
userId,
},
data: {
...values,
},
});
return NextResponse.json(course);
} catch (error) {
console.log("[COURSE_ID]", error);
return new NextResponse("Internal Error", { status: 500 });
}
}