From 20f6fdbb79bf86ffbc9b7a1c0c2bb52bc5c18049 Mon Sep 17 00:00:00 2001
From: Joseph Chalabi <100090645+chalabi2@users.noreply.github.com>
Date: Mon, 2 Dec 2024 11:20:48 -0700
Subject: [PATCH] feat: add pagination to token factory list (#94)

---
 components/factory/components/MyDenoms.tsx | 102 ++++++++++++++++++---
 components/groups/components/myGroups.tsx  |   4 +-
 pages/admins.tsx                           |   2 +-
 pages/bank.tsx                             |   2 +-
 pages/factory/index.tsx                    |   2 +-
 pages/groups/index.tsx                     |   2 +-
 6 files changed, 92 insertions(+), 22 deletions(-)

diff --git a/components/factory/components/MyDenoms.tsx b/components/factory/components/MyDenoms.tsx
index 4aade520..7b974dd0 100644
--- a/components/factory/components/MyDenoms.tsx
+++ b/components/factory/components/MyDenoms.tsx
@@ -13,6 +13,8 @@ import { ExtendedMetadataSDKType, shiftDigits } from '@/utils';
 import { MultiMintModal } from '@/components/factory/modals';
 import { MultiBurnModal } from '../modals/multiMfxBurnModal';
 import { usePoaGetAdmin } from '@/hooks';
+import useIsMobile from '@/hooks/useIsMobile';
+
 export default function MyDenoms({
   denoms,
   isLoading,
@@ -25,12 +27,27 @@ export default function MyDenoms({
   address: string;
 }) {
   const [searchQuery, setSearchQuery] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+  const isMobile = useIsMobile();
+
+  const pageSize = isMobile ? 6 : 8;
+
   const router = useRouter();
   const [selectedDenom, setSelectedDenom] = useState<ExtendedMetadataSDKType | null>(null);
   const [modalType, setModalType] = useState<
     'mint' | 'burn' | 'multimint' | 'multiburn' | 'update' | null
   >(null);
 
+  const filteredDenoms = useMemo(() => {
+    return denoms.filter(denom => denom?.display.toLowerCase().includes(searchQuery.toLowerCase()));
+  }, [denoms, searchQuery]);
+
+  const totalPages = Math.ceil(filteredDenoms.length / pageSize);
+  const paginatedDenoms = filteredDenoms.slice(
+    (currentPage - 1) * pageSize,
+    currentPage * pageSize
+  );
+
   const handleDenomSelect = (denom: ExtendedMetadataSDKType) => {
     if (!modalType) {
       // Only show denom info if no other modal is active
@@ -107,10 +124,6 @@ export default function MyDenoms({
     });
   };
 
-  const filteredDenoms = useMemo(() => {
-    return denoms.filter(denom => denom?.display.toLowerCase().includes(searchQuery.toLowerCase()));
-  }, [denoms, searchQuery]);
-
   return (
     <div className="relative w-full h-screen overflow-hidden">
       <div className="h-full flex flex-col p-4">
@@ -149,13 +162,13 @@ export default function MyDenoms({
                 <tr className="text-sm font-medium">
                   <th className="bg-transparent w-1/4">Token</th>
                   <th className="bg-transparent w-2/5 xl:table-cell hidden">Name</th>
-                  <th className="bg-transparent w-2/5">Total Supply</th>
+                  <th className="bg-transparent w-2/5  md:table-cell hidden">Total Supply</th>
                   <th className="bg-transparent w-1/4">Actions</th>
                 </tr>
               </thead>
               <tbody className="space-y-4">
                 {isLoading
-                  ? Array(10)
+                  ? Array(isMobile ? 6 : 8)
                       .fill(0)
                       .map((_, index) => (
                         <tr key={index}>
@@ -207,7 +220,7 @@ export default function MyDenoms({
                           </td>
                         </tr>
                       ))
-                  : filteredDenoms.map(denom => (
+                  : paginatedDenoms.map(denom => (
                       <TokenRow
                         key={denom.base}
                         denom={denom}
@@ -227,6 +240,70 @@ export default function MyDenoms({
                     ))}
               </tbody>
             </table>
+            {totalPages > 1 && (
+              <div
+                className="flex items-center justify-center gap-2 "
+                onClick={e => e.stopPropagation()}
+                role="navigation"
+                aria-label="Pagination"
+              >
+                <button
+                  onClick={e => {
+                    e.stopPropagation();
+                    setCurrentPage(prev => Math.max(1, prev - 1));
+                  }}
+                  disabled={currentPage === 1 || isLoading}
+                  className="p-2 hover:bg-[#FFFFFF1A] rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  aria-label="Previous page"
+                >
+                  ‹
+                </button>
+
+                {[...Array(totalPages)].map((_, index) => {
+                  const pageNum = index + 1;
+                  if (
+                    pageNum === 1 ||
+                    pageNum === totalPages ||
+                    (pageNum >= currentPage - 1 && pageNum <= currentPage + 1)
+                  ) {
+                    return (
+                      <button
+                        key={pageNum}
+                        onClick={e => {
+                          e.stopPropagation();
+                          setCurrentPage(pageNum);
+                        }}
+                        className={`w-8 h-8 flex items-center justify-center rounded-lg transition-colors
+                          ${currentPage === pageNum ? 'bg-[#FFFFFF1A] text-white' : 'hover:bg-[#FFFFFF1A]'}`}
+                        aria-label={`Page ${pageNum}`}
+                        aria-current={currentPage === pageNum ? 'page' : undefined}
+                      >
+                        {pageNum}
+                      </button>
+                    );
+                  } else if (pageNum === currentPage - 2 || pageNum === currentPage + 2) {
+                    return (
+                      <span key={pageNum} aria-hidden="true">
+                        ...
+                      </span>
+                    );
+                  }
+                  return null;
+                })}
+
+                <button
+                  onClick={e => {
+                    e.stopPropagation();
+                    setCurrentPage(prev => Math.min(totalPages, prev + 1));
+                  }}
+                  disabled={currentPage === totalPages || isLoading}
+                  className="p-2 hover:bg-[#FFFFFF1A] rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  aria-label="Next page"
+                >
+                  ›
+                </button>
+              </div>
+            )}
           </div>
           <div className="block md:hidden mt-8">
             <Link href="/factory/create" passHref>
@@ -237,12 +314,7 @@ export default function MyDenoms({
           </div>
         </div>
       </div>
-      <DenomInfoModal
-        denom={selectedDenom}
-        modalId="denom-info-modal"
-        isOpen={!!selectedDenom && !modalType}
-        onClose={handleCloseModal}
-      />
+      <DenomInfoModal denom={selectedDenom} modalId="denom-info-modal" />
       <MintModal
         admin={poaAdmin ?? 'manifest1afk9zr2hn2jsac63h4hm60vl9z3e5u69gndzf7c99cqge3vzwjzsfmy9qj'}
         isPoaAdminLoading={isPoaAdminLoading}
@@ -343,8 +415,8 @@ function TokenRow({
       <td className="bg-secondary group-hover:bg-base-300 w-2/5 xl:table-cell hidden">
         {truncateString(denom?.name ?? 'No name provided', 20)}
       </td>
-      <td className="bg-secondary group-hover:bg-base-300 w-2/5 sm:w-1/4">
-        <div className="flex flex-col sm:flex-row sm:items-center">
+      <td className="bg-secondary group-hover:bg-base-300 w-2/5 md:table-cell hidden sm:w-1/4">
+        <div className="flex flex-col sm:flex-row sm:items-center ">
           <span className="sm:mr-2">{formatAmount(totalSupply)}</span>
           <span className="font-extralight">
             {truncateString(denom?.display ?? 'No ticker provided', 10).toUpperCase()}
diff --git a/components/groups/components/myGroups.tsx b/components/groups/components/myGroups.tsx
index 6c9ae5da..98e9f09e 100644
--- a/components/groups/components/myGroups.tsx
+++ b/components/groups/components/myGroups.tsx
@@ -146,7 +146,7 @@ export function YourGroups({
                 </thead>
                 <tbody className="space-y-4" role="rowgroup">
                   {isLoading
-                    ? Array(8)
+                    ? Array(isMobile ? 6 : 8)
                         .fill(0)
                         .map((_, index) => (
                           <tr key={index} data-testid="skeleton-row">
@@ -325,8 +325,6 @@ export function YourGroups({
           />
         </React.Fragment>
       ))}
-
-      {/* Add pagination controls */}
     </div>
   );
 }
diff --git a/pages/admins.tsx b/pages/admins.tsx
index bca86fa4..e3b4521b 100644
--- a/pages/admins.tsx
+++ b/pages/admins.tsx
@@ -24,7 +24,7 @@ export default function Admins() {
   const isMember = group?.members?.some(member => member?.member?.address === address);
   console.log(group, groupByAdmin, isMember);
   return (
-    <div className="min-h-screen relative py-4 px-2 mx-auto text-white mt-12 md:mt-0">
+    <div className="min-h-screen relative py-4 px-2 mx-auto text-white ">
       <Head>
         <title>Admins - Alberto</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
diff --git a/pages/bank.tsx b/pages/bank.tsx
index edd9c30f..a0074f9e 100644
--- a/pages/bank.tsx
+++ b/pages/bank.tsx
@@ -124,7 +124,7 @@ export default function Bank() {
           </script>
         </Head>
 
-        <div className="h-[calc(100vh-1.5rem)] py-1 gap-6 flex flex-col w-full lg:flex-row">
+        <div className="h-[calc(100vh-1.5rem)] py-1 gap-6 flex flex-col w-full lg:flex-row animate-fadeIn">
           {!isWalletConnected ? (
             <WalletNotConnected
               description=" Use the button below to connect your wallet and start interacting with your
diff --git a/pages/factory/index.tsx b/pages/factory/index.tsx
index 6cd3eaba..1111a0b2 100644
--- a/pages/factory/index.tsx
+++ b/pages/factory/index.tsx
@@ -75,7 +75,7 @@ export default function Factory() {
   const isDataReady = combinedData.length > 0;
 
   return (
-    <div className="min-h-screen relative py-4 px-2 mx-auto text-white mt-12 md:mt-0">
+    <div className="min-h-screen relative py-4 px-2 mx-auto text-white ">
       <Head>
         <title>Factory - Alberto</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
diff --git a/pages/groups/index.tsx b/pages/groups/index.tsx
index a19d6e2e..482d569a 100644
--- a/pages/groups/index.tsx
+++ b/pages/groups/index.tsx
@@ -26,7 +26,7 @@ export default function Groups() {
   const isError = isGroupByMemberError || isProposalsError;
 
   return (
-    <div className="min-h-screen relative py-4 px-2 mx-auto text-white mt-12 md:mt-0">
+    <div className="min-h-screen relative py-4 px-2 mx-auto text-white ">
       <Head>
         <title>Groups - Alberto</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />