import { connect, DispatchProp } from "react-redux";
import Tree from "../../components/tree/tree";
import { Project } from "../../models/project";
-import { RootState } from "../../store/root-reducer";
import ProjectList from "../../components/project-list/project-list";
import { Route, Switch } from "react-router";
import { Link } from "react-router-dom";
import Button from "@material-ui/core/Button/Button";
-import authActions from "../../store/auth-action";
-import { authService } from "../../services/services";
+import authActions from "../../store/auth/auth-action";
import IconButton from "@material-ui/core/IconButton/IconButton";
import Menu from "@material-ui/core/Menu/Menu";
import MenuItem from "@material-ui/core/MenuItem/MenuItem";
import { AccountCircle } from "@material-ui/icons";
-import { AnyAction } from "redux";
+import { User } from "../../models/user";
+import Grid from "@material-ui/core/Grid/Grid";
+import { RootState } from "../../store/store";
+
+import { actions as projectActions } from "../../store/project-action";
+import ProjectTree, { WorkbenchProps } from '../../components/project-tree/project-tree';
const drawerWidth = 240;
interface WorkbenchDataProps {
projects: Project[];
+ user?: User;
}
interface WorkbenchActionProps {
}
login = () => {
- this.props.dispatch(authActions.LOGIN() as AnyAction);
+ this.props.dispatch(authActions.LOGIN());
};
logout = () => {
this.handleClose();
- this.props.dispatch(authActions.LOGOUT() as AnyAction);
+ this.props.dispatch(authActions.LOGOUT());
};
handleOpenMenu = (event: React.MouseEvent<any>) => {
};
render() {
- const {classes} = this.props;
- const userLoggedIn = authService.isUserLoggedIn();
+ const {classes, user} = this.props;
return (
<div className={classes.root}>
<AppBar position="absolute" className={classes.appBar}>
<Typography variant="title" color="inherit" noWrap style={{flexGrow: 1}}>
<span>Arvados</span><br/><span style={{fontSize: 12}}>Workbench 2</span>
</Typography>
- {userLoggedIn ?
- <div>
- <IconButton
- aria-owns={this.state.anchorEl ? 'menu-appbar' : undefined}
- aria-haspopup="true"
- onClick={this.handleOpenMenu}
- color="inherit">
- <AccountCircle/>
- </IconButton>
+ {user ?
+ <Grid container style={{width: 'auto'}}>
+ <Grid container style={{width: 'auto'}} alignItems='center'>
+ <Typography variant="title" color="inherit" noWrap>
+ {user.firstName} {user.lastName}
+ </Typography>
+ </Grid>
+ <Grid item>
+ <IconButton
+ aria-owns={this.state.anchorEl ? 'menu-appbar' : undefined}
+ aria-haspopup="true"
+ onClick={this.handleOpenMenu}
+ color="inherit">
+ <AccountCircle/>
+ </IconButton>
+ </Grid>
<Menu
id="menu-appbar"
anchorEl={this.state.anchorEl}
<MenuItem onClick={this.logout}>Logout</MenuItem>
<MenuItem onClick={this.handleClose}>My account</MenuItem>
</Menu>
- </div>
+ </Grid>
:
<Button color="inherit" onClick={this.login}>Login</Button>
}
</Toolbar>
</AppBar>
- {userLoggedIn &&
+ {user &&
<Drawer
variant="permanent"
classes={{
paper: classes.drawerPaper,
}}>
<div className={classes.toolbar}/>
- <Tree items={this.props.projects} render={(p: Project) =>
- <Link to={`/project/${p.name}`}>{p.name}</Link>
- }/>
+ <ProjectTree
+ projects={this.props.projects}
+ toggleProjectTreeItem={this.props.toggleProjectTreeItem}/>
</Drawer>}
<main className={classes.content}>
<div className={classes.toolbar}/>
export default connect<WorkbenchDataProps>(
(state: RootState) => ({
- projects: state.projects
- })
+ projects: state.projects,
+ user: state.auth.user
+ }){
+ toggleProjectTreeItem: (id: string) => projectActions.toggleProjectTreeItem(id)
+ }
)(
withStyles(styles)(Workbench)
);