fix: pagination component

getAlby · Feb 18, 2025 · 907e2c9 · 907e2c9
1 parent f456a89
commit 907e2c9
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 11 deletions.
diff --git a/frontend/src/components/TransactionsList.tsx b/frontend/src/components/TransactionsList.tsx
@@ -1,5 +1,5 @@
 import { Drum } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import EmptyState from "src/components/EmptyState";
 import Loading from "src/components/Loading";
 import TransactionItem from "src/components/TransactionItem";
@@ -14,7 +14,7 @@ import {
 } from "src/components/ui/pagination";
 import { LIST_TRANSACTIONS_LIMIT } from "src/constants";
 import { useTransactions } from "src/hooks/useTransactions";
-import { generatePageNumbers } from "src/lib/utils";
+import { cn, generatePageNumbers } from "src/lib/utils";
 
 type TransactionsListProps = {
   appId?: number;
@@ -32,6 +32,13 @@ function TransactionsList({
     LIST_TRANSACTIONS_LIMIT,
     page
   );
+  const transactions = transactionData?.transactions || [];
+  const totalCount = transactionData?.totalCount || 0;
+  const totalPages = Math.ceil(totalCount / LIST_TRANSACTIONS_LIMIT);
+
+  const pageNumbers = useMemo(() => {
+    return generatePageNumbers(page, totalPages);
+  }, [page, totalPages]);
 
   useEffect(() => {
     const el = document.querySelector(".transaction-list");
@@ -44,10 +51,6 @@ function TransactionsList({
     return <Loading />;
   }
 
-  const transactions = transactionData?.transactions || [];
-  const totalCount = transactionData?.totalCount || 0;
-  const totalPages = Math.ceil(totalCount / LIST_TRANSACTIONS_LIMIT);
-
   const handlePageChange = (newPage: number) => {
     if (newPage < 1 || newPage > totalPages) {
       return;
@@ -78,7 +81,12 @@ function TransactionsList({
             <div className="mt-4 self-center">
               <Pagination>
                 <PaginationContent>
-                  <PaginationItem>
+                  <PaginationItem
+                    className={cn(
+                      page === 1 &&
+                        "pointer-events-none opacity-30 dark:opacity-20"
+                    )}
+                  >
                     <PaginationPrevious
                       href="#"
                       onClick={(e) => {
@@ -88,13 +96,13 @@ function TransactionsList({
                     />
                   </PaginationItem>
 
-                  {generatePageNumbers(page, totalPages).map((p, index) =>
+                  {pageNumbers.map((p, index) =>
                     p === "ellipsis" ? (
                       <PaginationItem key={index}>
                         <PaginationEllipsis className="flex items-center" />
                       </PaginationItem>
                     ) : (
-                      <PaginationItem key={p}>
+                      <PaginationItem key={index}>
                         <PaginationLink
                           href="#"
                           isActive={p === page}
@@ -109,7 +117,12 @@ function TransactionsList({
                     )
                   )}
 
-                  <PaginationItem>
+                  <PaginationItem
+                    className={cn(
+                      page === totalPages &&
+                        "pointer-events-none opacity-30 dark:opacity-20"
+                    )}
+                  >
                     <PaginationNext
                       href="#"
                       onClick={(e) => {

diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
@@ -22,7 +22,7 @@ export function splitSocketAddress(socketAddress: string) {
 }
 
 export function generatePageNumbers(currentPage: number, totalPages: number) {
-  const MAX_PAGES_TO_SHOW = 2;
+  const MAX_PAGES_TO_SHOW = 3;
   const pageNumbers: (number | "ellipsis")[] = [];
   const half = Math.floor(MAX_PAGES_TO_SHOW / 2);