Merge pull request #47 from jorilallo/jori/path-to-document

Build the full navigation tree for document in header (fixes #17)

frontend/scenes/DocumentScene/DocumentScene.js

@@ -17,6 +17,7 @@ import Document from 'components/Document';
 import DropdownMenu, { MenuItem, MoreIcon } from 'components/DropdownMenu';
 import { Flex } from 'reflexbox';
 import Sidebar from './components/Sidebar';
+import Breadcrumbs from './components/Breadcrumbs';
 
 import styles from './DocumentScene.scss';
 
@@ -177,13 +178,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 = <Breadcrumbs store={this.store} />;
       titleText = `${doc.collection.name} - ${doc.title}`;
     }
 

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 (

frontend/scenes/DocumentScene/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,36 @@
+// @flow
+import React from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router';
+import type { Document, NavigationNode } from 'types';
+import DocumentSceneStore from '../../DocumentSceneStore';
+
+type Props = {
+  store: DocumentSceneStore,
+};
+
+const Breadcrumbs = ({ store }: Props) => {
+  const { document, pathToDocument } = store;
+  if (document && document.collection) {
+    const titleSections = pathToDocument
+      ? pathToDocument.map(node => (
+          <Link key={node.id} to={node.url}>{node.title}</Link>
+        ))
+      : [];
+    titleSections.unshift(
+      <Link key={document.collection.id} to={document.collection.url}>
+        {document.collection.name}
+      </Link>
+    );
+
+    return (
+      <span>
+        &nbsp;/&nbsp;
+        {titleSections.reduce((prev, curr) => [prev, ' / ', curr])}
+        {` / ${document.title}`}
+      </span>
+    );
+  }
+};
+
+export default Breadcrumbs;

frontend/scenes/DocumentScene/components/Breadcrumbs/index.js

@@ -0,0 +1,3 @@
+// @flow
+import Breadcrumbs from './Breadcrumbs';
+export default Breadcrumbs;

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,
 };