Added scrollability, styles for tree

[arvados-workbench2.git] / src / index.tsx

diff --git a/src/index.tsx b/src/index.tsx
index dacada2e6e2ab496f03de89e835fcab600c39603..d99c3d1a310a6885370fcac69b75f01f8d11603f 100644 (file)
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -12,14 +12,45 @@ import { Route, Router } from "react-router";
 import createBrowserHistory from "history/createBrowserHistory";
 import configureStore from "./store/store";
 import { ConnectedRouter } from "react-router-redux";
+import { TreeItem } from "./components/tree/tree";
+import { Project } from "./models/project";
+
+const sampleProjects = [
+    [
+        'Project 1', [
+            ['Project 1.1', [['Project 1.1.1'], ['Project 1.1.2']]],
+            ['Project 1.2', [['Project 1.2.1'], ['Project 1.2.2'], ['Project 1.2.3']]]
+        ]
+    ],
+    [
+        'Project 2'
+    ],
+    [
+        'Project 3', [['Project 3.1'], ['Project 3.2']]
+    ]
+];
+
+
+function buildProjectTree(tree: any[], level = 0): Array<TreeItem<Project>> {
+    const projects = tree.map((t, idx) => ({
+        id: `l${level}i${idx}${t[0]}`,
+        open: false,
+        data: {
+            name: t[0],
+            icon: level === 0 ? <i className="icon-th"/> : <i className="fas fa-folder"/>,
+            createdAt: '2018-05-05',
+        },
+        items: t.length > 1 ? buildProjectTree(t[1], level + 1) : []
+    }));
+    return projects;
+}
+
 
 const history = createBrowserHistory();
+const projects = buildProjectTree(sampleProjects);
+
 const store = configureStore({
-    projects: [
-        { name: 'Mouse genome', createdAt: '2018-05-01' },
-        { name: 'Human body', createdAt: '2018-05-01' },
-        { name: 'Secret operation', createdAt: '2018-05-01' }
-    ],
+    projects,
     router: {
         location: null
     }
@@ -29,12 +60,12 @@ const App = () =>
     <Provider store={store}>
         <ConnectedRouter history={history}>
             <div>
-                <Route path="/" component={Workbench}/>
+                <Route path="/" component={Workbench} />
             </div>
         </ConnectedRouter>
     </Provider>;
 
 ReactDOM.render(
-    <App/>,
+    <App />,
     document.getElementById('root') as HTMLElement
 );