book_manage/apps/web/src/app/main/courses/page.tsx

import { useState, useMemo } from "react";
import { mockCourses } from "./mockData";
import FilterSection from "./components/FilterSection";
import CourseList from "./components/CourseList";
import { api } from "@nice/client";
import { LectureType, PostType } from "@nice/common";


export default function CoursesPage() {
	const [currentPage, setCurrentPage] = useState(1);
	const [selectedCategory, setSelectedCategory] = useState("");
	const [selectedLevel, setSelectedLevel] = useState("");
	const pageSize = 12;
	const { data, isLoading } = api.post.findManyWithPagination.useQuery({
		where: {
			type: PostType.COURSE,
			terms: {
				some: {
					AND: [
						...(selectedCategory
							? [
									{
										name: selectedCategory,
									},
								]
							: []),
						...(selectedLevel
							? [
									{
										name: selectedLevel,
									},
								]
							: []),
					],
				},
			},
		},
	});
	const filteredCourses = useMemo(() => {
		return mockCourses.filter((course) => {
			const matchCategory =
				!selectedCategory || course.category === selectedCategory;
			const matchLevel = !selectedLevel || course.level === selectedLevel;
			return matchCategory && matchLevel;
		});
	}, [selectedCategory, selectedLevel]);

	const paginatedCourses = useMemo(() => {
		const startIndex = (currentPage - 1) * pageSize;
		return filteredCourses.slice(startIndex, startIndex + pageSize);
	}, [filteredCourses, currentPage]);

	const handlePageChange = (page: number) => {
		setCurrentPage(page);
		window.scrollTo({ top: 0, behavior: "smooth" });
	};

	return (
		<div className="min-h-screen bg-gray-50">
			<div className="container mx-auto px-4 py-8">
				<div className="flex  gap-4">
					{/* 左侧筛选区域 */}
					<div className="lg:w-1/5">
						<div className="sticky top-24">
							<FilterSection
								selectedCategory={selectedCategory}
								selectedLevel={selectedLevel}
								onCategoryChange={(category) => {
									console.log(category);
									setSelectedCategory(category);
									setCurrentPage(1);
								}}
								onLevelChange={(level) => {
									setSelectedLevel(level);
									setCurrentPage(1);
								}}
							/>
						</div>
					</div>

					{/* 右侧课程列表区域 */}
					<div className="lg:w-4/5">
						<div className="bg-white p-6 rounded-lg shadow-sm">
							<div className="flex justify-between items-center mb-6">
								<span className="text-gray-600">
									共找到 {filteredCourses.length} 门课程
								</span>
							</div>
							<CourseList
								courses={paginatedCourses}
								total={filteredCourses.length}
								pageSize={pageSize}
								currentPage={currentPage}
								onPageChange={handlePageChange}
							/>
						</div>
					</div>
				</div>
			</div>
		</div>
	);
}