dynamic pagination for richlist WIP

.vscode/settings.json

@@ -2,7 +2,6 @@
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "files.associations": {
-    "*.js": "javascript",
     "*.jsx": "javascriptreact"
   },
   "python.linting.pylintEnabled": false,

src/components/Richlist/Richlist.jsx

@@ -0,0 +1,131 @@
+import Table from 'components/Table/Table';
+import { useQuery } from 'react-query';
+import styles from './richlist.module.scss';
+import Loader from 'components/atoms/NE_Loader';
+import { intlNum } from 'utils/converter';
+import ApexPie from 'components/Chart/ApexPie';
+import TYPES from 'types';
+import CopyText from 'components/atoms/NE_CopyText';
+import { useNetwork } from 'hooks/useNetwork/useNetwork';
+import { useEffect, useState } from 'react';
+import Pagination from 'components/atoms/NE_Pagination';
+
+export default function Richlist() {
+  const { network, getRichlist, getMetrics } = useNetwork();
+
+  const [pageIndex, setPageIndex] = useState(0);
+  const [pageSize, setPageSize] = useState(100);
+  const [pageCount, setPageCount] = useState(Infinity);
+
+  const [pieData, setPieData] = useState();
+
+  const { isLoading, data, error } = useQuery(
+    ['richlist', pageIndex, pageSize, network.name],
+    () => getRichlist(pageIndex, pageSize)
+  );
+
+  const metricsRQ = useQuery(['metrics', network.name], getMetrics);
+  const richlist111 = useQuery(['richlist', network.name], () =>
+    getRichlist(0, 111)
+  );
+  const totalSupply = metricsRQ?.data?.result?.supply?.total;
+  const PIE_LABELS = ['Top 1', 'Top 10', 'Top 100', 'Others'];
+
+  const columns = [
+    {
+      Header: '#ID',
+      Cell: (props) => (
+        <div>{parseInt(props.cell.row.id) + 1 + pageIndex * pageSize}</div>
+      ),
+    },
+    {
+      Header: 'Address',
+      accessor: 'address',
+      Cell: ({ value }) => (value ? <CopyText value={value} /> : '-'),
+    },
+    {
+      Header: 'Balance',
+      accessor: 'total',
+      Cell: ({ value }) => (value ? intlNum(value.toFixed(2)) + ' NXS' : '-'),
+    },
+    {
+      Header: 'Trust',
+      accessor: 'trust',
+      Cell: ({ value }) => (value ? intlNum(value) + '' : '-'),
+    },
+    {
+      Header: 'Stake Rate',
+      accessor: 'rate',
+      Cell: ({ value }) => (value ? intlNum(value.toFixed(2)) + '' : '-'),
+    },
+  ];
+
+  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);
+    },
+  };
+
+  useEffect(() => {
+    if (richlist111.data) {
+      const sortedData = richlist111.data.data;
+      const top1 = sortedData.slice(0, 1);
+      const top10 = sortedData.slice(1, 11);
+      const top100 = sortedData.slice(11, 111);
+      const sumTop1 = top1.reduce((acc, cur) => acc + cur.total, 0);
+      const sumTop10 = top10.reduce((acc, cur) => acc + cur.total, 0);
+      const sumTop100 = top100.reduce((acc, cur) => acc + cur.total, 0);
+
+      setPieData([
+        sumTop1,
+        sumTop10,
+        sumTop100,
+        (totalSupply || TYPES.MAX_SUPPLY.VALUE) -
+          (sumTop100 + sumTop10 + sumTop1),
+      ]);
+    }
+  }, [richlist111.data]);
+
+  if (isLoading) {
+    return (
+      <div
+        style={{
+          display: 'grid',
+          placeItems: 'center',
+          minHeight: '200px',
+          margin: 'auto',
+        }}>
+        <Loader type="circle" size="5rem" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return <pre>{JSON.stringify(error, null, 2)}</pre>;
+  }
+
+  return (
+    <>
+      <div className={styles.page} style={{ marginBottom: '1rem' }}>
+        <div className={styles.chartContainer}>
+          <h3>NXS Distrubution</h3>
+          {pieData && <ApexPie series={pieData} labels={PIE_LABELS} />}
+        </div>
+        <div className={styles.top_pagination}>
+          {pageSize > 10 && <Pagination controls={dynamicPageControls} />}
+        </div>
+        <Table columns={columns} data={data.data || []} paginate={false} />
+        <Pagination controls={dynamicPageControls} />
+      </div>
+    </>
+  );
+}

src/pages/richlist/richlist.module.scss → src/components/Richlist/richlist.module.scss

@@ -8,3 +8,7 @@
   align-items: center;
   justify-content: center;
 }
+
+.top_pagination {
+  margin-bottom: 1rem;
+}

src/components/Table/DynamicPagination.jsx

@@ -7,6 +7,7 @@ import {
   BiLastPage,
 } from 'react-icons/bi';
 
+// ! will be deprecated soon.
 export default function DynamicPagination({ controls }) {
   const [gotoPageTimer, setGotoPageTimer] = useState();
 
@@ -20,7 +21,7 @@ export default function DynamicPagination({ controls }) {
     pageSize,
   } = controls;
 
-  const dataPerPage = [10, 20, 30, 40, 50];
+  const dataPerPage = [10, 25, 50, 100];
 
   const handleStartOfPageClick = () => {
     gotoPage(0);
@@ -120,4 +121,4 @@ export default function DynamicPagination({ controls }) {
       </div>
     </>
   );
-}
+}

src/components/Table/Pagination.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styles from './Pagination.module.scss';
 import {
   BiChevronLeft,
@@ -7,11 +7,11 @@ import {
   BiLastPage,
 } from 'react-icons/bi';
 
+// ! will be deprecated soon.
 function Pagination({ controls }) {
   const {
     canPreviousPage,
     canNextPage,
-    pageOptions,
     pageCount,
     gotoPage,
     nextPage,
@@ -21,7 +21,7 @@ function Pagination({ controls }) {
     pageSize,
   } = controls;
 
-  const dataPerPage = [10, 20, 30, 40, 50];
+  const dataPerPage = [10, 25, 50, 100];
 
   const handleStartOfPageClick = () => {
     gotoPage(0);
@@ -64,7 +64,7 @@ function Pagination({ controls }) {
           <span className={styles.pagination__btn__page}>
             Page
             <strong>
-              {pageIndex + 1} of {pageOptions.length}
+              {pageIndex + 1} of {pageCount}
             </strong>
           </span>
           <button

src/components/Table/Table.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { useTable, useSortBy, usePagination } from 'react-table';
 import styles from './Table.module.scss';
-import Pagination from './Pagination';
+// import Pagination from './Pagination';
+import Pagination from 'components/atoms/NE_Pagination';
 
 export default function Table({ columns, data = [], paginate = true }) {
   const tableInstance = useTable(
@@ -40,6 +41,10 @@ export default function Table({ columns, data = [], paginate = true }) {
     setPageSize,
     pageIndex,
     pageSize,
+    handleStartOfPageClick: () => gotoPage(0),
+    handlePreviousPageClick: () => previousPage(),
+    handleNextPageClick: () => nextPage(),
+    handleEndOfPageClick: () => gotoPage(pageCount - 1),
   };
 
   return (
@@ -119,7 +124,10 @@ export default function Table({ columns, data = [], paginate = true }) {
       </div>
       {pageCount > 1 && paginate && (
         <div style={{ marginBottom: '1rem' }}>
-          <Pagination controls={paginationControls} />
+          <Pagination
+            controls={paginationControls}
+            isStaticPanination={paginate}
+          />
         </div>
       )}
     </>

src/components/UserAccount/TransactionDetails/TransactionDetails.jsx

@@ -6,7 +6,8 @@ import CopyText from 'components/atoms/NE_CopyText/CopyText';
 import { useQuery } from 'react-query';
 import TYPES from 'types';
 import { useEffect, useState } from 'react';
-import DynamicPagination from 'components/Table/DynamicPagination';
+// import DynamicPagination from 'components/Table/DynamicPagination';
+import DynamicPagination from 'components/atoms/NE_Pagination';
 import ErrorMessage from 'components/atoms/ErrorMessage';
 
 export const TransactionDetails = ({ type, data }) => {
@@ -124,6 +125,15 @@ export const TransactionDetails = ({ type, data }) => {
       setPageIndex(0);
       setPageSize(pageSize);
     },
+    handleStartOfPageClick: () => {
+      setPageIndex(0);
+    },
+    handlePreviousPageClick: () => {
+      setPageIndex(pageIndex - 1);
+    },
+    handleNextPageClick: () => {
+      setPageIndex(pageIndex + 1);
+    },
   };
 
   if (accountTransactionsRQ.isLoading) {
@@ -138,7 +148,10 @@ export const TransactionDetails = ({ type, data }) => {
         paginate={false}
       />
       <div style={{ marginBottom: '1rem' }}>
-        <DynamicPagination controls={dynamicPageControls} />
+        <DynamicPagination
+          controls={dynamicPageControls}
+          isStaticPanination={false}
+        />
       </div>
       {accountTransactionsRQ.data?.error && (
         <ErrorMessage error={accountTransactionsRQ.data.error} />