Implement blocks pagination

packages/api/index.js

@@ -79,7 +79,27 @@ app.get('/block/:hash', async (req, res, next) => {
 
 app.get('/blocks', async (req, res, next) => {
     try {
-        const blocks = await call(`block_search?query=block.height>1`, 'GET')
+        const {page, limit, order} = req.query
+
+        let query = 'block_search?query=block.height>=1'
+
+        if (page) {
+            query += '&page=' + page
+        }
+
+        if (limit) {
+            query += '&per_page=' + limit
+        } else {
+            query += '&per_page=' + 30
+        }
+
+        if (order) {
+            query += '&order=' + order
+        } else {
+            query += '&order=desc'
+        }
+
+        const blocks = await call(query, 'GET')
         res.send(blocks);
     } catch (e) {
         next(e)
@@ -88,7 +108,7 @@ app.get('/blocks', async (req, res, next) => {
 
 app.get('/transactions', async (req, res, next) => {
     try {
-        const transactions = await call(`tx_search?query=tx.height>1`, 'GET')
+        const transactions = await call(`tx_search?query=tx.height>=1`, 'GET')
         res.send(transactions);
 
     } catch (e) {

packages/frontend/package.json

@@ -10,6 +10,7 @@
     "node-fetch": "^3.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-paginate": "^8.2.0",
     "react-router-dom": "^6.12.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"

packages/frontend/src/index.css

@@ -24,3 +24,28 @@ code {
   flex-flow: column;
   padding: 50px;
 }
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  list-style: none;
+}
+
+.page-item {
+  border-style: ridge;
+  padding: 5px;
+  cursor: pointer;
+  font-size: 14pt;
+}
+
+.page-link {
+  position: relative;
+}
+
+.disabled {
+  cursor: not-allowed;
+}
+
+.active {
+  background-color: rgba(57, 175, 159, 0.55);
+}

packages/frontend/src/routes/blocks/blocks.route.js

@@ -2,26 +2,59 @@ import React, {useState, useEffect} from 'react';
 import {Form, Link, useLoaderData} from "react-router-dom";
 import * as Api from "../../util/Api";
 import './blocks.css'
+import ReactPaginate from "react-paginate";
 
 function Blocks({blocks}) {
-    return blocks.blocks.map((block) =>
-        <div className={"block_list_item"}>
+    return blocks.map((block) =>
+        <div key={block.block_id.hash} className={"block_list_item"}>
             <Link to={`/block/${block.block_id.hash}`}>Block #{block.block_id.hash} ({block.block.header.height})</Link>
         </div>
     )
 }
 
 export async function loader({params}) {
+    const {blocksCount} = await Api.getStatus();
     const blocks = await Api.getBlocks();
-    return {blocks};
+    return {blocks, blocksCount};
 }
 
 function BlocksRoute() {
-    const {blocks} = useLoaderData()
+    const blocksPerPage = 30;
+
+    const {blocks: defaultBlocks, blocksCount} = useLoaderData()
+    const [blocks, setBlocks] = useState(defaultBlocks.blocks)
+
+    const pageCount = Math.ceil(blocksCount / 30)
+
+    const handlePageClick = async ({selected}) => {
+        const updated = await Api.getBlocks(selected + 1, blocksPerPage);
+        setBlocks(updated.blocks)
+
+    }
+
     return (
         <div className="container">
             <div className={"block_list"}>
                 <Blocks blocks={blocks}/>
+                <ReactPaginate
+                    breakLabel="..."
+                    nextLabel="next >"
+                    onPageChange={handlePageClick}
+                    pageRangeDisplayed={5}
+                    pageCount={pageCount}
+                    previousLabel="< previous"
+                    pageClassName="page-item"
+                    pageLinkClassName="page-link"
+                    previousClassName="page-item"
+                    previousLinkClassName="page-link"
+                    nextClassName="page-item"
+                    nextLinkClassName="page-link"
+                    breakClassName="page-item"
+                    breakLinkClassName="page-link"
+                    containerClassName="pagination"
+                    activeClassName="active"
+                    renderOnZeroPageCount={true}
+                />
             </div>
         </div>
     );

packages/frontend/src/util/Api.js

@@ -37,8 +37,8 @@ const getTransaction = (txHash) => {
     return call(`transaction/${txHash}`, 'GET')
 }
 
-const getBlocks = () => {
-    return call(`blocks`, 'GET')
+const getBlocks = (page = 1, limit = 30) => {
+    return call(`blocks?page=${page}&limit=${limit}`, 'GET')
 }
 
 const getStatus = () => {