refactor nav menu items

Author: SergiuB

src/app/components/AppBar/AppBar.jsx

@@ -52,16 +52,28 @@ const styles = theme => ({
 
 const NavItem = withRouter(({ route, render, location, history }) => render({ selected: location.pathname === route, navigate: () => history.push(route) }));
 
-const DrawerMenuItem = withStyles(styles, { withTheme: true })(({ onClick, selected, label, classes}) => (
+const DrawerItem = withStyles(styles, { withTheme: true })(({ onClick, selected, label, classes }) => (
   <ListItem button onClick={onClick}>
     <ListItemText classes={selected ? {
       primary: classes.selectedItem
     } : {}}
       primary={label} />
   </ListItem>
-))
+));
 
-class AppBarBase extends Component {
+const DrawerNavItem = ({ route, label }) => (
+  <NavItem route={route} render={({ selected, navigate }) => (
+    <DrawerItem selected={selected} onClick={navigate} label={label} />
+  )} />
+);
+
+const TopMenuNavItem = ({ route, label }) => (
+  <NavItem route={route} render={({ selected, navigate }) => (
+    <Button color={selected ? 'secondary' : 'inherit'} onClick={navigate}>{label}</Button>
+  )} />
+)
+
+class AppBar extends Component {
   state = {
     drawerOpen: false,
     anchorEl: null
@@ -79,7 +91,7 @@ class AppBarBase extends Component {
     this.setState({ anchorEl: null });
   };
   render() {
-    const { classes, auth, location, history } = this.props;
+    const { classes, auth } = this.props;
     const { anchorEl } = this.state;
     const open = Boolean(anchorEl);
 
@@ -106,10 +118,10 @@ class AppBarBase extends Component {
             {auth && (
               <div className={classes.topToolbar}>
                 <div className={classes.topMenu}>
-                  <Button color={location.pathname === '/' ? 'secondary' : 'inherit'} onClick={() => history.push('/')}>Home</Button>
-                  <Button color={location.pathname === '/categories' ? 'secondary' : 'inherit'} onClick={() => history.push('/categories')}>Categorii</Button>
-                  <Button color={location.pathname === '/proposals' ? 'secondary' : 'inherit'} onClick={() => history.push('/proposals')}>Propuneri legislative</Button>
-                  <Button color={location.pathname === '/institutions' ? 'secondary' : 'inherit'} onClick={() => history.push('/institutions')}>Institutii</Button>
+                  <TopMenuNavItem route='/' label='Home' />
+                  <TopMenuNavItem route='/categories' label='Categorii' />
+                  <TopMenuNavItem route='/proposals' label='Propuneri legislative' />
+                  <TopMenuNavItem route='/institutions' label='Institutii' />
                 </div>
                 <Typography
                   variant="body1"
@@ -152,18 +164,10 @@ class AppBarBase extends Component {
           <NavDrawer open={this.state.drawerOpen}
             onClose={this.handleDrawerToggle}>
             <List>
-              <NavItem route='/' render={({ selected, navigate }) => (
-                <DrawerMenuItem selected={selected} onClick={navigate} label='Home'/>
-              )} />
-              <NavItem route='/categories' render={({ selected, navigate }) => (
-                <DrawerMenuItem selected={selected} onClick={navigate} label='Categorii'/>
-              )} />
-              <NavItem route='/proposals' render={({ selected, navigate }) => (
-                <DrawerMenuItem selected={selected} onClick={navigate} label='Propuneri legislative'/>
-              )} />
-              <NavItem route='/institutions' render={({ selected, navigate }) => (
-                <DrawerMenuItem selected={selected} onClick={navigate} label='Institutii'/>
-              )} />
+              <DrawerNavItem route='/' label='Home' />
+              <DrawerNavItem route='/categories' label='Categorii' />
+              <DrawerNavItem route='/proposals' label='Propuneri legislative' />
+              <DrawerNavItem route='/institutions' label='Institutii' />
             </List>
           </NavDrawer>
         </Hidden>
@@ -172,29 +176,11 @@ class AppBarBase extends Component {
   }
 }
 
-AppBarBase.propTypes = {
+AppBar.propTypes = {
   classes: PropTypes.object.isRequired,
-  auth: PropTypes.object,
-  match: PropTypes.object.isRequired,
-  location: PropTypes.object.isRequired,
-  history: PropTypes.object.isRequired
+  auth: PropTypes.object
 };
 
-
-AppBarBase.defaultProps = {
-  location: {
-    pathname: '/'
-  },
-  history: {
-    push: () => { }
-  }
-}
-
-
-const AppBar = withStyles(styles, { withTheme: true })(AppBarBase);
-
-export { AppBar };
-
-export default withRouter(AppBar);
+export default withStyles(styles, { withTheme: true })(AppBar);
 
 

src/app/components/NavDrawer/NavDrawer.js

@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
 import { withStyles } from 'material-ui/styles';
 import Drawer from 'material-ui/Drawer';
 
-const drawerWidth = 240;
+const DRAWER_WIDTH = 240;
 
 const styles = theme => ({
   drawerPaper: {
-    width: drawerWidth
+    width: DRAWER_WIDTH
   }
 });