Merge pull request #142 from rayanfer32/feat/dynamic-trustlist

rayanfer32 · Apr 24, 2022 · 72b47cd · 72b47cd
2 parents 6b78e4c + 15cbd53
commit 72b47cd
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 33 deletions.
diff --git a/src/components/Table/DynamicPagination.jsx b/src/components/Table/DynamicPagination.jsx
@@ -72,8 +72,9 @@ export default function DynamicPagination({ controls }) {
             <BiChevronLeft color="inherit" />
           </button>
           <span className={styles.pagination__btn__page}>
-            Page <strong>
-              {pageIndex + 1} of {pageCount}
+            Page{' '}
+            <strong>
+              {pageIndex + 1} {pageCount != Infinity && `of ${pageCount}`}
             </strong>
           </span>
           <button
@@ -83,17 +84,20 @@ export default function DynamicPagination({ controls }) {
             disabled={!canNextPage}>
             <BiChevronRight color="inherit" />
           </button>
-          <button
-            className={styles.pagination__btn__icon}
-            type="secondary"
-            onClick={handleEndOfPageClick}
-            disabled={!canNextPage}>
-            <BiLastPage color="inherit" />
-          </button>
+          {pageCount != Infinity && (
+            <button
+              className={styles.pagination__btn__icon}
+              type="secondary"
+              onClick={handleEndOfPageClick}
+              disabled={!canNextPage}>
+              <BiLastPage color="inherit" />
+            </button>
+          )}
         </span>
         <div className={styles.pagination__goToPage}>
           <span className={styles.pagination__goToPage__pageSelect}>
-            Go to page: <input
+            Go to page:{' '}
+            <input
               type="number"
               defaultValue={pageIndex + 1}
               onChange={handleGotoPageInputChange}

diff --git a/src/hooks/useNetwork/useNetwork.jsx b/src/hooks/useNetwork/useNetwork.jsx
@@ -44,16 +44,17 @@ export function useNetwork() {
     return res.data.result;
   }
 
-  const getTrustlist = async () => {
+  const getTrustlist = async ({ queryKey }) => {
     const res = await axios.get(`${url}/register/list/trust`, {
       headers: { 'Cache-Control': 'max-age=300' },
       params: {
-        // limit: 100,
+        page: queryKey[1],
+        limit: queryKey[2],
         sort: 'trust',
         order: 'desc',
       },
     });
-    return res.data;
+    return res;
   };
 
   const getRichlist = async () => {

diff --git a/src/pages/trustlist/index.js b/src/pages/trustlist/index.js
@@ -7,19 +7,22 @@ import CopyText from 'components/atoms/NE_CopyText/CopyText';
 import { useNetwork } from 'hooks/useNetwork/useNetwork';
 import ErrorCard from 'components/atoms/NE_ErrorCard/ErrorCard';
 import PageHeader from 'components/Header/PageHeader';
+import DynamicPagination from 'components/Table/DynamicPagination';
+import { useState } from 'react';
+import ErrorMessage from 'components/atoms/ErrorMessage';
 
 export default function Trustlist() {
+  const [pageIndex, setPageIndex] = useState(0);
+  const [pageSize, setPageSize] = useState(10);
+  const [pageCount, setPageCount] = useState(Infinity);
+
   const { network, getTrustlist } = useNetwork();
   const { isLoading, data, error } = useQuery(
-    ['trustlist', network.name],
+    ['trustlist', pageIndex, pageSize, network.name],
     getTrustlist
   );
 
   const columns = [
-    {
-      Header: '#ID',
-      Cell: (props) => <div>{parseInt(props.cell.row.id) + 1}</div>,
-    },
     {
       Header: 'Address',
       accessor: 'address',
@@ -68,20 +71,43 @@ export default function Trustlist() {
     );
   }
 
-  if (data) {
-    const newData = data.result.map((item, index) => ({
-      key: index,
-      ...item,
-      stake: item.stake,
-      balance: item.balance,
-    }));
-    return (
-      <>
-        <PageHeader page={'trustlist'} />
-        <div className={styles.page} style={{ marginBottom: '1rem' }}>
-          <Table columns={columns} data={newData} />
+  const newData = data.data?.result?.map((item, index) => ({
+    key: index,
+    ...item,
+    stake: item.stake,
+    balance: item.balance,
+  }));
+
+  const dynamicPageControls = {
+    canPreviousPage: pageIndex > 0,
+    canNextPage: pageIndex < pageCount - 1,
+    pageCount: pageCount,
+    pageIndex: pageIndex,
+    pageSize: pageSize,
+    gotoPage: (pageIndex) => {
+      setPageIndex(pageIndex);
+    },
+    setPageSize: (pageSize) => {
+      setPageIndex(0);
+      setPageSize(pageSize);
+    },
+  };
+
+  return (
+    <>
+      <PageHeader page={'trustlist'} />
+      <div className={styles.page} style={{ marginBottom: '1rem' }}>
+
+        <Table
+          columns={columns}
+          data={data.data?.error ? [] : newData}
+          paginate={false}
+        />
+        <div style={{ marginBottom: '1rem' }}>
+          <DynamicPagination controls={dynamicPageControls} />
         </div>
-      </>
-    );
-  }
+        {data.data?.error && <ErrorMessage error={data.data.error} />}
+      </div>
+    </>
+  );
 }