diff --git a/app/routes/hospitals.tsx b/app/routes/hospitals.tsx index 38ce256..d60024e 100644 --- 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(); + const { hospitals, page } = useLoaderData(); return ( <> {hospitals?.map((hospital) => ( @@ -34,6 +45,38 @@ const Hospitals = () => { vaccines={hospital.vaccines.map((vaccine) => vaccine.name)} /> ))} + + + {page > 1 && ( + <> + + + + + + {page - 1} + + + + )} + + + {page} + + + + + {page + 1} + + + + + + + + + + ); };