feat: display username in drawer

closes #240
graasp · Jun 5, 2020 · a03ae5e · a03ae5e
1 parent bc1c052
commit a03ae5e
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 41 deletions.
diff --git a/src/components/common/DrawerHeader.js b/src/components/common/DrawerHeader.js
@@ -0,0 +1,93 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { withStyles } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import { Online, Offline } from 'react-detect-offline';
+import Typography from '@material-ui/core/Typography/Typography';
+import CloudIcon from '@material-ui/icons/Cloud';
+import CloudOffIcon from '@material-ui/icons/CloudOff';
+import { withTranslation } from 'react-i18next';
+import ListItem from '@material-ui/core/ListItem';
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+
+const styles = () => ({
+  drawerHeader: {
+    height: '55px',
+  },
+  username: {
+    fontWeight: 'bold',
+    fontSize: '1rem',
+  },
+  secondaryAction: {
+    right: '5px',
+  },
+});
+
+const DrawerHeader = ({ classes, theme, handleDrawerClose, username }) => {
+  return (
+    <ListItem
+      classes={{ root: classes.drawerHeader }}
+      divider
+      ContainerComponent="div"
+    >
+      <ListItemIcon>
+        <Online>
+          <CloudIcon />
+        </Online>
+        <Offline>
+          <CloudOffIcon />
+        </Offline>
+      </ListItemIcon>
+
+      <Typography
+        variant="inherit"
+        color="inherit"
+        noWrap
+        classes={{ root: classes.username }}
+      >
+        {username}
+      </Typography>
+
+      <ListItemSecondaryAction classes={{ root: classes.secondaryAction }}>
+        <IconButton onClick={handleDrawerClose}>
+          {theme.direction === 'ltr' ? (
+            <ChevronLeftIcon />
+          ) : (
+            <ChevronRightIcon />
+          )}
+        </IconButton>
+      </ListItemSecondaryAction>
+    </ListItem>
+  );
+};
+
+DrawerHeader.propTypes = {
+  classes: PropTypes.shape({
+    username: PropTypes.string.isRequired,
+    secondaryAction: PropTypes.string.isRequired,
+    drawerHeader: PropTypes.string.isRequired,
+  }).isRequired,
+  theme: PropTypes.shape({
+    direction: PropTypes.string.isRequired,
+  }).isRequired,
+  handleDrawerClose: PropTypes.func.isRequired,
+  username: PropTypes.string.isRequired,
+};
+
+const mapStateToProps = ({ authentication }) => ({
+  username: authentication.getIn(['user', 'username']),
+});
+
+const ConnectedComponent = connect(mapStateToProps, null)(DrawerHeader);
+
+const StyledComponent = withStyles(styles, { withTheme: true })(
+  ConnectedComponent
+);
+
+const TranslatedComponent = withTranslation()(StyledComponent);
+
+export default TranslatedComponent;
diff --git a/src/components/common/Sidebar.js b/src/components/common/Sidebar.js
@@ -2,15 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Drawer from '@material-ui/core/Drawer';
-import Divider from '@material-ui/core/Divider';
-import IconButton from '@material-ui/core/IconButton';
-import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import { withTranslation } from 'react-i18next';
 import MainMenu from './MainMenu';
 import Styles from '../../Styles';
+import DrawerHeader from './DrawerHeader';
 
-const Sidebar = ({ classes, theme, isSidebarOpen, handleDrawerClose }) => {
+const Sidebar = ({ classes, isSidebarOpen, handleDrawerClose }) => {
   return (
     <Drawer
       className={classes.drawer}
@@ -21,16 +18,7 @@ const Sidebar = ({ classes, theme, isSidebarOpen, handleDrawerClose }) => {
         paper: classes.drawerPaper,
       }}
     >
-      <div className={classes.drawerHeader}>
-        <IconButton onClick={handleDrawerClose}>
-          {theme.direction === 'ltr' ? (
-            <ChevronLeftIcon />
-          ) : (
-            <ChevronRightIcon />
-          )}
-        </IconButton>
-      </div>
-      <Divider />
+      <DrawerHeader handleDrawerClose={handleDrawerClose} />
       <MainMenu />
     </Drawer>
   );

diff --git a/src/components/space/SpaceScreen.js b/src/components/space/SpaceScreen.js
@@ -7,10 +7,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import CssBaseline from '@material-ui/core/CssBaseline/CssBaseline';
 import AppBar from '@material-ui/core/AppBar/AppBar';
 import classNames from 'classnames';
-import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import Toolbar from '@material-ui/core/Toolbar/Toolbar';
-import IconButton from '@material-ui/core/IconButton/IconButton';
 import HomeIcon from '@material-ui/icons/Home';
 import Drawer from '@material-ui/core/Drawer/Drawer';
 import Divider from '@material-ui/core/Divider/Divider';
@@ -39,6 +37,7 @@ import {
   PHASE_MENU_LIST_ID,
   buildPhaseMenuItemId,
 } from '../../config/selectors';
+import DrawerHeader from '../common/DrawerHeader';
 
 class SpaceScreen extends Component {
   state = {
@@ -162,7 +161,7 @@ class SpaceScreen extends Component {
   };
 
   render() {
-    const { space, phase, activity, classes, theme } = this.props;
+    const { space, phase, activity, classes } = this.props;
     const { openDrawer, selected } = this.state;
 
     if (activity) {
@@ -201,16 +200,7 @@ class SpaceScreen extends Component {
             paper: classes.drawerPaper,
           }}
         >
-          <div className={classes.drawerHeader}>
-            <IconButton onClick={this.handleDrawerClose}>
-              {theme.direction === 'ltr' ? (
-                <ChevronLeftIcon />
-              ) : (
-                <ChevronRightIcon />
-              )}
-            </IconButton>
-          </div>
-          <Divider />
+          <DrawerHeader handleDrawerClose={this.handleDrawerClose} />
           <List id={PHASE_MENU_LIST_ID}>
             <MenuItem
               onClick={this.handleClearPhase}

diff --git a/src/components/space/SyncVisualScreen.js b/src/components/space/SyncVisualScreen.js
@@ -14,18 +14,17 @@ import Toolbar from '@material-ui/core/Toolbar/Toolbar';
 import Grid from '@material-ui/core/Grid';
 import { withStyles } from '@material-ui/core';
 import { withRouter } from 'react-router';
-import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import NewReleaseIcon from '@material-ui/icons/NewReleases';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import HomeIcon from '@material-ui/icons/Home';
 import Drawer from '@material-ui/core/Drawer/Drawer';
-import Divider from '@material-ui/core/Divider/Divider';
 import List from '@material-ui/core/List/List';
 import MenuItem from '@material-ui/core/MenuItem/MenuItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText/ListItemText';
 import SyncCancelButton from './sync/SyncCancelButton';
 import SyncAcceptButton from './sync/SyncAcceptButton';
+import DrawerHeader from '../common/DrawerHeader';
 import {
   PHASE_MENU_LIST_ID,
   PHASE_MENU_ITEM_HOME_ID,
@@ -389,7 +388,6 @@ class SyncScreen extends Component {
       t,
       remotePhase,
       localPhase,
-      theme,
       diff,
     } = this.props;
     const { name } = localSpace;
@@ -454,16 +452,7 @@ class SyncScreen extends Component {
             paper: classes.drawerPaper,
           }}
         >
-          <div className={classes.drawerHeader}>
-            <IconButton onClick={this.handleDrawerClose}>
-              {theme.direction === 'ltr' ? (
-                <ChevronLeftIcon />
-              ) : (
-                <ChevronRightIcon />
-              )}
-            </IconButton>
-          </div>
-          <Divider />
+          <DrawerHeader handleDrawerClose={this.handleDrawerClose} />
           <List id={PHASE_MENU_LIST_ID}>
             <MenuItem
               onClick={this.handleClearPhase}