feat: validators sorting table

src/v2/components/UI/Table/index.jsx

@@ -0,0 +1,108 @@
+import React, {useState} from 'react';
+import {map, get} from 'lodash/fp';
+import {
+  TableBody,
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableSortLabel,
+} from '@material-ui/core';
+
+import HelpLink from '../../HelpLink';
+import useStyles from './styles';
+
+function desc(a, b, orderBy) {
+  const getA = get(orderBy)(a);
+  const getB = get(orderBy)(b);
+  if (getB < getA) {
+    return -1;
+  }
+  if (getB > getA) {
+    return 1;
+  }
+  return 0;
+}
+
+function stableSort(array, cmp) {
+  const stabilizedThis = map((el, index) => [el, index])(array);
+  stabilizedThis.sort((a, b) => {
+    const order = cmp(a[0], b[0]);
+    if (order !== 0) return order;
+    return a[1] - b[1];
+  });
+  return map(el => el[0])(stabilizedThis);
+}
+
+function getSorting(order, orderBy) {
+  return order === 'desc'
+    ? (a, b) => desc(a, b, orderBy)
+    : (a, b) => -desc(a, b, orderBy);
+}
+
+const EnhancedTableHead = props => {
+  const classes = useStyles();
+  const {fields, order, orderBy, onRequestSort, text, term} = props;
+
+  const createSortHandler = property => event => {
+    onRequestSort(event, property);
+  };
+
+  return (
+    <TableHead className={classes.head}>
+      <TableRow>
+        {map(
+          headCell => (
+            <TableCell
+              key={headCell.id}
+              align={headCell.align || 'left'}
+              padding={headCell.disablePadding ? 'none' : 'default'}
+              sortDirection={orderBy === headCell.id ? order : false}
+            >
+              <TableSortLabel
+                active={orderBy === headCell.id}
+                direction={order}
+                onClick={createSortHandler(headCell.id)}
+              >
+                {headCell.label}
+                <HelpLink text={text} term={term} />
+              </TableSortLabel>
+            </TableCell>
+          ),
+          fields,
+        )}
+      </TableRow>
+    </TableHead>
+  );
+};
+
+const EnhancedTable = props => {
+  const classes = useStyles();
+  const {data = [], fields, renderRow, initialSort = 'name'} = props;
+  const [order, setOrder] = useState('asc');
+  const [orderBy, setOrderBy] = React.useState(initialSort);
+  const handleRequestSort = (event, property) => {
+    const isDesc = orderBy === property && order === 'desc';
+    setOrder(isDesc ? 'asc' : 'desc');
+    setOrderBy(property);
+  };
+
+  return (
+    <Table className={classes.root}>
+      <EnhancedTableHead
+        classes={classes}
+        order={order}
+        orderBy={orderBy}
+        onRequestSort={handleRequestSort}
+        fields={fields}
+      />
+      <TableBody>
+        {map(renderRow)(stableSort(data, getSorting(order, orderBy)))}
+      </TableBody>
+    </Table>
+  );
+};
+
+EnhancedTable.propTypes = {};
+
+export default EnhancedTable;

src/v2/components/UI/Table/styles.js

@@ -0,0 +1,21 @@
+import {makeStyles} from '@material-ui/core';
+
+export default makeStyles(() => ({
+  head: {
+    border: '1px solid #979797',
+    '& th': {
+      textTransform: 'uppercase',
+      fontSize: 15,
+      letterSpacing: 2,
+      fontWeight: 'bold',
+      borderBottom: 'none',
+    },
+  },
+  root: {
+    '& td': {
+      maxWidth: 1,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    },
+  },
+}));

src/v2/components/Validators/Table/index.jsx

@@ -1,31 +1,49 @@
 // @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 {map, concat} from 'lodash/fp';
 import NodesStore from 'v2/stores/nodes';
 import getUptime from 'v2/utils/getUptime';
 import Avatar from 'v2/components/UI/Avatar';
+import Table from 'v2/components/UI/Table';
+import {LAMPORT_SOL_RATIO} from 'v2/constants';
+import Socket from 'v2/stores/socket';
+import Loader from 'v2/components/UI/Loader';
 
-import {LAMPORT_SOL_RATIO} from '../../../constants';
-import Socket from '../../../stores/socket';
-import Loader from '../../UI/Loader';
-import HelpLink from '../../HelpLink';
 import useStyles from './styles';
 
+const fields = [
+  {
+    id: 'identity.name',
+    label: 'Name/Moniker',
+    text: '',
+    term: '',
+  },
+  {
+    id: 'activatedStake',
+    label: 'Staked SOL',
+    text: '',
+    term: '',
+  },
+  {
+    id: 'commission',
+    label: 'Commission',
+    text: '',
+    term: '',
+  },
+  {
+    id: 'uptime.uptime.[0].percentage',
+    label: 'Uptime',
+    text: 'term',
+  },
+];
+
 const ValidatorsTable = ({separate}: {separate: boolean}) => {
   const classes = useStyles();
   const theme = useTheme();
@@ -95,6 +113,9 @@ const ValidatorsTable = ({separate}: {separate: boolean}) => {
       </div>
     );
   };
+
+  const allValidators = concat(activeValidators)(inactiveValidators);
+
   return (
     <div className={cn(classes.root, separate && classes.separateRoot)}>
       {!separate && (
@@ -103,39 +124,18 @@ const ValidatorsTable = ({separate}: {separate: boolean}) => {
           <Typography variant="h5">
             {activeValidators.length + inactiveValidators.length}
           </Typography>
-
           <Link to="/validators/all" className={classes.link}>
             See all &gt;
           </Link>
         </div>
       )}
       {showTable ? (
-        <Table>
-          <TableHead className={classes.head}>
-            <TableRow>
-              <TableCell align="center">
-                Name/Moniker <HelpLink text="" term="" />
-              </TableCell>
-              <TableCell width={170}>
-                Staked SOL <HelpLink text="" term="" />
-              </TableCell>
-              <TableCell width={190}>
-                Commission <HelpLink text="" term="" />
-              </TableCell>
-              <TableCell width={130}>
-                Uptime <HelpLink text="" term="" />
-              </TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody
-            classes={{
-              root: classes.body,
-            }}
-          >
-            {map(renderRow)(activeValidators)}
-            {map(renderRow)(inactiveValidators)}
-          </TableBody>
-        </Table>
+        <Table
+          fields={fields}
+          data={allValidators}
+          initialSort="identity.name"
+          renderRow={renderRow}
+        />
       ) : (
         <div className={cn(classes.list, separate && classes.vertical)}>
           {map(renderCard)(activeValidators)}

src/v2/components/Validators/Table/styles.js

@@ -19,16 +19,6 @@ export default makeStyles(theme => ({
     padding: 0,
     background: 'transparent',
   },
-  head: {
-    border: '1px solid #979797',
-    '& th': {
-      textTransform: 'uppercase',
-      fontSize: 15,
-      letterSpacing: 2,
-      fontWeight: 'bold',
-      borderBottom: 'none',
-    },
-  },
   body: {
     '& td': {
       fontSize: 15,