From e967033b28f858eda6339438883241c567acf837 Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Sun, 26 Jun 2016 22:15:15 -0700
Subject: [PATCH] Fixes to tree

---
 server/api/collections.js                      |  1 -
 src/components/Tree/Node.js                    |  7 +++++--
 src/components/Tree/UiTree.js                  |  3 ++-
 src/scenes/DocumentScene/DocumentScene.js      | 10 +++++++---
 src/scenes/DocumentScene/DocumentSceneStore.js |  2 ++
 5 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/server/api/collections.js b/server/api/collections.js
index 3234d4d01..12ffe71ae 100644
--- a/server/api/collections.js
+++ b/server/api/collections.js
@@ -74,7 +74,6 @@ router.post('atlases.updateNavigationTree', auth(), async (ctx) => {
 
     ctx.body = {
       data: await presentAtlas(atlas, true),
-      tree: newTree,
     };
 });
 
diff --git a/src/components/Tree/Node.js b/src/components/Tree/Node.js
index ab980dcff..9408fd5e1 100644
--- a/src/components/Tree/Node.js
+++ b/src/components/Tree/Node.js
@@ -76,12 +76,15 @@ var Node = React.createClass({
         placeholder: index.id === dragging,
         rootNode: this.props.rootNode,
       })} style={style}>
-        <div className={ styles.inner } ref="inner" onMouseDown={this.handleMouseDown}>
+        <div
+          className={ styles.inner }
+          ref="inner"
+          onMouseDown={this.props.rootNode ? (e) => e.stopPropagation() : this.handleMouseDown}
+        >
           {!this.props.rootNode && this.renderCollapse()}
           <span
             className={ cx(styles.nodeLabel, { rootLabel: this.props.rootNode }) }
             onClick={() => { history.push(node.url) }}
-            onMouseDown={this.props.rootNode ? function(e){e.stopPropagation()} : undefined}
           >
             { node.title }
           </span>
diff --git a/src/components/Tree/UiTree.js b/src/components/Tree/UiTree.js
index 262a209f6..b309e9c49 100644
--- a/src/components/Tree/UiTree.js
+++ b/src/components/Tree/UiTree.js
@@ -230,7 +230,8 @@ module.exports = React.createClass({
       tree: tree
     });
 
-    this.change(tree);
+    // Don't push updates as collapsing is separated from store state
+    // this.change(tree);
   },
 
   // buildTreeNumbering(tree) {
diff --git a/src/scenes/DocumentScene/DocumentScene.js b/src/scenes/DocumentScene/DocumentScene.js
index e8883207a..909dc86b3 100644
--- a/src/scenes/DocumentScene/DocumentScene.js
+++ b/src/scenes/DocumentScene/DocumentScene.js
@@ -1,4 +1,6 @@
 import React from 'react';
+import { toJS } from 'mobx';
+import _isEqual from 'lodash/isEqual';
 import { Link } from 'react-router';
 import { observer } from 'mobx-react';
 
@@ -65,8 +67,10 @@ class DocumentScene extends React.Component {
   }
 
   handleChange = (tree) => {
-    console.log(tree);
-    store.updateNavigationTree(tree);
+    // Only update when tree changes, otherwise link clicks toggle tree handleChanges changes
+    if (!_isEqual(toJS(tree), toJS(store.document.atlas.navigationTree))) {
+      store.updateNavigationTree(tree);
+    }
   }
 
   render() {
@@ -115,7 +119,7 @@ class DocumentScene extends React.Component {
               <div className={ styles.sidebar }>
                 <Tree
                   paddingLeft={10}
-                  tree={ doc.atlas.navigationTree }
+                  tree={ toJS(doc.atlas.navigationTree) }
                   onChange={this.handleChange}
                   isNodeCollapsed={this.isNodeCollapsed}
                   renderNode={this.renderNode}
diff --git a/src/scenes/DocumentScene/DocumentSceneStore.js b/src/scenes/DocumentScene/DocumentSceneStore.js
index 8d6eb17fd..ed4946943 100644
--- a/src/scenes/DocumentScene/DocumentSceneStore.js
+++ b/src/scenes/DocumentScene/DocumentSceneStore.js
@@ -51,6 +51,8 @@ const store = new class DocumentSceneStore {
         id: this.document.atlas.id,
         tree: tree,
       });
+      const { data } = res;
+      this.document.atlas = data;
     } catch (e) {
       console.error("Something went wrong");
     }