Skip to content

Commit a03ae5e

Browse files
pyphiliapyphilia
committed
feat: display username in drawer
closes #240
1 parent bc1c052 commit a03ae5e

File tree

4 files changed

+101
-41
lines changed

4 files changed

+101
-41
lines changed

‎src/components/common/DrawerHeader.js

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { connect } from 'react-redux';
4+
import { withStyles } from '@material-ui/core/styles';
5+
import IconButton from '@material-ui/core/IconButton';
6+
import { Online, Offline } from 'react-detect-offline';
7+
import Typography from '@material-ui/core/Typography/Typography';
8+
import CloudIcon from '@material-ui/icons/Cloud';
9+
import CloudOffIcon from '@material-ui/icons/CloudOff';
10+
import { withTranslation } from 'react-i18next';
11+
import ListItem from '@material-ui/core/ListItem';
12+
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
13+
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
14+
import ListItemIcon from '@material-ui/core/ListItemIcon';
15+
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
16+
17+
const styles = () => ({
18+
drawerHeader: {
19+
height: '55px',
20+
},
21+
username: {
22+
fontWeight: 'bold',
23+
fontSize: '1rem',
24+
},
25+
secondaryAction: {
26+
right: '5px',
27+
},
28+
});
29+
30+
const DrawerHeader = ({ classes, theme, handleDrawerClose, username }) => {
31+
return (
32+
<ListItem
33+
classes={{ root: classes.drawerHeader }}
34+
divider
35+
ContainerComponent="div"
36+
>
37+
<ListItemIcon>
38+
<Online>
39+
<CloudIcon />
40+
</Online>
41+
<Offline>
42+
<CloudOffIcon />
43+
</Offline>
44+
</ListItemIcon>
45+
46+
<Typography
47+
variant="inherit"
48+
color="inherit"
49+
noWrap
50+
classes={{ root: classes.username }}
51+
>
52+
{username}
53+
</Typography>
54+
55+
<ListItemSecondaryAction classes={{ root: classes.secondaryAction }}>
56+
<IconButton onClick={handleDrawerClose}>
57+
{theme.direction === 'ltr' ? (
58+
<ChevronLeftIcon />
59+
) : (
60+
<ChevronRightIcon />
61+
)}
62+
</IconButton>
63+
</ListItemSecondaryAction>
64+
</ListItem>
65+
);
66+
};
67+
68+
DrawerHeader.propTypes = {
69+
classes: PropTypes.shape({
70+
username: PropTypes.string.isRequired,
71+
secondaryAction: PropTypes.string.isRequired,
72+
drawerHeader: PropTypes.string.isRequired,
73+
}).isRequired,
74+
theme: PropTypes.shape({
75+
direction: PropTypes.string.isRequired,
76+
}).isRequired,
77+
handleDrawerClose: PropTypes.func.isRequired,
78+
username: PropTypes.string.isRequired,
79+
};
80+
81+
const mapStateToProps = ({ authentication }) => ({
82+
username: authentication.getIn(['user', 'username']),
83+
});
84+
85+
const ConnectedComponent = connect(mapStateToProps, null)(DrawerHeader);
86+
87+
const StyledComponent = withStyles(styles, { withTheme: true })(
88+
ConnectedComponent
89+
);
90+
91+
const TranslatedComponent = withTranslation()(StyledComponent);
92+
93+
export default TranslatedComponent;

‎src/components/common/Sidebar.js

+3-15
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,12 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33
import { withStyles } from '@material-ui/core/styles';
44
import Drawer from '@material-ui/core/Drawer';
5-
import Divider from '@material-ui/core/Divider';
6-
import IconButton from '@material-ui/core/IconButton';
7-
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
8-
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
95
import { withTranslation } from 'react-i18next';
106
import MainMenu from './MainMenu';
117
import Styles from '../../Styles';
8+
import DrawerHeader from './DrawerHeader';
129

13-
const Sidebar = ({ classes, theme, isSidebarOpen, handleDrawerClose }) => {
10+
const Sidebar = ({ classes, isSidebarOpen, handleDrawerClose }) => {
1411
return (
1512
<Drawer
1613
className={classes.drawer}
@@ -21,16 +18,7 @@ const Sidebar = ({ classes, theme, isSidebarOpen, handleDrawerClose }) => {
2118
paper: classes.drawerPaper,
2219
}}
2320
>
24-
<div className={classes.drawerHeader}>
25-
<IconButton onClick={handleDrawerClose}>
26-
{theme.direction === 'ltr' ? (
27-
<ChevronLeftIcon />
28-
) : (
29-
<ChevronRightIcon />
30-
)}
31-
</IconButton>
32-
</div>
33-
<Divider />
21+
<DrawerHeader handleDrawerClose={handleDrawerClose} />
3422
<MainMenu />
3523
</Drawer>
3624
);

‎src/components/space/SpaceScreen.js

+3-13
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
77
import CssBaseline from '@material-ui/core/CssBaseline/CssBaseline';
88
import AppBar from '@material-ui/core/AppBar/AppBar';
99
import classNames from 'classnames';
10-
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
1110
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
1211
import Toolbar from '@material-ui/core/Toolbar/Toolbar';
13-
import IconButton from '@material-ui/core/IconButton/IconButton';
1412
import HomeIcon from '@material-ui/icons/Home';
1513
import Drawer from '@material-ui/core/Drawer/Drawer';
1614
import Divider from '@material-ui/core/Divider/Divider';
@@ -39,6 +37,7 @@ import {
3937
PHASE_MENU_LIST_ID,
4038
buildPhaseMenuItemId,
4139
} from '../../config/selectors';
40+
import DrawerHeader from '../common/DrawerHeader';
4241

4342
class SpaceScreen extends Component {
4443
state = {
@@ -162,7 +161,7 @@ class SpaceScreen extends Component {
162161
};
163162

164163
render() {
165-
const { space, phase, activity, classes, theme } = this.props;
164+
const { space, phase, activity, classes } = this.props;
166165
const { openDrawer, selected } = this.state;
167166

168167
if (activity) {
@@ -201,16 +200,7 @@ class SpaceScreen extends Component {
201200
paper: classes.drawerPaper,
202201
}}
203202
>
204-
<div className={classes.drawerHeader}>
205-
<IconButton onClick={this.handleDrawerClose}>
206-
{theme.direction === 'ltr' ? (
207-
<ChevronLeftIcon />
208-
) : (
209-
<ChevronRightIcon />
210-
)}
211-
</IconButton>
212-
</div>
213-
<Divider />
203+
<DrawerHeader handleDrawerClose={this.handleDrawerClose} />
214204
<List id={PHASE_MENU_LIST_ID}>
215205
<MenuItem
216206
onClick={this.handleClearPhase}

‎src/components/space/SyncVisualScreen.js

+2-13
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,17 @@ import Toolbar from '@material-ui/core/Toolbar/Toolbar';
1414
import Grid from '@material-ui/core/Grid';
1515
import { withStyles } from '@material-ui/core';
1616
import { withRouter } from 'react-router';
17-
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
1817
import NewReleaseIcon from '@material-ui/icons/NewReleases';
1918
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
2019
import HomeIcon from '@material-ui/icons/Home';
2120
import Drawer from '@material-ui/core/Drawer/Drawer';
22-
import Divider from '@material-ui/core/Divider/Divider';
2321
import List from '@material-ui/core/List/List';
2422
import MenuItem from '@material-ui/core/MenuItem/MenuItem';
2523
import ListItemIcon from '@material-ui/core/ListItemIcon/ListItemIcon';
2624
import ListItemText from '@material-ui/core/ListItemText/ListItemText';
2725
import SyncCancelButton from './sync/SyncCancelButton';
2826
import SyncAcceptButton from './sync/SyncAcceptButton';
27+
import DrawerHeader from '../common/DrawerHeader';
2928
import {
3029
PHASE_MENU_LIST_ID,
3130
PHASE_MENU_ITEM_HOME_ID,
@@ -389,7 +388,6 @@ class SyncScreen extends Component {
389388
t,
390389
remotePhase,
391390
localPhase,
392-
theme,
393391
diff,
394392
} = this.props;
395393
const { name } = localSpace;
@@ -454,16 +452,7 @@ class SyncScreen extends Component {
454452
paper: classes.drawerPaper,
455453
}}
456454
>
457-
<div className={classes.drawerHeader}>
458-
<IconButton onClick={this.handleDrawerClose}>
459-
{theme.direction === 'ltr' ? (
460-
<ChevronLeftIcon />
461-
) : (
462-
<ChevronRightIcon />
463-
)}
464-
</IconButton>
465-
</div>
466-
<Divider />
455+
<DrawerHeader handleDrawerClose={this.handleDrawerClose} />
467456
<List id={PHASE_MENU_LIST_ID}>
468457
<MenuItem
469458
onClick={this.handleClearPhase}

0 commit comments

Comments
 (0)