Handle undefined attributes in records resolver (#61 )

Part of [Create a public laconicd testnet](https://www.notion.so/Create-a-public-laconicd-testnet-896a11bdd8094eff8f1b49c0be0ca3b8) Handles the error in `LOOKUP` tab in the console: ```bash Error: Cannot destructure property 'limit' of 'attributes' as it is undefined. ``` Co-authored-by: IshaVenikar <ishavenikar7@gmail.com> Reviewed-on: #61 Co-authored-by: Prathamesh Musale <prathamesh.musale0@gmail.com> Co-committed-by: Prathamesh Musale <prathamesh.musale0@gmail.com>
Implement pagination for registry records table (#60 )
2024-10-23 08:00:12 +00:00 · 2024-09-06 05:23:17 +00:00
4 changed files with 108 additions and 69 deletions
--- 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",
--- 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 TablePagination from '@material-ui/core/TablePagination';
+import { Paper, TableContainer, } from '@material-ui/core';

 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,70 +86,100 @@ 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>
-        <TableRow>
-          <TableCell onClick={sortBy('attributes.type')} size='medium'>Type</TableCell>
-          <TableCell onClick={sortBy('names[0]')}>Registered Names</TableCell>
-          <TableCell onClick={sortBy('attributes.version')} size='small'>Version</TableCell>
-          <TableCell onClick={sortBy('attributes.name')}>Display Name</TableCell>
-          <TableCell onClick={sortBy('createTime')} size='small'>Created</TableCell>
-          <TableCell onClick={sortBy('attributes.package')}>Package</TableCell>
-          <TableCell size='icon' />
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {records.sort(sorter)
-          .map((record) => {
-            const { id, names, createTime, attributes: { type, name: displayName, fileName, version, description, service, package: pkg } } = record;
+    <Paper style={{
+      width: '100%',
+    }}>
+      <TableContainer>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell onClick={sortBy('attributes.type')} size='medium'>Type</TableCell>
+              <TableCell onClick={sortBy('names[0]')}>Registered Names</TableCell>
+              <TableCell onClick={sortBy('attributes.version')} size='small'>Version</TableCell>
+              <TableCell onClick={sortBy('attributes.name')}>Display Name</TableCell>
+              <TableCell onClick={sortBy('createTime')} size='small'>Created</TableCell>
+              <TableCell onClick={sortBy('attributes.package')}>Package</TableCell>
+              <TableCell size='icon' />
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {records.sort(sorter).map((record) => {
+              const { id, names, createTime, attributes: { type, name: displayName, fileName, version, description, service, package: pkg } } = record;

-            let pkgLink;
-            let appLinks;
+              let pkgLink;
+              let appLinks;

-            if (pkg) {
-              pkgLink = (<PackageLink config={config} type={type} pkg={pkg} />);
-            }
+              if (pkg) {
+                pkgLink = (<PackageLink config={config} type={type} pkg={pkg} />);
+              }

-            if (type === 'lrn:app') {
-              appLinks = (
-                <>
-                  {(names || []).map(lrn =>
-                    <div key={lrn}>
-                      <AppLink config={config} lrn={lrn} />
-                    </div>
-                  )}
-                </>
+              if (type === 'lrn:app') {
+                appLinks = (
+                  <>
+                    {(names || []).map(lrn =>
+                      <div key={lrn}>
+                        <AppLink config={config} lrn={lrn} />
+                      </div>
+                    )}
+                  </>
+                );
+              }
+
+              return (
+                <TableRow key={id} size='small'>
+                  <TableCell monospace>{type}</TableCell>
+                  <TableCell monospace>
+                    {appLinks || (names || []).map(name => <div key={name}>{name}</div>)}
+                  </TableCell>
+                  <TableCell monospace>{version}</TableCell>
+                  <TableCell>{displayName || service || fileName || description}</TableCell>
+                  <TableCell>{moment.utc(createTime).fromNow()}</TableCell>
+                  <TableCell monospace>{pkgLink}</TableCell>
+                  <TableCell>
+                    <QueryLink config={config} id={id} icon />
+                  </TableCell>
+                </TableRow>
              );
-            }
-
-            return (
-              <TableRow key={id} size='small'>
-                <TableCell monospace>{type}</TableCell>
-                <TableCell monospace>
-                  {appLinks || (names || []).map(name => <div key={name}>{name}</div>)}
-                </TableCell>
-                <TableCell monospace>
-                  {version}
-                </TableCell>
-                <TableCell>
-                  {displayName || service || fileName || description}
-                </TableCell>
-                <TableCell>
-                  {moment.utc(createTime).fromNow()}
-                </TableCell>
-                <TableCell monospace>
-                  {pkgLink}
-                </TableCell>
-                <TableCell>
-                  <QueryLink config={config} id={id} icon />
-                </TableCell>
-              </TableRow>
-            );
-          }
-          )}
-      </TableBody>
-    </Table>
+            })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <TablePagination
+        component="td"
+        rowsPerPageOptions={[5, 10, 25]}
+        count={-1}
+        rowsPerPage={rowsPerPage}
+        page={page}
+        onPageChange={handleChangePage}
+        onRowsPerPageChange={handleChangeRowsPerPage}
+        labelDisplayedRows={labelDisplayedRows}
+        nextIconButtonProps={{
+          disabled: records.length < rowsPerPage,
+        }}
+      />
+    </Paper>
  );
 };

--- 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',
--- 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"