feat: acitve/inactive validators toogle

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

@@ -1,13 +1,20 @@
 // @flow
 
-import React from 'react';
-import {Typography, TableCell, TableRow, Grid} from '@material-ui/core';
+import React, {useState} from 'react';
+import {
+  Typography,
+  TableCell,
+  TableRow,
+  Grid,
+  Select,
+  MenuItem,
+} 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, concat} from 'lodash/fp';
+import {eq, map, concat} from 'lodash/fp';
 import NodesStore from 'v2/stores/nodes';
 import getUptime from 'v2/utils/getUptime';
 import Table from 'v2/components/UI/Table';
@@ -16,6 +23,7 @@ import Socket from 'v2/stores/socket';
 import Loader from 'v2/components/UI/Loader';
 import HelpLink from 'v2/components/HelpLink';
 import ValidatorName from 'v2/components/UI/ValidatorName';
+
 import useStyles from './styles';
 
 const fields = [
@@ -45,12 +53,15 @@ const fields = [
 ];
 
 const ValidatorsTable = ({separate}: {separate: boolean}) => {
+  const [tab, setTab] = useState('active');
   const classes = useStyles();
   const theme = useTheme();
   const showTable = useMediaQuery(theme.breakpoints.up('md'));
   const {activeValidators, inactiveValidators} = NodesStore;
   const {isLoading} = Socket;
-
+  const isActiveTab = eq(tab);
+  const switchTab = tab => () => setTab(tab);
+  const selectTab = e => setTab(e.target.value);
   if (isLoading) {
     return (
       <div className={classes.loader}>
@@ -117,30 +128,62 @@ const ValidatorsTable = ({separate}: {separate: boolean}) => {
   };
 
   const allValidators = concat(activeValidators)(inactiveValidators);
-
   return (
     <div className={cn(classes.root, separate && classes.separateRoot)}>
-      {!separate && (
-        <div className={classes.header}>
-          <Typography>Validators</Typography>
+      <div className={classes.header}>
+        <div className={classes.tabNav}>
+          <button
+            className={cn(classes.tabBtn, {
+              [classes.activeTabBtn]: isActiveTab('active'),
+            })}
+            type="button"
+            onClick={switchTab('active')}
+          >
+            ({activeValidators.length}) Active Validators
+          </button>
+          <button
+            className={cn(classes.tabBtn, {
+              [classes.activeTabBtn]: isActiveTab('inactive'),
+            })}
+            type="button"
+            onClick={switchTab('inactive')}
+          >
+            ({inactiveValidators.length}) Inactive Validators
+          </button>
           <HelpLink text="" term="" />
-          <Typography variant="h5">{allValidators.length}</Typography>
-          <Link to="/validators/all" className={classes.link}>
-            See all &gt;
-          </Link>
         </div>
-      )}
+        {!separate && (
+          <>
+            <Typography variant="h5">{allValidators.length}</Typography>
+            <Link to="/validators/all" className={classes.link}>
+              See all &gt;
+            </Link>
+          </>
+        )}
+      </div>
+      <div className={classes.tabSelect}>
+        <Select
+          className={classes.tabSelectRoot}
+          value={tab}
+          onChange={selectTab}
+        >
+          <MenuItem value="active">Active Validators</MenuItem>
+          <MenuItem value="inactive">Inactive Validators</MenuItem>
+        </Select>
+        <HelpLink text="" term="" />
+      </div>
       {showTable ? (
         <Table
           fields={fields}
-          data={allValidators}
+          data={isActiveTab('active') ? activeValidators : inactiveValidators}
           initialSort="identity.name"
           renderRow={renderRow}
         />
       ) : (
         <div className={cn(classes.list, separate && classes.vertical)}>
-          {map(renderCard)(activeValidators)}
-          {map(renderCard)(inactiveValidators)}
+          {map(renderCard)(
+            isActiveTab('active') ? activeValidators : inactiveValidators,
+          )}
         </div>
       )}
     </div>

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

@@ -34,21 +34,21 @@ export default makeStyles(theme => ({
     display: 'flex',
     alignItems: 'center',
     flexWrap: 'wrap',
-    '& *:nth-child(2)': {
-      marginRight: 35,
-    },
-    marginBottom: 23,
+    marginBottom: -1,
     [theme.breakpoints.down('sm')]: {
-      padding: '10px 27px 0',
+      padding: '10px 18px 0',
       marginBottom: 10,
     },
   },
   link: {
-    marginLeft: 'auto',
+    marginLeft: 100,
     textTransform: 'uppercase',
     color: getColor('main')(theme),
     fontSize: 15,
     textDecoration: 'none',
+    [theme.breakpoints.down('sm')]: {
+      marginLeft: 'auto',
+    },
   },
   list: {
     display: 'flex',
@@ -80,4 +80,52 @@ export default makeStyles(theme => ({
     letterSpacing: 2,
     fontWeight: 'bold',
   },
+  tabNav: {
+    marginRight: 'auto',
+    display: 'flex',
+    alignItems: 'center',
+    [theme.breakpoints.down('sm')]: {
+      display: 'none',
+    },
+  },
+  tabSelect: {
+    display: 'none',
+    marginBottom: 8,
+    [theme.breakpoints.down('sm')]: {
+      display: 'block',
+      padding: '0 18px',
+    },
+  },
+  tabSelectRoot: {
+    '& > div:focus': {
+      backgroundColor: 'transparent',
+    },
+    '&::after': {
+      display: 'none',
+    },
+    '&::before': {
+      display: 'none',
+    },
+  },
+  tabBtn: {
+    fontSize: 18,
+    fontFamily: 'Exo, sans-serif',
+    color: getColor('grey3')(theme),
+    border: `1px solid ${getColor('grey3')(theme)}`,
+    height: 46,
+    backgroundColor: 'transparent',
+    marginRight: -1,
+    padding: '0 14px',
+    outline: 'none',
+    cursor: 'pointer',
+    '&:nth-child(2)': {
+      marginRight: 25,
+    },
+  },
+  activeTabBtn: {
+    backgroundColor: getColor('main')(theme),
+    color: getColor('grey2')(theme),
+    borderColor: getColor('main')(theme),
+    borderBottomColor: getColor('grey3')(theme),
+  },
 }));