55 lines
2.0 KiB
TypeScript
55 lines
2.0 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 "@nicestack/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 course={course} />}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|