paginate payments history

app/settings/components/billing/billing-history.tsx

@@ -1,7 +1,21 @@
-import useSubscription from "../../hooks/use-subscription";
+import { IoChevronBack, IoChevronForward } from "react-icons/io5";
+import clsx from "clsx";
+
+import usePaymentsHistory from "../../hooks/use-payments-history";
 
 export default function BillingHistory() {
-	const { payments } = useSubscription();
+	const {
+		payments,
+		count,
+		skip,
+		pagesNumber,
+		currentPage,
+		goToPreviousPage,
+		hasPreviousPage,
+		goToNextPage,
+		hasNextPage,
+		setPage,
+	} = usePaymentsHistory();
 
 	if (payments.length === 0) {
 		return null;
@@ -77,6 +91,77 @@ export default function BillingHistory() {
 									))}
 								</tbody>
 							</table>
+
+							<div className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
+								<div className="flex-1 flex justify-between sm:hidden">
+									<button
+										onClick={goToPreviousPage}
+										className={clsx(
+											"relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50",
+											!hasPreviousPage && "invisible",
+										)}
+									>
+										Previous
+									</button>
+									<p className="text-sm text-gray-700 self-center">
+										Page <span className="font-medium">1</span> of{" "}
+										<span className="font-medium">4</span>
+									</p>
+									<button
+										onClick={goToNextPage}
+										className={clsx(
+											"ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50",
+											!hasNextPage && "invisible",
+										)}
+									>
+										Next
+									</button>
+								</div>
+								<div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+									<div>
+										<p className="text-sm text-gray-700">
+											Showing <span className="font-medium">{skip + 1}</span> to{" "}
+											<span className="font-medium">{skip + payments.length}</span> of{" "}
+											<span className="font-medium">{count}</span> results
+										</p>
+									</div>
+									<div>
+										<nav
+											className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
+											aria-label="Pagination"
+										>
+											<button
+												onClick={goToPreviousPage}
+												className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+											>
+												<span className="sr-only">Previous</span>
+												<IoChevronBack className="h-5 w-5" aria-hidden="true" />
+											</button>
+											{pagesNumber.map((pageNumber) => (
+												<button
+													key={`billing-history-button-page-${pageNumber}`}
+													onClick={() => setPage(pageNumber)}
+													className={clsx(
+														"relative inline-flex items-center px-4 py-2 border text-sm font-medium",
+														pageNumber === currentPage
+															? "z-10 bg-indigo-50 border-indigo-500 text-indigo-600"
+															: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50",
+													)}
+												>
+													{pageNumber}
+												</button>
+											))}
+											<button
+												onClick={goToNextPage}
+												className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+											>
+												<span className="sr-only">Next</span>
+												<IoChevronForward className="h-5 w-5" aria-hidden="true" />
+											</button>
+										</nav>
+									</div>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>

app/settings/hooks/use-payments-history.ts

@@ -0,0 +1,35 @@
+import { useState } from "react";
+import { usePaginatedQuery } from "blitz";
+
+import getPayments from "../queries/get-payments";
+
+const itemsPerPage = 5;
+
+export default function usePaymentsHistory() {
+	const [skip, setSkip] = useState(0);
+	const [{ payments, hasMore, nextPage, count }] = usePaginatedQuery(getPayments, { skip, take: itemsPerPage });
+
+	const totalPages = Math.ceil(count / itemsPerPage);
+	const pagesNumber = Array(totalPages)
+		.fill(-1)
+		.map((_, i) => i + 1);
+	const currentPage = Math.floor((skip / count) * totalPages) + 1;
+	const hasPreviousPage = skip > 0;
+	const hasNextPage = hasMore && !!nextPage;
+	const goToPreviousPage = () => hasPreviousPage && setSkip(skip - itemsPerPage);
+	const goToNextPage = () => hasNextPage && setSkip(nextPage.skip);
+	const setPage = (pageNumber: number) => setSkip((pageNumber - 1) * itemsPerPage);
+
+	return {
+		payments,
+		count,
+		skip,
+		pagesNumber,
+		currentPage,
+		hasPreviousPage,
+		hasNextPage,
+		goToPreviousPage,
+		goToNextPage,
+		setPage,
+	};
+}

app/settings/hooks/use-subscription.ts

@@ -3,7 +3,6 @@ import { useQuery, useMutation, useSession } from "blitz";
 
 import type { Subscription } from "db";
 import getSubscription from "../queries/get-subscription";
-import getPayments from "../queries/get-payments";
 import usePaddle from "./use-paddle";
 import useCurrentUser from "../../core/hooks/use-current-user";
 import updateSubscription from "../mutations/update-subscription";
@@ -20,7 +19,6 @@ export default function useSubscription({ initialData }: Params = {}) {
 		initialData,
 		refetchInterval: isWaitingForSubChange ? 1500 : false,
 	});
-	const [payments] = useQuery(getPayments, null);
 	const [updateSubscriptionMutation] = useMutation(updateSubscription);
 
 	const resolve = useRef<() => void>();
@@ -107,7 +105,6 @@ export default function useSubscription({ initialData }: Params = {}) {
 
 	return {
 		subscription,
-		payments,
 		subscribe,
 		updatePaymentMethod,
 		cancelSubscription,

app/settings/pages/settings/billing.tsx

@@ -4,13 +4,14 @@ import { GetServerSideProps, getSession, Routes } from "blitz";
 import db, { Subscription, SubscriptionStatus } from "db";
 import useSubscription from "../../hooks/use-subscription";
 import useRequireOnboarding from "../../../core/hooks/use-require-onboarding";
+import usePaymentsHistory from "../../hooks/use-payments-history";
 import SettingsLayout from "../../components/settings-layout";
 import SettingsSection from "../../components/settings-section";
 import Divider from "../../components/divider";
 import PaddleLink from "../../components/billing/paddle-link";
 import Plans from "../../components/billing/plans";
 import BillingHistory from "../../components/billing/billing-history";
-import appLogger from "../../../../integrations/logger";
+import appLogger from "integrations/logger";
 
 const logger = appLogger.child({ page: "/account/settings/billing" });
 
@@ -27,7 +28,8 @@ const Billing: BlitzPage<Props> = (props) => {
 	*/
 
 	useRequireOnboarding();
-	const { subscription, cancelSubscription, updatePaymentMethod, payments } = useSubscription({
+	const { count: paymentsCount } = usePaymentsHistory();
+	const { subscription, cancelSubscription, updatePaymentMethod } = useSubscription({
 		initialData: props.subscription,
 	});
 
@@ -48,7 +50,7 @@ const Billing: BlitzPage<Props> = (props) => {
 				</SettingsSection>
 			) : null}
 
-			{payments.length > 0 ? (
+			{paymentsCount > 0 ? (
 				<>
 					<BillingHistory />
 

app/settings/queries/get-payments.ts

@@ -1,21 +1,56 @@
-import { resolver } from "blitz";
+import { paginate, resolver } from "blitz";
+import { z } from "zod";
 
 import db from "db";
 import { getPayments } from "integrations/paddle";
 
-export default resolver.pipe(resolver.authorize(), async (_ = null, { session }) => {
+const Body = z.object({
+	skip: z.number().optional(),
+	take: z.number().optional(),
+});
+
+export default resolver.pipe(resolver.zod(Body), resolver.authorize(), async ({ skip, take }, { session }) => {
 	if (!session.orgId) {
-		return [];
+		return {
+			payments: [],
+			nextPage: null,
+			hasMore: false,
+			count: 0,
+		};
 	}
 
 	const subscriptions = await db.subscription.findMany({ where: { organizationId: session.orgId } });
 	if (subscriptions.length === 0) {
-		return [];
+		return {
+			payments: [],
+			nextPage: null,
+			hasMore: false,
+			count: 0,
+		};
 	}
 
 	const paymentsBySubscription = await Promise.all(
 		subscriptions.map((subscription) => getPayments({ subscriptionId: subscription.paddleSubscriptionId })),
 	);
-	const payments = paymentsBySubscription.flat();
+	const unsortedPayments = paymentsBySubscription.flat();
-	return payments.sort((a, b) => b.payout_date.localeCompare(a.payout_date));
+	const allPayments = Array.from(unsortedPayments).sort((a, b) => b.payout_date.localeCompare(a.payout_date));
+
+	const {
+		items: payments,
+		hasMore,
+		nextPage,
+		count,
+	} = await paginate({
+		skip,
+		take,
+		count: () => Promise.resolve(allPayments.length),
+		query: ({ skip, take }) => Promise.resolve(allPayments.slice(skip, skip + take)),
+	});
+
+	return {
+		payments,
+		nextPage,
+		hasMore,
+		count,
+	};
 });