fix(certificate): certificates pagination bug (#384)

.commitlintrc.json

@@ -13,6 +13,7 @@
         "billing",
         "provider",
         "deployment",
+        "certificate",
         "dx"
       ]
     ]

apps/deploy-web/src/components/settings/CertificateList.tsx

@@ -1,6 +1,7 @@
 "use client";
+import { useState, useEffect } from "react";
 import { FormattedDate } from "react-intl";
-import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@akashnetwork/ui/components";
+import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, CustomPagination } from "@akashnetwork/ui/components";
 import { Check } from "iconoir-react";
 
 import { ConnectWallet } from "@src/components/shared/ConnectWallet";
@@ -11,6 +12,24 @@ import { CertificateDisplay } from "./CertificateDisplay";
 export const CertificateList: React.FunctionComponent = () => {
   const { validCertificates, localCert, selectedCertificate, revokeCertificate, revokeAllCertificates, isLoadingCertificates } = useCertificate();
   const { address } = useWallet();
+  const [pageIndex, setPageIndex] = useState(0);
+  const [pageSize, setPageSize] = useState<number>(10);
+  const sortedValidCertificates = [...validCertificates].sort((a, b) => {
+    return new Date(b.pem.issuedOn).getTime() - new Date(a.pem.issuedOn).getTime();
+  });
+  const start = pageIndex * pageSize;
+  const end = start + pageSize;
+  const currentPageCertificates = sortedValidCertificates.slice(start, end);
+  const pageCount = Math.ceil(sortedValidCertificates.length / pageSize);
+
+  const handleChangePage = (newPage: number) => {
+    setPageIndex(newPage);
+  };
+
+  const onPageSizeChange = (value: number) => {
+    setPageSize(value);
+    setPageIndex(0);
+  };
 
   return (
     <div>
@@ -37,7 +56,7 @@ export const CertificateList: React.FunctionComponent = () => {
             </TableHeader>
 
             <TableBody>
-              {validCertificates.map(cert => {
+              {currentPageCertificates.map(cert => {
                 const isCurrentCert = cert.serial === selectedCertificate?.serial;
                 return (
                   <TableRow key={cert.serial}>
@@ -74,6 +93,18 @@ export const CertificateList: React.FunctionComponent = () => {
               <p>No certificates.</p>
             </div>
           )}
+
+          {validCertificates.length > 0 && (
+            <div className="flex items-center justify-center py-8">
+              <CustomPagination
+                totalPageCount={pageCount}
+                setPageIndex={handleChangePage}
+                pageIndex={pageIndex}
+                pageSize={pageSize}
+                setPageSize={onPageSizeChange}
+              />
+            </div>
+          )}
         </div>
       ) : (
         <ConnectWallet text="Connect your wallet to create a certficate." />

apps/deploy-web/src/context/CertificateProvider/CertificateProviderContext.tsx

@@ -2,17 +2,16 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { certificateManager } from "@akashnetwork/akashjs/build/certificates/certificate-manager";
 import { Snackbar } from "@akashnetwork/ui/components";
-import axios from "axios";
 import { event } from "nextjs-google-analytics";
 import { useSnackbar } from "notistack";
 
-import networkStore from "@src/store/networkStore";
-import { RestApiCertificatesResponseType } from "@src/types/certificate";
+import { RestApiCertificate } from "@src/types/certificate";
 import { AnalyticsEvents } from "@src/utils/analytics";
 import { TransactionMessageData } from "@src/utils/TransactionMessageData";
 import { getStorageWallets, updateWallet } from "@src/utils/walletUtils";
 import { useSettings } from "../SettingsProvider";
 import { useWallet } from "../WalletProvider";
+import { ApiUrlService, loadWithPagination } from "@src/utils/apiUtils";
 
 export type LocalCert = {
   certPem: string;
@@ -73,17 +72,14 @@ export const CertificateProvider = ({ children }) => {
   const { enqueueSnackbar } = useSnackbar();
   const { address, signAndBroadcastTx } = useWallet();
   const { apiEndpoint } = settings;
-  const selectedNetwork = networkStore.useSelectedNetwork();
 
   const loadValidCertificates = useCallback(
     async (showSnackbar?: boolean) => {
       setIsLoadingCertificates(true);
 
       try {
-        const response = await axios.get<RestApiCertificatesResponseType>(
-          `${apiEndpoint}/akash/cert/${selectedNetwork.apiVersion}/certificates/list?filter.state=valid&filter.owner=${address}`
-        );
-        const certs = (response.data.certificates || []).map(cert => {
+        const certificates = await loadWithPagination<RestApiCertificate[]>(ApiUrlService.certificatesList(apiEndpoint, address), "certificates", 1000);
+        const certs = (certificates || []).map(cert => {
           const parsed = atob(cert.certificate.cert);
           const pem = certificateManager.parsePem(parsed);
 

apps/deploy-web/src/types/certificate.ts

@@ -1,14 +1,16 @@
 export type RestApiCertificatesResponseType = {
-  certificates: {
-    certificate: {
-      cert: string;
-      pubkey: string;
-      state: string;
-    };
-    serial: string;
-  }[];
+  certificates: RestApiCertificate[];
   pagination: {
     next_key: string;
     total: string;
   };
 };
+
+export type RestApiCertificate = {
+  certificate: {
+    cert: string;
+    pubkey: string;
+    state: string;
+  };
+  serial: string;
+};

apps/deploy-web/src/utils/apiUtils.ts

@@ -8,6 +8,9 @@ export class ApiUrlService {
   static depositParams(apiEndpoint: string) {
     return `${apiEndpoint}/cosmos/params/v1beta1/params?subspace=deployment&key=MinDeposits`;
   }
+  static certificatesList(apiEndpoint: string, address: string) {
+    return `${apiEndpoint}/akash/cert/${networkStore.apiVersion}/certificates/list?filter.state=valid&filter.owner=${address}`;
+  }
   static deploymentList(apiEndpoint: string, address: string, isActive?: boolean) {
     return `${apiEndpoint}/akash/deployment/${networkStore.apiVersion}/deployments/list?filters.owner=${address}${isActive ? "&filters.state=active" : ""}`;
   }