fix: refactor table pagination

solana-labs · Oct 25, 2019 · ac49981 · ac49981
1 parent 386d680
commit ac49981
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 70 deletions.
diff --git a/src/v2/components/Accounts/index.jsx b/src/v2/components/Accounts/index.jsx
@@ -7,7 +7,8 @@ import SectionHeader from 'v2/components/UI/SectionHeader';
 import AccountsTimelineStore from 'v2/stores/accounts/timeline';
 import formatNum from 'v2/utils/formatNum';
 import CTypography from 'v2/components/UI/CTypography';
-import {Link, Match} from 'react-router-dom';
+import {Match} from 'react-router-dom';
+import TableNav from 'v2/components/UI/TableNav';
 
 import Table from './Table';
 import useStyles from './styles';
@@ -20,14 +21,6 @@ const AccountsPage = ({match}: {match: Match}) => {
     AccountsTimelineStore.init({start: match.params.start});
   }
 
-  const nav = (
-    <div className={classes.total}>
-      STYLE_ME :
-      {prev && <Link to={`/accounts/timeline/${prev}`}>prev page</Link>}:
-      {next && <Link to={`/accounts/timeline/${next}`}>next page</Link>}:
-    </div>
-  );
-
   return (
     <Container>
       <SectionHeader title="Recently Active Accounts">
@@ -36,9 +29,15 @@ const AccountsPage = ({match}: {match: Match}) => {
           {formatNum(accountCount)}
         </CTypography>
       </SectionHeader>
-      {nav}
+      <TableNav
+        prev={`/accounts/timeline/${prev}`}
+        next={`/accounts/timeline/${next}`}
+      />
       <Table accounts={accounts} />
-      {nav}
+      <TableNav
+        prev={`/accounts/timeline/${prev}`}
+        next={`/accounts/timeline/${next}`}
+      />
     </Container>
   );
 };

diff --git a/src/v2/components/Blocks/Table/styles.js b/src/v2/components/Blocks/Table/styles.js
@@ -2,7 +2,6 @@ import {makeStyles} from '@material-ui/core';
 
 export default makeStyles(theme => ({
   root: {
-    marginTop: 19,
     [theme.breakpoints.down('sm')]: {
       padding: 0,
       paddingBottom: 27,

diff --git a/src/v2/components/Blocks/index.jsx b/src/v2/components/Blocks/index.jsx
@@ -1,16 +1,15 @@
 // @flow
 import {Container} from '@material-ui/core';
-import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';
-import NavigateNextIcon from '@material-ui/icons/NavigateNext';
 import React from 'react';
 import {observer} from 'mobx-react-lite';
 import HelpLink from 'v2/components/HelpLink';
 import SectionHeader from 'v2/components/UI/SectionHeader';
 import BlocksTimelineStore from 'v2/stores/blocks/timeline';
-import {Link, Match} from 'react-router-dom';
+import {Match} from 'react-router-dom';
 import formatNum from 'v2/utils/formatNum';
 import CTypography from 'v2/components/UI/CTypography';
 
+import TableNav from 'v2/components//UI/TableNav';
 import Table from './Table';
 import useStyles from './styles';
 
@@ -22,21 +21,6 @@ const BlocksPage = ({match}: {match: Match}) => {
     BlocksTimelineStore.init({start: match.params.start});
   }
 
-  const nav = (
-    <div className={classes.nav}>
-      {prev && (
-        <Link to={`/blocks/timeline/${prev}`}>
-          <NavigateBeforeIcon />
-        </Link>
-      )}
-      {next && (
-        <Link to={`/blocks/timeline/${next}`}>
-          <NavigateNextIcon />
-        </Link>
-      )}
-    </div>
-  );
-
   return (
     <Container>
       <SectionHeader title="Blocks">
@@ -45,9 +29,15 @@ const BlocksPage = ({match}: {match: Match}) => {
           {formatNum(blockCount)}
         </CTypography>
       </SectionHeader>
-      {nav}
+      <TableNav
+        prev={`/blocks/timeline/${prev}`}
+        next={`/blocks/timeline/${next}`}
+      />
       <Table blocks={blocks} />
-      {nav}
+      <TableNav
+        prev={`/blocks/timeline/${prev}`}
+        next={`/blocks/timeline/${next}`}
+      />
     </Container>
   );
 };

diff --git a/src/v2/components/Blocks/styles.js b/src/v2/components/Blocks/styles.js
@@ -8,14 +8,11 @@ export default makeStyles(theme => ({
   },
   nav: {
     display: 'flex',
+    justifyContent: 'flex-end',
     marginTop: 10,
     '& a': {
       display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      background: getColor('white')(theme),
-      color: getColor('dark')(theme),
-      marginRight: 1,
+      color: getColor('white')(theme),
     },
   },
 }));
diff --git a/src/v2/components/Programs/index.jsx b/src/v2/components/Programs/index.jsx
@@ -7,9 +7,11 @@ import SectionHeader from 'v2/components/UI/SectionHeader';
 import ProgramsTimelineStore from 'v2/stores/programs/timeline';
 import formatNum from 'v2/utils/formatNum';
 import CTypography from 'v2/components/UI/CTypography';
+import TableNav from 'v2/components/UI/TableNav';
+import {Match} from 'react-router-dom';
+
 import Table from './Table';
 import useStyles from './styles';
-import {Link, Match} from 'react-router-dom';
 
 const ProgramsPage = ({match}: {match: Match}) => {
   const classes = useStyles();
@@ -19,14 +21,6 @@ const ProgramsPage = ({match}: {match: Match}) => {
     ProgramsTimelineStore.init({start: match.params.start});
   }
 
-  const nav = (
-    <div className={classes.total}>
-      STYLE_ME :
-      {prev && <Link to={`/programs/timeline/${prev}`}>prev page</Link>}:
-      {next && <Link to={`/programs/timeline/${next}`}>next page</Link>}:
-    </div>
-  );
-
   return (
     <Container>
       <SectionHeader title="Recently Active Programs">
@@ -35,9 +29,15 @@ const ProgramsPage = ({match}: {match: Match}) => {
           {formatNum(programCount)}
         </CTypography>
       </SectionHeader>
-      {nav}
+      <TableNav
+        prev={`/programs/timeline/${prev}`}
+        next={`/programs/timeline/${next}`}
+      />
       <Table programs={programs} />
-      {nav}
+      <TableNav
+        prev={`/programs/timeline/${prev}`}
+        next={`/programs/timeline/${next}`}
+      />
     </Container>
   );
 };

diff --git a/src/v2/components/Transactions/index.jsx b/src/v2/components/Transactions/index.jsx
@@ -1,15 +1,14 @@
 // @flow
 import {Container} from '@material-ui/core';
 import React from 'react';
-import {Link, Match} from 'react-router-dom';
-import NavigateNextIcon from '@material-ui/icons/NavigateNext';
-import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';
+import {Match} from 'react-router-dom';
 import {observer} from 'mobx-react-lite';
 import HelpLink from 'v2/components/HelpLink';
 import SectionHeader from 'v2/components/UI/SectionHeader';
 import TransactionsTimelineStore from 'v2/stores/transactions/timeline';
 import CTypography from 'v2/components/UI/CTypography';
-import formatNum from '../../utils/formatNum';
+import formatNum from 'v2/utils/formatNum';
+import TableNav from 'v2/components/UI/TableNav';
 
 import Table from './Table';
 import useStyles from './styles';
@@ -28,21 +27,6 @@ const TransactionsPage = ({match}: {match: Match}) => {
     TransactionsTimelineStore.init({start: match.params.start});
   }
 
-  const nav = (
-    <div className={classes.nav}>
-      {prev && (
-        <Link to={`/transactions/timeline/${prev}`}>
-          <NavigateBeforeIcon />
-        </Link>
-      )}
-      {next && (
-        <Link to={`/transactions/timeline/${next}`}>
-          <NavigateNextIcon />
-        </Link>
-      )}
-    </div>
-  );
-
   return (
     <Container>
       <SectionHeader title="Recent Transactions">
@@ -51,9 +35,15 @@ const TransactionsPage = ({match}: {match: Match}) => {
           {formatNum(transactionCount)}
         </CTypography>
       </SectionHeader>
-      {nav}
+      <TableNav
+        prev={`/transactions/timeline/${prev}`}
+        next={`/transactions/timeline/${next}`}
+      />
       <Table transactions={transactions} />
-      {nav}
+      <TableNav
+        prev={`/transactions/timeline/${prev}`}
+        next={`/transactions/timeline/${next}`}
+      />
     </Container>
   );
 };

diff --git a/src/v2/components/UI/TableNav/index.jsx b/src/v2/components/UI/TableNav/index.jsx
@@ -0,0 +1,31 @@
+import {IconButton} from '@material-ui/core';
+import ChevronLeft from '@material-ui/icons/ChevronLeft';
+import ChevronRight from '@material-ui/icons/ChevronRight';
+import React from 'react';
+import {Link} from 'react-router-dom';
+
+import useStyles from './styles';
+
+const TableNav = ({prev, next}) => {
+  const classes = useStyles();
+  return (
+    <div className={classes.root}>
+      {prev && (
+        <IconButton>
+          <Link to={prev}>
+            <ChevronLeft />
+          </Link>
+        </IconButton>
+      )}
+      {next && (
+        <IconButton>
+          <Link to={next}>
+            <ChevronRight />
+          </Link>
+        </IconButton>
+      )}
+    </div>
+  );
+};
+
+export default TableNav;
diff --git a/src/v2/components/UI/TableNav/styles.js b/src/v2/components/UI/TableNav/styles.js
@@ -0,0 +1,14 @@
+import {makeStyles} from '@material-ui/core';
+import getColor from 'v2/utils/getColor';
+
+export default makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    marginTop: 10,
+    '& a': {
+      display: 'flex',
+      color: getColor('white')(theme),
+    },
+  },
+}));
diff --git a/src/v2/components/Validators/Table/styles.js b/src/v2/components/Validators/Table/styles.js
@@ -39,7 +39,7 @@ export default makeStyles(theme => ({
     [theme.breakpoints.down('sm')]: {
       padding: '10px 18px 0',
       marginBottom: 10,
-      borderBottom: 'none'
+      borderBottom: 'none',
     },
   },
   link: {