paginate payments history

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,