mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

paginate payments history

Browse Source
This commit is contained in:
m5r 2021-10-03 20:24:46 +02:00
parent bbfe08959c
commit 5f3060c591
5 changed files with 168 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
app/settings/components/billing/billing-history.tsx
View File

@ -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>

35
app/settings/hooks/use-payments-history.ts Normal file
View File

@ -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,
};
}

3
app/settings/hooks/use-subscription.ts
View File

@ -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,

8
app/settings/pages/settings/billing.tsx
View File

@ -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 />

47
app/settings/queries/get-payments.ts
View File

@ -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();
return payments.sort((a, b) => b.payout_date.localeCompare(a.payout_date));
const unsortedPayments = paymentsBySubscription.flat();
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,
};
});