More tree

src/scenes/Atlas/Atlas.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import Link from 'react-router/lib/Link';
+import History from 'utils/History';
 
 import store from './AtlasStore';
 
@@ -16,7 +17,13 @@ import styles from './Atlas.scss';
 class Atlas extends React.Component {
   componentDidMount = () => {
     const { id } = this.props.params;
-    store.fetchAtlas(id);
+    store.fetchAtlas(id, data => {
+
+      // Forward directly to root document
+      if (data.type === 'atlas') {
+        History.replace(data.structure.url);
+      }
+    })
   }
 
   render() {

src/scenes/Atlas/AtlasStore.js

@@ -8,7 +8,7 @@ const store = new class AtlasStore {
 
   /* Actions */
 
-  @action fetchAtlas = async (id) => {
+  @action fetchAtlas = async (id, successCallback) => {
     this.isFetching = true;
     this.atlas = null;
 
@@ -16,6 +16,7 @@ const store = new class AtlasStore {
       const res = await client.post('/atlases.info', { id: id });
       const { data } = res;
       this.atlas = data;
+      successCallback(data);
     } catch (e) {
       console.error("Something went wrong");
     }

src/scenes/DocumentScene/DocumentScene.js

@@ -18,31 +18,10 @@ const cx = classNames.bind(styles);
 
 import treeStyles from 'components/Tree/Tree.scss';
 
-const tree = {
-  name: "Introduction",
-  id: "1",
-  children: [{
-    collapsed: false,
-    name: "dist",
-    id: "2",
-    children: [
-      {
-        name: "Details",
-        id: "21",
-      },
-      {
-        name: "Distribution",
-        id: "22",
-      }
-    ]
-  }]
-};
-
 @observer
 class DocumentScene extends React.Component {
   state = {
     didScroll: false,
-    tree: tree,
   }
 
   componentDidMount = () => {
@@ -78,17 +57,17 @@ class DocumentScene extends React.Component {
     );
   }
 
-  onClickNode = (node) => {
-    this.setState({
-      active: node
-    });
-  }
+  // onClickNode = (node) => {
+  //   this.setState({
+  //     active: node
+  //   });
+  // }
 
-  handleChange = (tree) => {
-    this.setState({
-      tree: tree
-    });
-  }
+  // handleChange = (tree) => {
+  //   this.setState({
+  //     tree: tree
+  //   });
+  // }
 
   render() {
     const doc = store.document;
@@ -131,7 +110,7 @@ class DocumentScene extends React.Component {
               <div className={ styles.sidebar }>
                 <Tree
                   paddingLeft={20}
-                  tree={this.state.tree}
+                  tree={ doc.atlas.structure }
                   onChange={this.handleChange}
                   isNodeCollapsed={this.isNodeCollapsed}
                   renderNode={this.renderNode}