From a4bc4663ef0d0e3c8950cf400c27ef6b444fb19f Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Sat, 13 May 2017 16:50:36 -0700
Subject: [PATCH] Separated Breadcrumbs into its own component

---
 .../scenes/DocumentScene/DocumentScene.js     |  3 +-
 .../components/Breadcrumbs/Breadcrumbs.js     | 36 +++++++++++++++++++
 .../components/Breadcrumbs/index.js           |  3 ++
 3 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 frontend/scenes/DocumentScene/components/Breadcrumbs/Breadcrumbs.js
 create mode 100644 frontend/scenes/DocumentScene/components/Breadcrumbs/index.js

diff --git a/frontend/scenes/DocumentScene/DocumentScene.js b/frontend/scenes/DocumentScene/DocumentScene.js
index def21887e..c23600af8 100644
--- a/frontend/scenes/DocumentScene/DocumentScene.js
+++ b/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';
 
@@ -202,7 +203,7 @@ class DocumentScene extends React.Component {
         </div>
       );
 
-      title = this.renderLayoutTitle();
+      title = <Breadcrumbs store={this.store} />;
       titleText = `${doc.collection.name} - ${doc.title}`;
     }
 
diff --git a/frontend/scenes/DocumentScene/components/Breadcrumbs/Breadcrumbs.js b/frontend/scenes/DocumentScene/components/Breadcrumbs/Breadcrumbs.js
new file mode 100644
index 000000000..adec66f13
--- /dev/null
+++ b/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;
diff --git a/frontend/scenes/DocumentScene/components/Breadcrumbs/index.js b/frontend/scenes/DocumentScene/components/Breadcrumbs/index.js
new file mode 100644
index 000000000..8fe21291d
--- /dev/null
+++ b/frontend/scenes/DocumentScene/components/Breadcrumbs/index.js
@@ -0,0 +1,3 @@
+// @flow
+import Breadcrumbs from './Breadcrumbs';
+export default Breadcrumbs;