tree test

[arvados.git] / src / views / workbench / workbench.tsx

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index a92e486ecf7f133c5092e62a2380a4898944bae9..6f39ac78e05c3752dee124e6447f98490eedc4d5 100644 (file)
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -10,9 +10,13 @@ import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
 import { connect } 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 { actions as projectActions } from "../../store/project-action";
+import ProjectTree, { WorkbenchProps } from '../../components/project-tree/project-tree';
 
 const drawerWidth = 240;
 
@@ -45,23 +49,15 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     toolbar: theme.mixins.toolbar
 });
 
-interface WorkbenchProps {
-    projects: Project[]
-}
-
-interface WorkbenchState {
-}
-
-class Workbench extends React.Component<WorkbenchProps & WithStyles<CssRules>, WorkbenchState> {
+class Workbench extends React.Component<WorkbenchProps & WithStyles<CssRules>> {
     render() {
-        const {classes} = this.props;
-
+        const { classes } = this.props;
         return (
             <div className={classes.root}>
                 <AppBar position="absolute" className={classes.appBar}>
                     <Toolbar>
                         <Typography variant="title" color="inherit" noWrap>
-                            Arvados<br/>Workbench 2
+                            Arvados<br />Workbench 2
                         </Typography>
                     </Toolbar>
                 </AppBar>
@@ -70,24 +66,31 @@ class Workbench extends React.Component<WorkbenchProps & WithStyles<CssRules>, W
                     classes={{
                         paper: classes.drawerPaper,
                     }}>
-                    <div className={classes.toolbar}/>
-                    <Tree items={this.props.projects} render={(p: Project) =>
-                        <span>{p.name}</span>
-                    }/>
+                    <div className={classes.toolbar} />
+                    <ProjectTree
+                        projects={this.props.projects}
+                        toggleProjectTreeItem={this.props.toggleProjectTreeItem} />
                 </Drawer>
                 <main className={classes.content}>
-                    <div className={classes.toolbar}/>
-                    <Typography noWrap>Hello new workbench!</Typography>
+                    <div className={classes.toolbar} />
+                    <Switch>
+                        <Route exact path="/">
+                            <Typography noWrap>Hello new workbench!</Typography>
+                        </Route>
+                        <Route path="/project/:name" component={ProjectList} />
+                    </Switch>
                 </main>
             </div>
         );
     }
 }
 
-export default connect<WorkbenchProps>(
+export default connect(
     (state: RootState) => ({
         projects: state.projects
-    })
+    }), {
+        toggleProjectTreeItem: (id: string) => projectActions.toggleProjectTreeItem(id)
+    }
 )(
     withStyles(styles)(Workbench)
 );