Implement pagination for registry records table (#60)

Part of [Create a public laconicd testnet](https://www.notion.so/Create-a-public-laconicd-testnet-896a11bdd8094eff8f1b49c0be0ca3b8)
Handles #59
Requires https://git.vdb.to/cerc-io/registry-sdk/pulls/27

![image](/attachments/095cf131-19ef-4acc-9ffe-bcbe2f9dad77)
![image](/attachments/684722d3-b9df-44ae-8622-5bacd2dc2a3f)

Co-authored-by: IshaVenikar <ishavenikar7@gmail.com>
Reviewed-on: https://git.vdb.to/cerc-io/laconic-console/pulls/60
Co-authored-by: Prathamesh Musale <prathamesh.musale0@gmail.com>
Co-committed-by: Prathamesh Musale <prathamesh.musale0@gmail.com>

Author: 2 people

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerc-io/console-app",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Laconic Console",
   "repository": "https://github.com/cerc-io/laconic-console",
   "main": "dist/es/index.js",
@@ -31,7 +31,7 @@
     "@apollo/react-components": "^4.0.0",
     "@apollo/react-hooks": "^4.0.0",
     "@babel/runtime": "^7.21.0",
-    "@cerc-io/registry-sdk": "^0.2.2",
+    "@cerc-io/registry-sdk": "^0.2.8",
     "@lirewine/debug": "1.0.0-beta.78",
     "@lirewine/gem-core": "1.0.0-beta.28",
     "@lirewine/react-ux": "1.1.0-beta.1",

src/containers/panels/registry/RegistryRecords.js

@@ -3,14 +3,16 @@
 //
 
 import moment from 'moment';
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import { useQuery } from '@apollo/react-hooks';
 import { makeStyles } from '@material-ui/core';
 import ButtonGroup from '@material-ui/core/ButtonGroup';
 import Button from '@material-ui/core/Button';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import TableBody from '@material-ui/core/TableBody';
+import TableFooter from '@material-ui/core/TableFooter';
+import TablePagination from '@material-ui/core/TablePagination';
 
 import WNS_RECORDS from '../../../gql/wns_records.graphql';
 
@@ -68,9 +70,14 @@ export const RecordType = ({ type = types[0].key, onChange }) => {
 const RegistryRecords = ({ type }) => {
   const { config } = useContext(ConsoleContext);
   const [sorter, sortBy] = useSorter('createTime', false);
-  const { data } = useQueryStatusReducer(useQuery(WNS_RECORDS, {
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+
+  const offset = page * rowsPerPage;
+
+  const { data, refetch } = useQueryStatusReducer(useQuery(WNS_RECORDS, {
     pollInterval: config.api.intervalQuery,
-    variables: { attributes: { type } }
+    variables: { attributes: { type, limit: rowsPerPage, offset: offset } }
   }));
 
   if (!data) {
@@ -79,6 +86,27 @@ const RegistryRecords = ({ type }) => {
 
   const records = JSON.parse(data.wns_records.json);
 
+  const handleChangePage = (event, newPage) => {
+    setPage(newPage);
+    const offset = newPage * rowsPerPage;
+    refetch({ attributes: { type, limit: rowsPerPage, offset } });
+  };
+
+  const handleChangeRowsPerPage = (event) => {
+    const newRowsPerPage = parseInt(event.target.value, 10);
+    setRowsPerPage(newRowsPerPage);
+    setPage(0);
+    refetch({ attributes: { type, limit: newRowsPerPage, offset: 0 } });
+  };
+
+  const labelDisplayedRows = ({ from, to }) => {
+    if (rowsPerPage > records.length) {
+      return `${from}-${from + records.length - 1}`;
+    } else {
+      return `${from}-${to}`;
+    }
+  };
+
   return (
     <Table>
       <TableHead>
@@ -142,6 +170,23 @@ const RegistryRecords = ({ type }) => {
           }
           )}
       </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TablePagination
+            component="td"
+            rowsPerPageOptions={[5, 10, 25]}
+            count={-1}
+            rowsPerPage={rowsPerPage}
+            page={page}
+            onPageChange={handleChangePage}
+            onRowsPerPageChange={handleChangeRowsPerPage}
+            labelDisplayedRows={labelDisplayedRows}
+            nextIconButtonProps={{
+              disabled: records.length < rowsPerPage,
+            }}
+          />
+        </TableRow>
+      </TableFooter>
     </Table>
   );
 };

src/resolvers.js

@@ -45,7 +45,9 @@ export const createResolvers = config => {
 
       wns_records: async (_, { attributes }) => {
         log('WNS records...');
-        const data = await registry.queryRecords(attributes);
+
+        const {limit, offset, ...queryAttributes } = attributes;
+        const data = await registry.queryRecords(queryAttributes, false, false, limit, offset);
 
         return {
           __typename: 'JSONResult',

yarn.lock

@@ -1037,10 +1037,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@cerc-io/registry-sdk@^0.2.2":
-  version "0.2.2"
-  resolved "https://git.vdb.to/api/packages/cerc-io/npm/%40cerc-io%2Fregistry-sdk/-/0.2.2/registry-sdk-0.2.2.tgz#2e8a533f069b4bb9f4cd4798e783f52e29167d0d"
-  integrity sha512-ocRMbWtdewOg02ORfK1U+qbTqB46anHP4ApXokGkY4d+mFSApR3sdUEi2geHcs8oh+SG8YAp7LUJ9AAJneNY8g==
+"@cerc-io/registry-sdk@^0.2.8":
+  version "0.2.8"
+  resolved "https://git.vdb.to/api/packages/cerc-io/npm/%40cerc-io%2Fregistry-sdk/-/0.2.8/registry-sdk-0.2.8.tgz#d71837f735d998987055068457fdf8b2e94ca69c"
+  integrity sha512-utK3Rq5qZrEoRs/eOsOkowcsD740nlnBs6C3KKFRHgKIiR0XedD6t33KukUPLKbGp4mYZOYXRTA7/A04x58lKw==
   dependencies:
     "@cosmjs/amino" "^0.28.1"
     "@cosmjs/crypto" "^0.28.1"