feat: tables refactoring

solana-labs · Oct 15, 2019 · f5eb1a2 · f5eb1a2
1 parent c343242
commit f5eb1a2
Show file tree

Hide file tree

Showing 11 changed files with 102 additions and 258 deletions.
diff --git a/src/v2/components/Applications/Table/index.jsx b/src/v2/components/Applications/Table/index.jsx
@@ -1,37 +1,35 @@
 // @flow
 
 import React from 'react';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-} from '@material-ui/core';
+import {TableCell, TableRow} from '@material-ui/core';
 import cn from 'classnames';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import {useTheme} from '@material-ui/core/styles';
 import {observer} from 'mobx-react-lite';
 import {Link} from 'react-router-dom';
 import {map} from 'lodash/fp';
-import HelpLink from 'v2/components/HelpLink';
 import TypeLabel from 'v2/components/UI/TypeLabel';
+import Table from 'v2/components/UI/Table';
 import type {TableHeadProps} from 'v2/@types/table';
 import formatDistanceToNow from 'date-fns/formatDistanceToNow';
+
 import useStyles from './styles';
 
-const tHeads: TableHeadProps[] = [
+const fields: TableHeadProps[] = [
   {
+    label: 'Application Id',
     name: 'Application Id',
     text: '',
     term: '',
   },
   {
+    label: 'Type',
     name: 'type',
     text: '',
     term: '',
   },
   {
+    label: 'Time',
     name: 'time',
     text: '',
     term: '',
@@ -56,16 +54,15 @@ const ApplicationsTable = ({
   const renderRow = application => {
     return (
       <TableRow hover key={application.programId}>
-        <TableCell align="center">
-          <Link
-            to={`/applications/${application.programId}`}
-            className={classes.name}
-          >
+        <TableCell>
+          <Link to={`/applications/${application.programId}`}>
             {application.programId}
           </Link>
         </TableCell>
         <TableCell>
-          TODO <TypeLabel type="other" label="other" />
+          <div>
+            <TypeLabel type="other" label="TODO" />
+          </div>
         </TableCell>
         <TableCell title={application.timestamp}>
           {asTime(application.timestamp)}
@@ -99,28 +96,10 @@ const ApplicationsTable = ({
     );
   };
 
-  const renderTH = ({name, width, ...rest}: TableHeadProps) => (
-    <TableCell key={name} width={width}>
-      {name}
-      <HelpLink {...rest} />
-    </TableCell>
-  );
-
   return (
     <div className={classes.root}>
       {showTable ? (
-        <Table>
-          <TableHead className={classes.head}>
-            <TableRow>{map(renderTH)(tHeads)}</TableRow>
-          </TableHead>
-          <TableBody
-            classes={{
-              root: classes.body,
-            }}
-          >
-            {map(renderRow)(applications)}
-          </TableBody>
-        </Table>
+        <Table fields={fields} renderRow={renderRow} data={applications} />
       ) : (
         <div className={cn(classes.list, separate && classes.vertical)}>
           {map(renderCard)(applications)}

diff --git a/src/v2/components/Blocks/Table/index.jsx b/src/v2/components/Blocks/Table/index.jsx
@@ -1,59 +1,56 @@
 // @flow
 
 import React from 'react';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-} from '@material-ui/core';
+import {TableCell, TableRow} from '@material-ui/core';
 import cn from 'classnames';
+import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import {useTheme} from '@material-ui/core/styles';
 import {observer} from 'mobx-react-lite';
 import {Link} from 'react-router-dom';
 import {map} from 'lodash/fp';
-
+import Table from 'v2/components/UI/Table';
 import type {TableHeadProps} from 'v2/@types/table';
-import formatDistanceToNow from 'date-fns/formatDistanceToNow';
-import HelpLink from 'v2/components/HelpLink';
 import ValidatorName from 'v2/components/UI/ValidatorName';
+
 import useStyles from './styles';
 
-const tHeads: TableHeadProps[] = [
+const fields: TableHeadProps[] = [
   {
+    label: 'Blocks',
     name: 'blocks',
     text: '',
     term: '',
   },
   {
+    label: 'slot',
     name: 'slot',
     text: '',
     term: '',
   },
   {
+    label: 'time',
     name: 'time',
     text: '',
     term: '',
   },
   {
+    label: 'transactions',
     name: 'transactions',
     text: '',
     term: '',
-    width: 190,
   },
   {
+    label: 'confidence',
     name: 'confidence',
     text: '',
     term: '',
-    width: 165,
   },
   {
+    label: 'leader',
     name: 'leader',
     text: '',
     term: '',
-    width: 240,
   },
 ];
 
@@ -76,14 +73,12 @@ const BlocksTable = ({
     return (
       <TableRow hover key={block.id}>
         <TableCell align="center">
-          <Link to={`/blocks/${block.id}`} className={classes.name}>
-            <div>{block.id}</div>
-          </Link>
+          <Link to={`/blocks/${block.id}`}>{block.id}</Link>
         </TableCell>
-        <TableCell>{block.slot}</TableCell>
-        <TableCell title={block.timestamp}>{asTime(block.timestamp)}</TableCell>
-        <TableCell>TODO</TableCell>
-        <TableCell>TODO</TableCell>
+        <TableCell width={100}>{block.slot}</TableCell>
+        <TableCell width={140}>{asTime(block.timestamp)}</TableCell>
+        <TableCell width={200}>TODO</TableCell>
+        <TableCell width={140}>TODO</TableCell>
         <TableCell>
           <ValidatorName pubkey={block.leader} name={block.leader} avatar="" />
         </TableCell>
@@ -128,28 +123,10 @@ const BlocksTable = ({
     );
   };
 
-  const renderTH = ({name, width, ...rest}: TableHeadProps) => (
-    <TableCell key={name} width={width}>
-      {name}
-      <HelpLink {...rest} />
-    </TableCell>
-  );
-
   return (
     <div className={classes.root}>
       {showTable ? (
-        <Table>
-          <TableHead className={classes.head}>
-            <TableRow>{map(renderTH)(tHeads)}</TableRow>
-          </TableHead>
-          <TableBody
-            classes={{
-              root: classes.body,
-            }}
-          >
-            {map(renderRow)(blocks)}
-          </TableBody>
-        </Table>
+        <Table fields={fields} data={blocks} renderRow={renderRow} />
       ) : (
         <div className={cn(classes.list, separate && classes.vertical)}>
           {map(renderCard)(blocks)}

diff --git a/src/v2/components/Blocks/Table/styles.js b/src/v2/components/Blocks/Table/styles.js
@@ -10,35 +10,6 @@ export default makeStyles(theme => ({
       marginBottom: 50,
     },
   },
-  head: {
-    border: '1px solid #979797',
-    '& th': {
-      textTransform: 'uppercase',
-      fontSize: 15,
-      letterSpacing: 2,
-      fontWeight: 'bold',
-      borderBottom: 'none',
-      paddingRight: 16,
-      '&:first-child': {
-        paddingLeft: 40,
-      },
-    },
-  },
-  body: {
-    '& td': {
-      fontSize: 15,
-      paddingTop: 18,
-      paddingBottom: 18,
-      maxWidth: 0,
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      overflow: 'hidden',
-      paddingRight: 16,
-      '&:first-child': {
-        paddingLeft: 40,
-      },
-    },
-  },
   list: {
     width: '100%',
   },
@@ -83,15 +54,4 @@ export default makeStyles(theme => ({
     letterSpacing: 2,
     fontWeight: 'bold',
   },
-  leader: {
-    display: 'flex',
-    alignItems: 'center',
-    color: getColor('main')(theme),
-    '& div': {
-      marginLeft: 5,
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      overflow: 'hidden',
-    },
-  },
 }));
diff --git a/src/v2/components/TourDeSol/Table/index.jsx b/src/v2/components/TourDeSol/Table/index.jsx
@@ -1,26 +1,45 @@
 // @flow
 
 import React from 'react';
-import {
-  Typography,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  Grid,
-} from '@material-ui/core';
+import {Typography, TableCell, TableRow, Grid} from '@material-ui/core';
 import cn from 'classnames';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import {useTheme} from '@material-ui/core/styles';
 import {observer} from 'mobx-react-lite';
 import {Link} from 'react-router-dom';
 import {map} from 'lodash/fp';
+import Table from 'v2/components/UI/Table';
+import HelpLink from 'v2/components/HelpLink';
 import ValidatorName from 'v2/components/UI/ValidatorName';
-
-import HelpLink from '../../HelpLink';
 import useStyles from './styles';
 
+const fields = [
+  {
+    label: 'ranking',
+    name: 'ranking',
+    text: '',
+    term: '',
+  },
+  {
+    label: 'name',
+    name: 'name',
+    text: '',
+    term: '',
+  },
+  {
+    label: 'Staked sol',
+    name: 'staked_sol',
+    text: '',
+    term: '',
+  },
+  {
+    label: 'Uptime',
+    name: 'uptime',
+    text: '',
+    term: '',
+  },
+];
+
 const ValidatorsTable = ({
   activeValidators,
   separate,
@@ -36,12 +55,12 @@ const ValidatorsTable = ({
     const {name, pubkey, avatarUrl, activatedStake, uptimePercent, rank} = row;
     return (
       <TableRow hover key={pubkey}>
-        <TableCell>{rank}</TableCell>
+        <TableCell width={150}>{rank}</TableCell>
         <TableCell>
           <ValidatorName pubkey={pubkey} name={name} avatar={avatarUrl} />
         </TableCell>
-        <TableCell>{activatedStake.toFixed(8)}</TableCell>
-        <TableCell>{uptimePercent}%</TableCell>
+        <TableCell width={200}>{activatedStake.toFixed(8)}</TableCell>
+        <TableCell width={150}>{uptimePercent}%</TableCell>
       </TableRow>
     );
   };
@@ -84,23 +103,7 @@ const ValidatorsTable = ({
         )}
       </div>
       {showTable ? (
-        <Table>
-          <TableHead className={classes.head}>
-            <TableRow>
-              <TableCell width={100}>Ranking</TableCell>
-              <TableCell>Name</TableCell>
-              <TableCell width={150}>Staked SOL</TableCell>
-              <TableCell width={110}>Uptime</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody
-            classes={{
-              root: classes.body,
-            }}
-          >
-            {map(renderRow)(activeValidators)}
-          </TableBody>
-        </Table>
+        <Table fields={fields} renderRow={renderRow} data={activeValidators} />
       ) : (
         <div className={cn(classes.list, separate && classes.vertical)}>
           {map(renderCard)(activeValidators)}