From 3ecca38d9e06f831ca8e69fb00a7e1ae407b6462 Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Sat, 13 May 2017 15:36:06 -0700
Subject: [PATCH] Build the full navigation tree for document in header

---
 .../scenes/DocumentScene/DocumentScene.js     | 29 ++++++++++++++-----
 .../DocumentScene/DocumentSceneStore.js       | 27 ++++++++++++++++-
 frontend/types/index.js                       | 10 ++++++-
 3 files changed, 57 insertions(+), 9 deletions(-)

diff --git a/frontend/scenes/DocumentScene/DocumentScene.js b/frontend/scenes/DocumentScene/DocumentScene.js
index 31ebecc0a..3bda986c8 100644
--- a/frontend/scenes/DocumentScene/DocumentScene.js
+++ b/frontend/scenes/DocumentScene/DocumentScene.js
@@ -146,6 +146,26 @@ class DocumentScene extends React.Component {
     }
   };
 
+  renderLayoutTitle() {
+    const { document, pathToDocument } = this.store;
+    if (document && document.collection) {
+      const titleSections = pathToDocument
+        ? pathToDocument.map(node => <Link to={node.url}>{node.title}</Link>)
+        : [];
+      titleSections.unshift(
+        <Link to={document.collection.url}>{document.collection.name}</Link>
+      );
+
+      return (
+        <span>
+          &nbsp;/&nbsp;
+          {titleSections.reduce((prev, curr) => [prev, ' / ', curr])}
+          {` / ${document.title}`}
+        </span>
+      );
+    }
+  }
+
   render() {
     const { sidebar } = this.props.ui;
 
@@ -177,13 +197,8 @@ class DocumentScene extends React.Component {
           </DropdownMenu>
         </div>
       );
-      title = (
-        <span>
-          &nbsp;/&nbsp;
-          <Link to={doc.collection.url}>{doc.collection.name}</Link>
-          {` / ${doc.title}`}
-        </span>
-      );
+
+      title = this.renderLayoutTitle();
       titleText = `${doc.collection.name} - ${doc.title}`;
     }
 
diff --git a/frontend/scenes/DocumentScene/DocumentSceneStore.js b/frontend/scenes/DocumentScene/DocumentSceneStore.js
index d1d6ff64e..40ee36e64 100644
--- a/frontend/scenes/DocumentScene/DocumentSceneStore.js
+++ b/frontend/scenes/DocumentScene/DocumentSceneStore.js
@@ -11,7 +11,11 @@ import {
   autorunAsync,
 } from 'mobx';
 import { client } from 'utils/ApiClient';
-import type { Document as DocumentType, Collection } from 'types';
+import type {
+  Document as DocumentType,
+  Collection,
+  NavigationNode,
+} from 'types';
 
 const DOCUMENT_PREFERENCES = 'DOCUMENT_PREFERENCES';
 
@@ -54,6 +58,27 @@ class DocumentSceneStore {
     }
   }
 
+  @computed get pathToDocument(): ?Array<NavigationNode> {
+    let path;
+    const traveler = (node, previousPath) => {
+      if (this.document && node.id === this.document.id) {
+        path = previousPath;
+        return;
+      } else {
+        node.children.forEach(childNode => {
+          const newPath = [...previousPath, node];
+          return traveler(childNode, newPath);
+        });
+      }
+    };
+
+    if (this.document && this.collectionTree) {
+      traveler(this.collectionTree, []);
+      invariant(path, 'Path is not available for collection, abort');
+      return path.splice(1);
+    }
+  }
+
   /* Actions */
 
   @action fetchDocument = async (
diff --git a/frontend/types/index.js b/frontend/types/index.js
index 17eadbbb4..ac6ad6947 100644
--- a/frontend/types/index.js
+++ b/frontend/types/index.js
@@ -11,13 +11,21 @@ export type Team = {
   name: string,
 };
 
+export type NavigationNode = {
+  id: string,
+  title: string,
+  url: string,
+  collapsed: boolean,
+  children: Array<NavigationNode>,
+};
+
 export type Collection = {
   createdAt: string,
   description: ?string,
   id: string,
   name: string,
   type: 'atlas' | 'journal',
-  navigationTree: Object, // TODO
+  navigationTree: NavigationNode,
   updatedAt: string,
   url: string,
 };