Added API to update document tree

src/components/Tree/Node.js

@@ -1,4 +1,5 @@
 var React = require('react');
+import history from 'utils/History';
 
 import styles from './Tree.scss';
 import classNames from 'classnames/bind';
@@ -79,10 +80,10 @@ var Node = React.createClass({
           {!this.props.rootNode && this.renderCollapse()}
           <span
             className={ cx(styles.nodeLabel, { rootLabel: this.props.rootNode }) }
-            onClick={() => {}}
+            onClick={() => { history.push(node.url) }}
             onMouseDown={this.props.rootNode ? function(e){e.stopPropagation()} : undefined}
           >
-            {node.name}
+            { node.title }
           </span>
         </div>
         {this.renderChildren()}

src/index.js

@@ -44,6 +44,7 @@ render((
         <Route path="/atlas/:id/new" component={ DocumentEdit } onEnter={ requireAuth } newDocument={ true } />
         <Route path="/documents/:id" component={ DocumentScene } onEnter={ requireAuth } />
         <Route path="/documents/:id/edit" component={ DocumentEdit } onEnter={ requireAuth } />
+        <Route path="/documents/:id/new" component={ DocumentEdit } onEnter={ requireAuth } newChildDocument={ true } />
 
         <Route path="/auth/slack" component={SlackAuth} />
       </Route>

src/scenes/DocumentEdit/DocumentEdit.js

@@ -26,6 +26,10 @@ class DocumentEdit extends Component {
     if (this.props.route.newDocument) {
       store.atlasId = this.props.params.id;
       store.newDocument = true;
+    } else if (this.props.route.newChildDocument) {
+      store.documentId = this.props.params.id;
+      store.newChildDocument = true;
+      store.fetchDocument();
     } else {
       store.documentId = this.props.params.id;
       store.newDocument = false;
@@ -44,7 +48,7 @@ class DocumentEdit extends Component {
     //   alert("Please add a title before saving (hint: Write a markdown header)");
     //   return
     // }
-    if (store.newDocument) {
+    if (store.newDocument || store.newChildDocument) {
       store.saveDocument();
     } else {
       store.updateDocument();

src/scenes/DocumentEdit/DocumentEditStore.js

@@ -18,9 +18,11 @@ const parseHeader = (text) => {
 const documentEditStore = new class DocumentEditStore {
     @observable documentId = null;
     @observable atlasId = null;
+    @observable parentDocument;
     @observable title;
     @observable text;
     @observable newDocument;
+    @observable newChildDocument;
 
     @observable preview;
     @observable isFetching;
@@ -35,9 +37,13 @@ const documentEditStore = new class DocumentEditStore {
         const data = await client.post('/documents.info', {
           id: this.documentId,
         })
-        const { title, text } = data.data;
-        this.title = title;
-        this.text = text;
+        if (this.newDocument) {
+          const { title, text } = data.data;
+          this.title = title;
+          this.text = text;
+        } else {
+          this.parentDocument = data.data;
+        }
       } catch (e) {
         console.error("Something went wrong");
       }
@@ -51,7 +57,8 @@ const documentEditStore = new class DocumentEditStore {
 
       try {
         const data = await client.post('/documents.create', {
-          atlas: this.atlasId,
+          parentDocument: this.parentDocument && this.parentDocument.id,
+          atlas: this.atlasId || this.parentDocument.atlas.id,
           title: this.title,
           text: this.text,
         })

src/scenes/DocumentEdit/components/SaveAction.js

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
 
 @observer
 class SaveAction extends React.Component {
-  propTypes = {
+  static propTypes = {
     onClick: React.PropTypes.func.isRequired,
     disabled: React.PropTypes.bool,
   }

src/scenes/DocumentScene/DocumentScene.js

@@ -30,6 +30,13 @@ class DocumentScene extends React.Component {
   }
 
   componentWillReceiveProps = (nextProps) => {
+    // Reload on url change
+    const oldId = this.props.params.id;
+    const newId = nextProps.params.id;
+    if (oldId !== newId) {
+      store.fetchDocument(newId);
+    }
+
     // Scroll to anchor after loading, and only once
     const { hash } = this.props.location;
 
@@ -57,17 +64,10 @@ class DocumentScene extends React.Component {
     );
   }
 
-  // onClickNode = (node) => {
-  //   this.setState({
-  //     active: node
-  //   });
-  // }
-
-  // handleChange = (tree) => {
-  //   this.setState({
-  //     tree: tree
-  //   });
-  // }
+  handleChange = (tree) => {
+    console.log(tree);
+    store.updateNavigationTree(tree);
+  }
 
   render() {
     const doc = store.document;
@@ -114,7 +114,7 @@ class DocumentScene extends React.Component {
             { store.isAtlas ? (
               <div className={ styles.sidebar }>
                 <Tree
-                  paddingLeft={20}
+                  paddingLeft={10}
                   tree={ doc.atlas.structure }
                   onChange={this.handleChange}
                   isNodeCollapsed={this.isNodeCollapsed}

src/scenes/DocumentScene/DocumentSceneStore.js

@@ -11,8 +11,8 @@ const store = new class DocumentSceneStore {
   /* Computed */
 
   @computed get isAtlas() {
-    console.log(this.document.atlas.type)
-    return this.document.atlas.type === 'atlas';
+    return this.document &&
+      this.document.atlas.type === 'atlas';
   }
 
   /* Actions */
@@ -42,6 +42,20 @@ const store = new class DocumentSceneStore {
     }
     this.isFetching = false;
   }
+
+  @action updateNavigationTree = async (tree) => {
+    this.isFetching = true;
+
+    try {
+      const res = await client.post('/atlases.updateNavigationTree', {
+        id: this.document.atlas.id,
+        tree: tree,
+      });
+    } catch (e) {
+      console.error("Something went wrong");
+    }
+    this.isFetching = false;
+  }
 }();
 
 export default store;