ページネーションのロジックを改善し、不要なコンポーネントを削除しました。また、ページ番号の管理を統一しました。 (#670)

ttizze · Mar 4, 2025 · eafdad1 · eafdad1
2 parents ab0f87f + 6115751
commit eafdad1
Show file tree

Hide file tree

Showing 10 changed files with 47 additions and 114 deletions.
diff --git a/next/src/app/[locale]/(common-layout)/search/search.client.tsx b/next/src/app/[locale]/(common-layout)/search/search.client.tsx
@@ -43,7 +43,7 @@ export function SearchPageClient({ pages, tags, users, totalPages }: Props) {
 
 	const [pageNumber, setPageNumber] = useQueryState(
 		"page",
-		parseAsInteger.withOptions({
+		parseAsInteger.withDefault(1).withOptions({
 			shallow: false,
 			startTransition,
 		}),
@@ -54,10 +54,6 @@ export function SearchPageClient({ pages, tags, users, totalPages }: Props) {
 		setPageNumber(1);
 	}
 
-	function handlePageChange(newPage: number) {
-		setPageNumber(newPage);
-	}
-
 	function renderIcon(cat: Category) {
 		switch (cat) {
 			case "title":
@@ -181,11 +177,7 @@ export function SearchPageClient({ pages, tags, users, totalPages }: Props) {
 			)}
 			{totalPages > 1 && (
 				<div className="mt-4 flex items-center gap-4">
-					<PaginationBar
-						totalPages={totalPages}
-						currentPage={pageNumber ?? 1}
-						onPageChange={handlePageChange}
-					/>
+					<PaginationBar totalPages={totalPages} currentPage={pageNumber} />
 				</div>
 			)}
 		</div>

diff --git a/next/src/app/[locale]/(common-layout)/user/[handle]/_components/page-list.server.tsx b/next/src/app/[locale]/(common-layout)/user/[handle]/_components/page-list.server.tsx
@@ -1,10 +1,10 @@
 import { PageCard } from "@/app/[locale]/_components/page-card";
+import { PaginationBar } from "@/app/[locale]/_components/pagination-bar";
 import { fetchPaginatedPublicPagesWithInfo } from "@/app/[locale]/_db/queries.server";
 import { fetchUserByHandle } from "@/app/_db/queries.server";
 import { getCurrentUser } from "@/auth";
 import { getGuestId } from "@/lib/get-guest-id";
 import { notFound } from "next/navigation";
-import { PaginationControls } from "./pagination-controls";
 interface PageListServerProps {
 	handle: string;
 	page: number;
@@ -24,16 +24,17 @@ export async function PageListServer({
 	if (!pageOwner) {
 		return notFound();
 	}
-	const { pagesWithInfo, totalPages, currentPage } =
-		await fetchPaginatedPublicPagesWithInfo({
+	const { pagesWithInfo, totalPages } = await fetchPaginatedPublicPagesWithInfo(
+		{
 			page: page,
 			pageSize: 9,
 			currentUserId: currentUser?.id,
 			currentGuestId: guestId,
 			pageOwnerId: pageOwner.id,
 			onlyUserOwn: true,
 			locale,
-		});
+		},
+	);
 
 	if (pagesWithInfo.length === 0) {
 		return (
@@ -58,7 +59,7 @@ export async function PageListServer({
 			</div>
 
 			<div className="mt-8 flex justify-center">
-				<PaginationControls currentPage={currentPage} totalPages={totalPages} />
+				<PaginationBar totalPages={totalPages} currentPage={page} />
 			</div>
 		</>
 	);

diff --git a/next/src/app/[locale]/(common-layout)/user/[handle]/_components/pagination-controls.tsx b/next/src/app/[locale]/(common-layout)/user/[handle]/_components/pagination-controls.tsx
diff --git a/.../(common-layout)/user/[handle]/page-management/_components/page-management-tab/client.tsx b/.../(common-layout)/user/[handle]/page-management/_components/page-management-tab/client.tsx
@@ -7,7 +7,7 @@ import { Input } from "@/components/ui/input";
 import { Link } from "@/i18n/routing";
 import type { PageStatus } from "@prisma/client";
 import { EyeIcon } from "lucide-react";
-import { parseAsInteger, parseAsString, useQueryState } from "nuqs";
+import { parseAsString, useQueryState } from "nuqs";
 import type { ReactNode } from "react";
 import type { PageWithTitle } from "../../_db/queries.server";
 
@@ -32,12 +32,6 @@ export function PageManagementTabClient({
 			shallow: false,
 		}),
 	);
-	const [page, setPage] = useQueryState(
-		"page",
-		parseAsInteger.withOptions({
-			shallow: false,
-		}),
-	);
 
 	const getStatusBadge = (status: PageStatus) => {
 		if (status === "PUBLIC") {
@@ -93,11 +87,7 @@ export function PageManagementTabClient({
 			</div>
 
 			<div className="flex justify-center mt-4">
-				<PaginationBar
-					totalPages={totalPages}
-					currentPage={currentPage}
-					onPageChange={setPage}
-				/>
+				<PaginationBar totalPages={totalPages} currentPage={currentPage} />
 			</div>
 		</div>
 	);

diff --git a/next/src/app/[locale]/_components/pages-list-tab/client.tsx b/next/src/app/[locale]/_components/pages-list-tab/client.tsx
@@ -11,39 +11,26 @@ interface PagesListTabClientProps {
 	initialTab: string;
 	pagesWithInfo: PageCardLocalizedType[];
 	totalPages: number;
-	currentPage: number;
 	locale: string;
 }
 
 export function PagesListTabClient({
 	initialTab,
 	pagesWithInfo,
 	totalPages,
-	currentPage,
 }: PagesListTabClientProps) {
 	const [activeTab, setActiveTab] = useQueryState(
 		"activeTab",
 		parseAsString.withOptions({ shallow: false }),
 	);
-	const [recommendedPage, setRecommendedPage] = useQueryState(
-		"recommendedPage",
-		parseAsInteger.withOptions({ shallow: false }),
-	);
-	const [newPage, setNewPage] = useQueryState(
-		"newPage",
-		parseAsInteger.withOptions({ shallow: false }),
+	const [page, setPage] = useQueryState(
+		"page",
+		parseAsInteger.withDefault(1).withOptions({ shallow: false }),
 	);
 
 	const handleTabChange = (value: string) => {
 		setActiveTab(value);
-	};
-
-	const handlePageChange = (pageNumber: number) => {
-		if (initialTab === "recommended") {
-			setRecommendedPage(pageNumber);
-		} else {
-			setNewPage(pageNumber);
-		}
+		setPage(1);
 	};
 
 	return (
@@ -72,11 +59,7 @@ export function PagesListTabClient({
 					</div>
 					{/* ページネーション */}
 					<div className="mt-8 flex justify-center">
-						<PaginationBar
-							totalPages={totalPages}
-							currentPage={currentPage}
-							onPageChange={handlePageChange}
-						/>
+						<PaginationBar totalPages={totalPages} currentPage={page} />
 					</div>
 				</TabsContent>
 
@@ -94,11 +77,7 @@ export function PagesListTabClient({
 					</div>
 					{/* ページネーション */}
 					<div className="mt-8 flex justify-center">
-						<PaginationBar
-							totalPages={totalPages}
-							currentPage={currentPage}
-							onPageChange={handlePageChange}
-						/>
+						<PaginationBar totalPages={totalPages} currentPage={page} />
 					</div>
 				</TabsContent>
 			</Tabs>

diff --git a/next/src/app/[locale]/_components/pages-list-tab/index.tsx b/next/src/app/[locale]/_components/pages-list-tab/index.tsx
@@ -6,8 +6,7 @@ import type { SearchParams } from "nuqs/server";
 import { PagesListTabClient } from "./client";
 const searchParamsSchema = {
 	activeTab: parseAsString.withDefault("recommended"),
-	recommendedPage: parseAsInteger.withDefault(1),
-	newPage: parseAsInteger.withDefault(1),
+	page: parseAsInteger.withDefault(1),
 };
 
 const loadSearchParams = createLoader(searchParamsSchema);
@@ -23,16 +22,14 @@ export default async function PageListTab({
 	currentUserId,
 	searchParams,
 }: PageListTabProps) {
-	const { activeTab, recommendedPage, newPage } =
-		await loadSearchParams(searchParams);
+	const { activeTab, page } = await loadSearchParams(searchParams);
 	const guestId = await getGuestId();
 
 	let pagesWithInfo: PageCardLocalizedType[] = [];
 	let totalPages = 0;
-	let currentPage = 1;
 	if (activeTab === "recommended") {
 		const result = await fetchPaginatedPublicPagesWithInfo({
-			page: Number(recommendedPage),
+			page,
 			pageSize: 9,
 			currentUserId: currentUserId,
 			currentGuestId: guestId,
@@ -41,25 +38,22 @@ export default async function PageListTab({
 		});
 		pagesWithInfo = result.pagesWithInfo;
 		totalPages = result.totalPages;
-		currentPage = result.currentPage;
 	} else {
 		const result = await fetchPaginatedPublicPagesWithInfo({
-			page: Number(newPage),
+			page,
 			pageSize: 9,
 			currentUserId: currentUserId,
 			currentGuestId: guestId,
 			locale,
 		});
 		pagesWithInfo = result.pagesWithInfo;
 		totalPages = result.totalPages;
-		currentPage = result.currentPage;
 	}
 	return (
 		<PagesListTabClient
 			initialTab={activeTab}
 			pagesWithInfo={pagesWithInfo}
 			totalPages={totalPages}
-			currentPage={currentPage}
 			locale={locale}
 		/>
 	);

diff --git a/next/src/app/[locale]/_components/pagination-bar.tsx b/next/src/app/[locale]/_components/pagination-bar.tsx
@@ -1,4 +1,4 @@
-// app/components/PaginationBar.tsx
+"use client";
 import {
 	Pagination,
 	PaginationContent,
@@ -8,27 +8,34 @@ import {
 	PaginationNext,
 	PaginationPrevious,
 } from "@/components/ui/pagination";
+import { usePathname, useSearchParams } from "next/navigation";
+
 interface PaginationBarProps {
 	totalPages: number;
 	currentPage: number;
-	onPageChange: (page: number) => void;
 }
 
-export function PaginationBar({
-	totalPages,
-	currentPage,
-	onPageChange,
-}: PaginationBarProps) {
+export function PaginationBar({ totalPages, currentPage }: PaginationBarProps) {
 	if (totalPages <= 1) {
-		return null; // 総ページ数が1以下ならページング不要
+		return null;
 	}
 
+	const pathname = usePathname();
+	const searchParams = useSearchParams();
+	const currentParams = Object.fromEntries(searchParams.entries());
+
+	// 現在の URL の pathname と既存の searchParams をベースに、
+	// page パラメータだけを上書きするリンク用 URL オブジェクトを生成
+	const getPageUrl = (page: number) => ({
+		pathname,
+		query: { ...currentParams, page: page.toString() },
+	});
 	return (
 		<Pagination className="mt-4">
 			<PaginationContent className="w-full justify-between">
 				<PaginationItem>
 					<PaginationPrevious
-						onClick={() => onPageChange(currentPage - 1)}
+						href={getPageUrl(currentPage - 1)}
 						className={
 							currentPage === 1 ? "pointer-events-none opacity-50" : ""
 						}
@@ -45,7 +52,7 @@ export function PaginationBar({
 								return (
 									<PaginationItem key={`page-${pageNumber}`}>
 										<PaginationLink
-											onClick={() => onPageChange(pageNumber)}
+											href={getPageUrl(pageNumber)}
 											isActive={currentPage === pageNumber}
 										>
 											{pageNumber}
@@ -65,7 +72,7 @@ export function PaginationBar({
 				</div>
 				<PaginationItem>
 					<PaginationNext
-						onClick={() => onPageChange(currentPage + 1)}
+						href={getPageUrl(currentPage + 1)}
 						className={
 							currentPage === totalPages ? "pointer-events-none opacity-50" : ""
 						}

diff --git a/next/src/app/[locale]/_components/start-button.tsx b/next/src/app/[locale]/_components/start-button.tsx
@@ -6,7 +6,10 @@ interface StartButtonProps {
 
 export function StartButton({ className }: StartButtonProps) {
 	return (
-		<Link href="/auth/login">
+		<Link
+			href="/auth/login"
+			aria-label="Get started by logging in to your account"
+		>
 			<Button
 				variant="outline"
 				className={`${className} rounded-full`}

diff --git a/next/src/app/[locale]/_db/queries.server.ts b/next/src/app/[locale]/_db/queries.server.ts
@@ -85,7 +85,6 @@ export async function fetchPaginatedPublicPagesWithInfo({
 }: FetchParams): Promise<{
 	pagesWithInfo: PageCardLocalizedType[];
 	totalPages: number;
-	currentPage: number;
 }> {
 	const skip = (page - 1) * pageSize;
 
@@ -155,7 +154,6 @@ export async function fetchPaginatedPublicPagesWithInfo({
 	return {
 		pagesWithInfo,
 		totalPages: Math.ceil(totalCount / pageSize),
-		currentPage: page,
 	};
 }
 

diff --git a/next/src/components/ui/pagination.tsx b/next/src/components/ui/pagination.tsx
@@ -1,13 +1,13 @@
+import { type ButtonProps, buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 import {
 	ChevronLeftIcon,
 	ChevronRightIcon,
 	DotsHorizontalIcon,
 } from "@radix-ui/react-icons";
+import Link from "next/link";
 import * as React from "react";
 
-import { type ButtonProps, buttonVariants } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-
 const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
 	<nav
 		aria-label="pagination"
@@ -40,15 +40,15 @@ PaginationItem.displayName = "PaginationItem";
 type PaginationLinkProps = {
 	isActive?: boolean;
 } & Pick<ButtonProps, "size"> &
-	React.ComponentProps<"a">;
+	React.ComponentProps<typeof Link>;
 
 const PaginationLink = ({
 	className,
 	isActive,
 	size = "icon",
 	...props
 }: PaginationLinkProps) => (
-	<a
+	<Link
 		aria-current={isActive ? "page" : undefined}
 		className={cn(
 			buttonVariants({