67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
import { PlusIcon } from "@heroicons/react/24/outline";
|
|
import { CourseList } from "@web/src/components/models/course/list/course-list";
|
|
import { Button } from "@web/src/components/presentation/element/Button";
|
|
import { api } from "@nice/client";
|
|
import { useState } from "react";
|
|
import { CourseCard } from "@web/src/components/models/course/card/CourseCard";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useAuth } from "@web/src/providers/auth-provider";
|
|
|
|
export default function InstructorCoursesPage() {
|
|
const navigate = useNavigate();
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const { user } = useAuth();
|
|
|
|
const { data: paginationRes, refetch } =
|
|
api.course.findManyWithPagination.useQuery({
|
|
page: currentPage,
|
|
pageSize: 8,
|
|
where: {
|
|
instructors: {
|
|
some: {
|
|
instructorId: user?.id,
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
const handlePageChange = (page: number) => {
|
|
setCurrentPage(page);
|
|
refetch();
|
|
};
|
|
|
|
return (
|
|
<div className="bg-slate-50 px-4 py-8 sm:px-6 lg:px-8">
|
|
<div className="mx-auto max-w-7xl">
|
|
<div className="mb-8 flex items-center justify-between">
|
|
<h1 className="text-3xl font-semibold text-slate-800">
|
|
我教授的课程
|
|
</h1>
|
|
<Button
|
|
onClick={() => navigate("/course/manage")}
|
|
variant="primary"
|
|
leftIcon={<PlusIcon className="w-5 h-5" />}>
|
|
创建课程
|
|
</Button>
|
|
</div>
|
|
<CourseList
|
|
totalPages={paginationRes?.totalPages}
|
|
onPageChange={handlePageChange}
|
|
currentPage={currentPage}
|
|
courses={paginationRes?.items as any}
|
|
renderItem={(course) => (
|
|
<CourseCard
|
|
onClick={() => {
|
|
navigate(`/course/${course.id}/detail`, {
|
|
replace: true,
|
|
});
|
|
}}
|
|
course={course}
|
|
/>
|
|
)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|