paginationの実装

naoya7076 · Mar 20, 2024 · 4f32ee5 · 4f32ee5
1 parent 5009803
commit 4f32ee5
Showing 1 changed file with 47 additions and 4 deletions.
diff --git a/app/routes/hospitals.tsx b/app/routes/hospitals.tsx
@@ -1,11 +1,22 @@
+import { useEffect, useState } from "react";
 import { Hospital } from "@/components/hospital";
 import { json } from "@remix-run/cloudflare";
 import { supabaseClient } from "@/lib/supabase";
 import type { LoaderFunctionArgs } from "@remix-run/cloudflare";
-import { useLoaderData } from "@remix-run/react";
+import { useLoaderData, useMatches } from "@remix-run/react";
+import {
+	Pagination,
+	PaginationContent,
+	PaginationEllipsis,
+	PaginationItem,
+	PaginationLink,
+	PaginationNext,
+	PaginationPrevious,
+} from "@/components/ui/pagination";
+
 export const loader = async ({ request }: LoaderFunctionArgs) => {
 	const url = new URL(request.url);
-	const page = Number(url.searchParams.get("page")) || 0;
+	const page = parseInt(url.searchParams.get("page") || "1");
 	const limit = 2;
 	const response = new Response();
 	const { data: hospitals } = await supabaseClient(request, response)
@@ -15,14 +26,14 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 		.range(page, page + limit - 1);
 
 	return json(
-		{ hospitals },
+		{ hospitals, page },
 		{
 			headers: response.headers,
 		},
 	);
 };
 const Hospitals = () => {
-	const { hospitals } = useLoaderData<typeof loader>();
+	const { hospitals, page } = useLoaderData<typeof loader>();
 	return (
 		<>
 			{hospitals?.map((hospital) => (
@@ -34,6 +45,38 @@ const Hospitals = () => {
 					vaccines={hospital.vaccines.map((vaccine) => vaccine.name)}
 				/>
 			))}
+			<Pagination className="my-5">
+				<PaginationContent>
+					{page > 1 && (
+						<>
+							<PaginationItem>
+								<PaginationPrevious to={`/hospitals/?page=${page - 1}`} />
+							</PaginationItem>
+							<PaginationItem>
+								<PaginationLink to={`/hospitals/?page=${page - 1}`}>
+									{page - 1}
+								</PaginationLink>
+							</PaginationItem>
+						</>
+					)}
+					<PaginationItem>
+						<PaginationLink isActive to={`/hospitals/?page=${page}`}>
+							{page}
+						</PaginationLink>
+					</PaginationItem>
+					<PaginationItem>
+						<PaginationLink to={`/hospitals/?page=${page + 1}`}>
+							{page + 1}
+						</PaginationLink>
+					</PaginationItem>
+					<PaginationItem>
+						<PaginationEllipsis />
+					</PaginationItem>
+					<PaginationItem>
+						<PaginationNext to={`/hospitals/?page=${page + 1}`} />
+					</PaginationItem>
+				</PaginationContent>
+			</Pagination>
 		</>
 	);
 };