Skip to content

Commit

Permalink
Merge pull request #276 from graasp/240/displayUsername
Browse files Browse the repository at this point in the history 
240/display username
  • Loading branch information
@juancarlosfarah
juancarlosfarah authored Jun 19, 2020
2 parents f8000e5 + 40ebc59 commit e648882
Show file tree
Hide file tree
Showing 6 changed files with 158 additions and 167 deletions.
97 changes: 97 additions & 0 deletions src/components/common/DrawerHeader.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { withStyles } from '@material-ui/core/styles';
import Tooltip from '@material-ui/core/Tooltip';
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';
import { DRAWER_HEADER_HEIGHT } from '../../config/constants';

const styles = () => ({
drawerHeader: {
height: DRAWER_HEADER_HEIGHT,
},
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>

<Tooltip title={username}>
<Typography
variant="inherit"
color="inherit"
noWrap
classes={{ root: classes.username }}
>
{username}
</Typography>
</Tooltip>

<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;
18 changes: 3 additions & 15 deletions src/components/common/Sidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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>
);
Expand Down
177 changes: 51 additions & 126 deletions src/components/space/SpaceNotFound.js
View file
Original file line number Diff line number Diff line change
@@ -1,142 +1,67 @@
import React, { Component } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router';
import { withTranslation } from 'react-i18next';
import Button from '@material-ui/core//Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import AppBar from '@material-ui/core/AppBar';
import classNames from 'classnames';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import Drawer from '@material-ui/core/Drawer';
import Divider from '@material-ui/core/Divider';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import { withStyles } from '@material-ui/core';
import Typography from '@material-ui/core/Typography';
import MainMenu from '../common/MainMenu';
import Styles from '../../Styles';
import { HOME_PATH, VISIT_PATH } from '../../config/paths';
import Main from '../common/Main';

class SpaceNotFound extends Component {
state = {
open: false,
};

static propTypes = {
t: PropTypes.func.isRequired,
classes: PropTypes.shape({
root: PropTypes.string.isRequired,
appBar: PropTypes.string.isRequired,
appBarShift: PropTypes.string.isRequired,
menuButton: PropTypes.string.isRequired,
hide: PropTypes.string.isRequired,
drawer: PropTypes.string.isRequired,
drawerPaper: PropTypes.string.isRequired,
drawerHeader: PropTypes.string.isRequired,
content: PropTypes.string.isRequired,
contentShift: PropTypes.string.isRequired,
button: PropTypes.string.isRequired,
}).isRequired,
theme: PropTypes.shape({
direction: PropTypes.string.isRequired,
}).isRequired,
history: PropTypes.shape({
length: PropTypes.number.isRequired,
replace: PropTypes.func.isRequired,
}).isRequired,
};

handleDrawerOpen = () => {
this.setState({ open: true });
};

handleDrawerClose = () => {
this.setState({ open: false });
};

render() {
const { open } = this.state;
const {
history: { replace },
classes,
theme,
t,
} = this.props;
return (
<div className={classes.root}>
<CssBaseline />
<AppBar
position="fixed"
className={classNames(classes.appBar, {
[classes.appBarShift]: open,
})}
const SpaceNotFound = ({ history: { replace }, classes, t }) => {
return (
<Main fullScreen>
<div>
<Typography
align="center"
variant="h5"
color="inherit"
style={{ margin: '2rem' }}
>
<Toolbar disableGutters={!open}>
<IconButton
color="inherit"
aria-label="Open drawer"
onClick={this.handleDrawerOpen}
className={classNames(classes.menuButton, open && classes.hide)}
>
<MenuIcon />
</IconButton>
</Toolbar>
</AppBar>
<Drawer
className={classes.drawer}
variant="persistent"
anchor="left"
open={open}
classes={{
paper: classes.drawerPaper,
}}
{t('Space Not Found')}
</Typography>
<Button
variant="contained"
color="primary"
className={classes.button}
onClick={() => replace(HOME_PATH)}
>
<div className={classes.drawerHeader}>
<IconButton onClick={this.handleDrawerClose}>
{theme.direction === 'ltr' ? (
<ChevronLeftIcon />
) : (
<ChevronRightIcon />
)}
</IconButton>
</div>
<Divider />
<MainMenu />
</Drawer>
<main
className={classNames(classes.content, {
[classes.contentShift]: open,
})}
{t('Home')}
</Button>
<Button
variant="contained"
color="primary"
className={classes.button}
onClick={() => replace(VISIT_PATH)}
>
<div className={classes.drawerHeader} />
<div>
<Typography variant="h5" color="inherit" style={{ margin: '2rem' }}>
{t('Space Not Found')}
</Typography>
<Button
variant="contained"
color="primary"
className={classes.button}
onClick={() => replace(HOME_PATH)}
>
{t('Home')}
</Button>
<Button
variant="contained"
color="primary"
className={classes.button}
onClick={() => replace(VISIT_PATH)}
>
{t('Visit Another Space')}
</Button>
</div>
</main>
{t('Visit Another Space')}
</Button>
</div>
);
}
}
</Main>
);
};

SpaceNotFound.propTypes = {
t: PropTypes.func.isRequired,
classes: PropTypes.shape({
root: PropTypes.string.isRequired,
appBar: PropTypes.string.isRequired,
appBarShift: PropTypes.string.isRequired,
menuButton: PropTypes.string.isRequired,
hide: PropTypes.string.isRequired,
drawer: PropTypes.string.isRequired,
drawerPaper: PropTypes.string.isRequired,
drawerHeader: PropTypes.string.isRequired,
content: PropTypes.string.isRequired,
contentShift: PropTypes.string.isRequired,
button: PropTypes.string.isRequired,
}).isRequired,
history: PropTypes.shape({
length: PropTypes.number.isRequired,
replace: PropTypes.func.isRequired,
}).isRequired,
};

const StyledComponent = withStyles(Styles, { withTheme: true })(SpaceNotFound);

Expand Down
16 changes: 3 additions & 13 deletions src/components/space/SpaceScreen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -39,6 +37,7 @@ import {
PHASE_MENU_LIST_ID,
buildPhaseMenuItemId,
} from '../../config/selectors';
import DrawerHeader from '../common/DrawerHeader';

class SpaceScreen extends Component {
state = {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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}
Expand Down
Loading

0 comments on commit e648882

Please sign in to comment.