diff --git a/src/app/dashboard/reader/page.tsx b/src/app/dashboard/reader/page.tsx index 56354378..7e942456 100644 --- a/src/app/dashboard/reader/page.tsx +++ b/src/app/dashboard/reader/page.tsx @@ -1,31 +1,54 @@ "use client"; +import { useEffect, useState } from "react"; import { useAccount } from "wagmi"; import { useQuery } from "@tanstack/react-query"; import { supabase, type Donation } from "../../../../lib/supabase"; import { ConnectWallet } from "../../../components/ConnectWallet"; import { formatUnits } from "viem"; -async function fetchDonations(address: string): Promise { - if (!supabase) return []; - const { data } = await supabase +const PAGE_SIZE = 50; + +interface DonationPage { + rows: Donation[]; + totalCount: number; +} + +async function fetchDonationPage( + address: string, + page: number, +): Promise { + if (!supabase) return { rows: [], totalCount: 0 }; + const from = page * PAGE_SIZE; + const to = from + PAGE_SIZE - 1; + const { data, count } = await supabase .from("donations") - .select("*") + .select("*", { count: "exact" }) .eq("donor_address", address.toLowerCase()) .order("block_timestamp", { ascending: false }) + .range(from, to) .returns(); - return data ?? []; + return { rows: data ?? [], totalCount: count ?? 0 }; } export default function ReaderDashboard() { const { address, isConnected } = useAccount(); + const [page, setPage] = useState(0); - const { data: donations = [], isLoading } = useQuery({ - queryKey: ["reader-donations", address], - queryFn: () => fetchDonations(address!), + // Reset to first page when wallet address changes + useEffect(() => { + setPage(0); + }, [address]); + + const { data, isLoading } = useQuery({ + queryKey: ["reader-donations", address, page], + queryFn: () => fetchDonationPage(address!, page), enabled: isConnected && !!address, }); + const donations = data?.rows ?? []; + const totalCount = data?.totalCount ?? 0; + if (!isConnected) { return (
@@ -42,6 +65,10 @@ export default function ReaderDashboard() { BigInt(0), ); + const totalPages = Math.ceil(totalCount / PAGE_SIZE); + const hasMore = page + 1 < totalPages; + const hasPrev = page > 0; + return (

@@ -62,12 +89,11 @@ export default function ReaderDashboard() { Donation History

- {donations.length}{" "} - {donations.length === 1 ? "donation" : "donations"} + {totalCount} {totalCount === 1 ? "donation" : "donations"} {donations.length > 0 && ( {" "} - · {formatUnits(totalDonated, 18)} $PLOT total + · {formatUnits(totalDonated, 18)} $PLOT on this page )}

@@ -84,6 +110,28 @@ export default function ReaderDashboard() {

)}
+ + {totalPages > 1 && ( +
+ + + Page {page + 1} of {totalPages} + + +
+ )}
);