Components and styles refactor.

Change text on search bar.

Author: afposchenrieder

examples/explorer/README.md

@@ -7,11 +7,11 @@ A simple Cardano Explorer using Reactjs, React-bootstrap and Relay to use with J
 - Transaction search by Hash.
 - Block search by hash.
 - Block search by chain length.
+- Epoch search by Epoch number.
 - Block table showing all blocks ordered from more recents to older.
 
 # What does this explorer not have (and should have)?
 
-- Search by Epoch number.
 - Logging tool.
 - Automated tests.
 - Complete responsiveness.

examples/explorer/src/App.scss

@@ -14,7 +14,7 @@ const AddressInfo = ({ address }) => {
   }
 
   return (
-    <div className="addressInfo">
+    <div className="entityInfoTable">
       <h2>Address</h2>
       <div className="keyValueTable">
         <Table striped bordered hover responsive>

examples/explorer/src/components/Addresses/AddressInfo/AddressInfo.jsx

@@ -1,8 +1 @@
 @import '../../../generalStyling.scss';
-
-.addressInfo {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-}

examples/explorer/src/components/Addresses/AddressInfo/addressInfo.scss

@@ -11,7 +11,7 @@ import './fullAddressInfo.scss';
 const FullAddressInfo = ({ address }) => {
   const { transactions } = address;
   return (
-    <div className="fullAddressInfo">
+    <div className="entityInfoContainer">
       <AddressInfo {...{ address }} />
       <TransactionTable {...{ transactions, showBlocks: true }} />
     </div>

examples/explorer/src/components/Addresses/FullAddressInfo/FullAddressInfo.jsx

@@ -1,12 +1 @@
 @import '../../../generalStyling.scss';
-
-.fullAddressInfo {
-  display: flex;
-  overflow: hidden;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  box-shadow: 0px 0px 6px 1px grey;
-  padding: 1%;
-  width: 80%;
-}

examples/explorer/src/components/Addresses/FullAddressInfo/fullAddressInfo.scss

@@ -9,7 +9,7 @@ import BlockLink from '../../Commons/BlockLink/BlockLink';
 import EpochLink from '../../Commons/EpochLink/EpochLink';
 
 const BlockInfo = ({ block }) => (
-  <div className="blockInfo">
+  <div className="entityInfoTable">
     <h2>Block</h2>
     <div className="keyValueTable">
       <Table striped bordered hover responsive>

examples/explorer/src/components/Blocks/BlockInfo/BlockInfo.jsx

@@ -1,8 +1 @@
 @import '../../../generalStyling.scss';
-
-.blockInfo {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-}

examples/explorer/src/components/Blocks/BlockInfo/blockInfo.scss

@@ -1,31 +1,21 @@
 import React, { useState } from 'react';
 import Pagination from 'react-bootstrap/Pagination';
 
+import graphql from 'babel-plugin-relay/macro';
+import { createFragmentContainer } from 'react-relay';
+
 import BlockTable from '../BlockTable/BlockTable';
 import { TABLE_PAGE_SIZE } from '../../../helpers/constants';
 import { blocksFromBlockConnection } from '../../../helpers/blockHelper';
 
-const BlockPagedTable = ({ data, relay }) => {
-  const [start, setStart] = useState(1);
-  const blocks = blocksFromBlockConnection(data.blocks);
-  const { pageInfo } = data.blocks;
-
-  const handlePageChange = (vars, callback) => {
-    relay.refetch(
-      {
-        first: vars.first || null,
-        last: vars.last || null,
-        after: vars.after || null,
-        before: vars.before || null
-      },
-      error => {
-        if (error) {
-          console.error(error); // eslint-disable-line no-console
-        }
-        callback();
-      }
-    );
-  };
+/**
+ * This component receives a BlockConnection and a function to refetch data
+ * and renders a paged table.
+ */
+const BlockPagedTable = ({ blockConnection, handlePageChange }) => {
+  const [start, setStart] = useState();
+  const { pageInfo } = blockConnection;
+  const blocks = blocksFromBlockConnection(blockConnection);
 
   const openPreviousPage = () => {
     handlePageChange({ before: pageInfo.startCursor, last: TABLE_PAGE_SIZE }, () =>
@@ -65,4 +55,22 @@ const BlockPagedTable = ({ data, relay }) => {
   );
 };
 
-export default BlockPagedTable;
+export default createFragmentContainer(BlockPagedTable, {
+  blockConnection: graphql`
+    fragment BlockPagedTable_blockConnection on BlockConnection {
+      edges {
+        cursor
+        node {
+          ...BlockTable_blocks
+        }
+      }
+      pageInfo {
+        hasNextPage
+        hasPreviousPage
+        endCursor
+        startCursor
+      }
+      totalCount
+    }
+  `
+});

examples/explorer/src/components/Blocks/BlockPagedTable/BlockPagedTable.jsx

@@ -1,23 +1,15 @@
-import React, { useState } from 'react';
-import Pagination from 'react-bootstrap/Pagination';
+import React from 'react';
 
 import graphql from 'babel-plugin-relay/macro';
 import { createRefetchContainer } from 'react-relay';
 
-import BlockTable from '../BlockTable/BlockTable';
-import { TABLE_PAGE_SIZE } from '../../../helpers/constants';
-import { blocksFromBlockConnection } from '../../../helpers/blockHelper';
+import BlockPagedTable from '../BlockPagedTable/BlockPagedTable';
 
-// TODO: Think on some way of extract shared code between EpochBlockTable and BlockPagedTable
 const EpochBlockTable = ({ epoch, relay }) => {
-  const [start, setStart] = useState(1);
   if (!epoch.blocks) {
     return null;
   }
-
-  const blocks = blocksFromBlockConnection(epoch.blocks);
-  const { pageInfo } = epoch.blocks;
-
+  const blockConnection = epoch.blocks;
   const handlePageChange = (vars, callback) => {
     relay.refetch(
       {
@@ -36,40 +28,10 @@ const EpochBlockTable = ({ epoch, relay }) => {
     );
   };
 
-  const openPreviousPage = () => {
-    handlePageChange({ before: pageInfo.startCursor, last: TABLE_PAGE_SIZE }, () =>
-      setStart(start - TABLE_PAGE_SIZE)
-    );
-  };
-
-  const openNextPage = () => {
-    handlePageChange({ after: pageInfo.endCursor, first: TABLE_PAGE_SIZE }, () =>
-      setStart(start + TABLE_PAGE_SIZE)
-    );
-  };
-
-  const openLastPage = () => {
-    handlePageChange({ last: TABLE_PAGE_SIZE }, () => setStart(start - TABLE_PAGE_SIZE));
-  };
-
-  const openFirstPage = () => {
-    handlePageChange({ first: TABLE_PAGE_SIZE }, () => setStart(0));
-  };
-
   return (
     <>
-      <BlockTable {...{ blocks }} />
-      <Pagination>
-        <Pagination.Item onClick={openLastPage} disabled={!pageInfo.hasNextPage}>
-          Last
-        </Pagination.Item>
-        <Pagination.Prev onClick={openNextPage} disabled={!pageInfo.hasNextPage} />
-        <Pagination.Ellipsis disabled />
-        <Pagination.Next onClick={openPreviousPage} disabled={!pageInfo.hasPreviousPage} />
-        <Pagination.Item onClick={openFirstPage} disabled={!pageInfo.hasPreviousPage}>
-          First
-        </Pagination.Item>
-      </Pagination>
+      <h2>Blocks</h2>
+      <BlockPagedTable {...{ handlePageChange, blockConnection }} />
     </>
   );
 };
@@ -87,19 +49,7 @@ export default createRefetchContainer(
         ) {
         id
         blocks(first: $first, last: $last, after: $after, before: $before) {
-          edges {
-            cursor
-            node {
-              ...BlockTable_blocks
-            }
-          }
-          pageInfo {
-            hasNextPage
-            hasPreviousPage
-            endCursor
-            startCursor
-          }
-          totalCount
+          ...BlockPagedTable_blockConnection
         }
       }
     `