feat: review comments fixes and validators page responsive

solana-labs · Jul 10, 2019 · d2d9547 · d2d9547
1 parent 5027cf6
commit d2d9547
Show file tree

Hide file tree

Showing 21 changed files with 293 additions and 98 deletions.
diff --git a/.env.development b/.env.development
diff --git a/.env.production b/.env.production
diff --git a/src/AppV2.js b/src/AppV2.js
@@ -4,7 +4,6 @@ import React, {lazy, Suspense} from 'react';
 import {hot} from 'react-hot-loader/root';
 import {Route, Switch} from 'react-router-dom';
 import Header from 'v2/components/Header';
-import NavBar from 'v2/components/NavBar';
 import Footer from 'v2/components/Footer';
 import theme from 'v2/theme';
 import socket from 'v2/stores/socket';
@@ -25,13 +24,16 @@ const useStyles = makeStyles(theme => ({
     overflow: 'hidden',
   },
   content: {
-    flexGrow: 1,
     marginLeft: 50,
+    minWidth: '1px',
     padding: '50px 24px 0 24px',
-    maxWidth: '100%',
+    maxWidth: 'calc(100% - 50px)',
+    width: '100%',
     [theme.breakpoints.down('sm')]: {
       marginLeft: 0,
       padding: 0,
+      paddingTop: 80,
+      maxWidth: '100%',
     },
   },
   toolbar: {
@@ -50,7 +52,6 @@ const App = () => {
       <div className={classes.root}>
         <CssBaseline />
         <Header />
-        <NavBar />
         <div className={classes.content}>
           <div className={classes.toolbar} />
           <Suspense fallback={<div>Loading...</div>}>

diff --git a/src/index.js b/src/index.js
@@ -12,7 +12,7 @@ async function main() {
   await EndpointConfig.load();
   ReactDOM.render(
     <BrowserRouter>
-      {window.location.pathname.includes('rc') ? (
+      {window.location.pathname.startsWith('/rc') ? (
         <Suspense fallback={<div>Loading...</div>}>
           <AppV2 />
         </Suspense>

diff --git a/src/v2/api/index.js b/src/v2/api/index.js
@@ -2,10 +2,11 @@
 
 import axios from 'axios';
 import humps from 'humps';
-import {BLOCK_EXPLORER_API_BASE} from 'v2/const';
+
+import {getApiUrl} from '../../EndpointConfig';
 
 const api = axios.create({
-  baseURL: BLOCK_EXPLORER_API_BASE,
+  baseURL: getApiUrl(),
 });
 
 api.defaults.transformResponse = [
@@ -24,4 +25,8 @@ api.defaults.transformRequest = [
   ...axios.defaults.transformRequest,
 ];
 
+export function updateBaseUrl() {
+  api.defaults.baseURL = getApiUrl();
+}
+
 export default api;
diff --git a/src/v2/api/stats.js b/src/v2/api/stats.js
@@ -7,3 +7,7 @@ export function getStats() {
 export function getTxnStats() {
   return api('/txn-stats');
 }
+
+export function getClusterInfo() {
+  return api('/cluster-info');
+}
diff --git a/src/v2/components/Footer/styles.js b/src/v2/components/Footer/styles.js
@@ -38,9 +38,11 @@ export default makeStyles(theme => ({
   bg: {
     position: 'absolute',
     left: -160,
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down('sm')]: {
       position: 'static',
       width: '100%',
+      height: 70,
+      objectFit: 'cover',
     },
   },
 }));
diff --git a/src/v2/components/Header/index.jsx b/src/v2/components/Header/index.jsx
@@ -1,20 +1,22 @@
 // @flow
 
-import Select from '@material-ui/core/Select';
-import React from 'react';
+import {Select, AppBar, Toolbar, IconButton} from '@material-ui/core';
+import MenuIcon from '@material-ui/icons/Menu';
+import React, {useState} from 'react';
 import {observer} from 'mobx-react-lite';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
+import {map} from 'lodash/fp';
 import Logo from 'v2/components/UI/Logo';
 import Search from 'v2/components/Search';
 import socketActions from 'v2/stores/socket';
-import {map} from 'lodash/fp';
+import {updateBaseUrl} from 'v2/api';
 
 import * as EndpointConfig from '../../../EndpointConfig';
+import NavBar from '../NavBar';
 import {ReactComponent as LiveIcon} from './assets/liveIcon.svg';
 import useStyles from './styles';
 
 const Header = () => {
+  const [isDrawerOpen, setDrawerOpen] = useState(false);
   const {endpointName, updateEndpointName} = socketActions;
   const classes = useStyles();
   const onSearch = () => {};
@@ -23,31 +25,58 @@ const Header = () => {
     EndpointConfig.setEndpointName(endpointName);
     updateEndpointName(endpointName);
     socketActions.init();
+    updateBaseUrl();
   };
   const endPointsList = EndpointConfig.getEndpoints();
   const renderEndpointOption = endpoint => (
     <option key={endpoint} value={endpoint}>
       {endpoint}
     </option>
   );
+
+  const toggleDrawer = open => event => {
+    if (
+      event &&
+      event.type === 'keydown' &&
+      (event.key === 'Tab' || event.key === 'Shift')
+    ) {
+      return;
+    }
+    setDrawerOpen(open);
+  };
+
   return (
-    <AppBar className={classes.root} position="fixed" color="secondary">
-      <Toolbar>
-        <Logo />
-        <div className={classes.search}>
-          <Search onSubmit={onSearch} />
-        </div>
-        <div className={classes.realTime}>
-          <p>Real-time updated:</p>
-          <div>
-            Every 5 sec <LiveIcon />
+    <>
+      <AppBar className={classes.root} position="fixed" color="secondary">
+        <Toolbar classes={{root: classes.inner}}>
+          <Logo />
+          <div className={classes.search}>
+            <Search onSubmit={onSearch} />
+          </div>
+          <div className={classes.realTime}>
+            <p>Real-time updated:</p>
+            <div>
+              Every 5 sec <LiveIcon />
+            </div>
           </div>
-        </div>
-        <Select value={endpointName} onChange={handleEndpointChange} native>
-          {map(renderEndpointOption)(endPointsList)}
-        </Select>
-      </Toolbar>
-    </AppBar>
+          <Select
+            className={classes.networkSelect}
+            value={endpointName}
+            onChange={handleEndpointChange}
+            native
+          >
+            {map(renderEndpointOption)(endPointsList)}
+          </Select>
+          <IconButton
+            onClick={toggleDrawer(!isDrawerOpen)}
+            className={classes.menuButton}
+          >
+            <MenuIcon fontSize="large" />
+          </IconButton>
+        </Toolbar>
+      </AppBar>
+      <NavBar toggleDrawer={toggleDrawer} isOpen={isDrawerOpen} />
+    </>
   );
 };
 

diff --git a/src/v2/components/Header/styles.js b/src/v2/components/Header/styles.js
@@ -4,25 +4,41 @@ import getColor from 'v2/utils/getColor';
 
 export default makeStyles(theme => ({
   root: {
-    padding: '18px 68px 18px 28px',
+    padding: '18px 28px',
     borderBottom: `1px solid ${fade(theme.palette.primary.grey3, 0.5)}`,
     zIndex: theme.zIndex.drawer + 1,
+    [theme.breakpoints.down('sm')]: {
+      padding: '18px 0',
+    },
+  },
+  inner: {
+    [theme.breakpoints.down('sm')]: {
+      flexWrap: 'wrap',
+    },
   },
   search: {
-    marginLeft: 66,
+    marginLeft: 25,
     marginRight: 'auto',
     width: '100%',
     maxWidth: 713,
+    [theme.breakpoints.down('sm')]: {
+      order: 1,
+      marginLeft: 0,
+      maxWidth: '100%',
+    },
   },
   realTime: {
     display: 'flex',
     alignItems: 'center',
     whiteSpace: 'nowrap',
-    marginLeft: 66,
+    marginLeft: 25,
     textTransform: 'uppercase',
     fontSize: 12,
     letterSpacing: 2.5,
     marginRight: 25,
+    [theme.breakpoints.down('sm')]: {
+      display: 'none',
+    },
     '& div': {
       background: 'transparent',
       border: `1px solid ${getColor('main')(theme)}`,
@@ -38,4 +54,17 @@ export default makeStyles(theme => ({
       },
     },
   },
+  networkSelect: {
+    minWidth: 125,
+    [theme.breakpoints.down('sm')]: {
+      display: 'none',
+    },
+  },
+  menuButton: {
+    display: 'none',
+    marginLeft: 'auto',
+    [theme.breakpoints.down('sm')]: {
+      display: 'block',
+    },
+  },
 }));
diff --git a/src/v2/components/NavBar/index.jsx b/src/v2/components/NavBar/index.jsx
@@ -1,8 +1,16 @@
 // @flow
 
-import {Drawer, List, ListItem, ListItemIcon} from '@material-ui/core';
+import {
+  SwipeableDrawer,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  IconButton,
+} from '@material-ui/core';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import {useTheme} from '@material-ui/core/styles';
+import CloseIcon from '@material-ui/icons/Close';
 import {RouterHistory, withRouter} from 'react-router-dom';
 import React from 'react';
 import {map, propEq, eq} from 'lodash/fp';
@@ -29,13 +37,17 @@ const icons = {
 const NavBar = ({
   location,
   history,
+  isOpen,
+  toggleDrawer,
 }: {
   location: Location,
   history: RouterHistory,
+  isOpen: boolean,
+  toggleDrawer: (val: boolean) => void,
 }) => {
   const classes = useStyles();
   const theme = useTheme();
-  const showDriver = useMediaQuery(theme.breakpoints.up('md'));
+  const showDrawer = useMediaQuery(theme.breakpoints.up('md'));
   const routes = [
     'dashboard',
     'transactions',
@@ -49,9 +61,14 @@ const NavBar = ({
     const Icon = icons[link];
     const isDashboard = eq('dashboard', link);
     const selected =
-      propEq('pathname', `/${link}`)(location) ||
-      (propEq('pathname', '/')(location) && isDashboard);
-    const changeRoute = () => history.push(`/rc/${isDashboard ? '' : link}`);
+      propEq('pathname', `/rc/${link}`)(location) ||
+      (propEq('pathname', '/rc/')(location) && isDashboard);
+    const changeRoute = () => {
+      if (selected) {
+        return;
+      }
+      history.push(`/rc/${isDashboard ? '' : link}`);
+    };
     return (
       <ListItem
         onClick={changeRoute}
@@ -64,21 +81,33 @@ const NavBar = ({
         <ListItemIcon className={classes.icon}>
           <Icon />
         </ListItemIcon>
+        <ListItemText classes={{primary: classes.itemText}} primary={link} />
       </ListItem>
     );
   };
+
   return (
     <div className={classes.root}>
-      <Drawer
-        variant={!showDriver ? 'temporary' : 'permanent'}
+      <SwipeableDrawer
+        anchor={showDrawer ? 'left' : 'right'}
+        open={isOpen}
+        onClose={toggleDrawer(false)}
+        onOpen={toggleDrawer(true)}
+        variant={!showDrawer ? 'temporary' : 'permanent'}
         classes={{
           root: classes.drawerRoot,
           paper: classes.drawerPaper,
         }}
       >
         <div className={classes.toolbar} />
+        <IconButton
+          onClick={toggleDrawer(false)}
+          className={classes.menuButton}
+        >
+          <CloseIcon fontSize="large" />
+        </IconButton>
         <List component="div">{map(renderLink)(routes)}</List>
-      </Drawer>
+      </SwipeableDrawer>
     </div>
   );
 };

diff --git a/src/v2/components/NavBar/styles.js b/src/v2/components/NavBar/styles.js
@@ -1,4 +1,5 @@
 import {makeStyles} from '@material-ui/core';
+import getColor from 'v2/utils/getColor';
 
 export default makeStyles(theme => ({
   root: {
@@ -15,6 +16,9 @@ export default makeStyles(theme => ({
     padding: '0 8px',
     marginBottom: 29,
     ...theme.mixins.toolbar,
+    [theme.breakpoints.down('sm')]: {
+      display: 'none',
+    },
   },
   item: {
     height: 102,
@@ -32,4 +36,28 @@ export default makeStyles(theme => ({
       width: 0,
     },
   },
+  drawerPaper: {
+    [theme.breakpoints.down('sm')]: {
+      width: '100%',
+      background: getColor('dark')(theme),
+    },
+  },
+  menuButton: {
+    marginLeft: 'auto',
+    display: 'none',
+    [theme.breakpoints.down('sm')]: {
+      display: 'block',
+    },
+  },
+  itemText: {
+    textTransform: 'uppercase',
+    marginLeft: 38,
+    fontSize: 15,
+    fontWeight: 'bold',
+    letterSpacing: 2.5,
+    display: 'none',
+    [theme.breakpoints.down('sm')]: {
+      display: 'block',
+    },
+  },
 }));