From 139fb37bef265845771a864db6b0506117b39889 Mon Sep 17 00:00:00 2001 From: Prathamesh Musale Date: Fri, 6 Sep 2024 05:23:17 +0000 Subject: [PATCH] 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 cerc-io/laconic-console#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 Reviewed-on: https://git.vdb.to/cerc-io/laconic-console/pulls/60 Co-authored-by: Prathamesh Musale Co-committed-by: Prathamesh Musale --- package.json | 4 +- .../panels/registry/RegistryRecords.js | 51 +++++++++++++++++-- src/resolvers.js | 4 +- yarn.lock | 8 +-- 4 files changed, 57 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 4140df6..d5a2a17 100644 --- a/package.json +++ b/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", diff --git a/src/containers/panels/registry/RegistryRecords.js b/src/containers/panels/registry/RegistryRecords.js index 50da800..46cdc42 100644 --- a/src/containers/panels/registry/RegistryRecords.js +++ b/src/containers/panels/registry/RegistryRecords.js @@ -3,7 +3,7 @@ // 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'; @@ -11,6 +11,8 @@ 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 ( @@ -142,6 +170,23 @@ const RegistryRecords = ({ type }) => { } )} + + + + +
); }; diff --git a/src/resolvers.js b/src/resolvers.js index 67a048a..a5643d4 100644 --- a/src/resolvers.js +++ b/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', diff --git a/yarn.lock b/yarn.lock index b5ab02a..86d07b5 100644 --- a/yarn.lock +++ b/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"