From 42d646c16f2ab77a897b6f975db7d78047dc6478 Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Sun, 25 Jun 2017 16:26:28 -0700
Subject: [PATCH] Expose child document in sidebar

---
 frontend/components/Layout/Layout.js          |  5 +-
 .../SidebarCollection/SidebarCollection.js    | 48 +++++++++++++------
 frontend/scenes/Document/Document.js          |  2 +-
 frontend/scenes/Document/DocumentStore.js     |  2 +-
 frontend/stores/UiStore.js                    | 20 +++++---
 5 files changed, 53 insertions(+), 24 deletions(-)

diff --git a/frontend/components/Layout/Layout.js b/frontend/components/Layout/Layout.js
index 302dbbb6..2af7ef18 100644
--- a/frontend/components/Layout/Layout.js
+++ b/frontend/components/Layout/Layout.js
@@ -59,7 +59,7 @@ type Props = {
   };
 
   render() {
-    const { user, auth, ui, collections } = this.props;
+    const { user, auth, ui } = this.props;
 
     return (
       <Container column auto>
@@ -112,7 +112,8 @@ type Props = {
                 <LinkSection>
                   {ui.activeCollection
                     ? <SidebarCollection
-                        collection={collections.getById(ui.activeCollection)}
+                        document={ui.activeDocument}
+                        collection={ui.activeCollection}
                       />
                     : <SidebarCollectionList />}
                 </LinkSection>
diff --git a/frontend/components/Layout/components/SidebarCollection/SidebarCollection.js b/frontend/components/Layout/components/SidebarCollection/SidebarCollection.js
index de6a1244..c6fa15f9 100644
--- a/frontend/components/Layout/components/SidebarCollection/SidebarCollection.js
+++ b/frontend/components/Layout/components/SidebarCollection/SidebarCollection.js
@@ -9,24 +9,40 @@ import SidebarLink from '../SidebarLink';
 import Collection from 'models/Collection';
 
 type Props = {
-  collection: Collection,
+  collection: ?Collection,
+  document: ?Document,
 };
 
-const SidebarCollection = ({ collection }: Props) => {
-  if (collection) {
-    return (
-      <Flex column>
-        <Header>{collection.name}</Header>
-        {collection.documents.map(document => (
-          <SidebarLink key={document.id} to={document.url}>
-            {document.title}
-          </SidebarLink>
-        ))}
+class SidebarCollection extends React.Component {
+  props: Props;
+
+  renderDocuments(documentList) {
+    return documentList.map(document => (
+      <Flex column key={document.id}>
+        <SidebarLink key={document.id} to={document.url}>
+          {document.title}
+        </SidebarLink>
+        <Children>
+          {document.children && this.renderDocuments(document.children)}
+        </Children>
       </Flex>
-    );
+    ));
   }
-  return null;
-};
+
+  render() {
+    const { collection } = this.props;
+
+    if (collection) {
+      return (
+        <Flex column>
+          <Header>{collection.name}</Header>
+          {this.renderDocuments(collection.documents)}
+        </Flex>
+      );
+    }
+    return null;
+  }
+}
 
 const Header = styled(Flex)`
   font-size: 11px;
@@ -36,4 +52,8 @@ const Header = styled(Flex)`
   letter-spacing: 0.04em;
 `;
 
+const Children = styled(Flex)`
+  margin-left: 20px;
+`;
+
 export default observer(SidebarCollection);
diff --git a/frontend/scenes/Document/Document.js b/frontend/scenes/Document/Document.js
index 22111f0e..c9f47e8a 100644
--- a/frontend/scenes/Document/Document.js
+++ b/frontend/scenes/Document/Document.js
@@ -73,7 +73,7 @@ type Props = {
   }
 
   componentWillUnmount() {
-    this.props.ui.clearActiveCollection();
+    this.props.ui.clearActiveDocument();
   }
 
   onEdit = () => {
diff --git a/frontend/scenes/Document/DocumentStore.js b/frontend/scenes/Document/DocumentStore.js
index 1772e5dd..7088e27c 100644
--- a/frontend/scenes/Document/DocumentStore.js
+++ b/frontend/scenes/Document/DocumentStore.js
@@ -119,7 +119,7 @@ class DocumentStore {
         this.parentDocument = res.data;
       } else {
         this.document = res.data;
-        this.ui.setActiveCollection(this.document.collection.id);
+        this.ui.setActiveDocument(res.data);
       }
     } catch (e) {
       console.error('Something went wrong');
diff --git a/frontend/stores/UiStore.js b/frontend/stores/UiStore.js
index 4a3bb7aa..74068d0d 100644
--- a/frontend/stores/UiStore.js
+++ b/frontend/stores/UiStore.js
@@ -1,18 +1,26 @@
 // @flow
-import { observable, action } from 'mobx';
+import { observable, action, computed } from 'mobx';
+import type { Document } from 'types';
+import Collection from 'models/Collection';
 
 class UiStore {
-  @observable activeCollection: ?string;
+  @observable activeDocument: ?Document;
   @observable editMode: boolean = false;
 
+  /* Computed */
+
+  @computed get activeCollection(): ?Collection {
+    return this.activeDocument ? this.activeDocument.collection : undefined;
+  }
+
   /* Actions */
 
-  @action setActiveCollection = (id: string): void => {
-    this.activeCollection = id;
+  @action setActiveDocument = (document: Document): void => {
+    this.activeDocument = document;
   };
 
-  @action clearActiveCollection = (): void => {
-    this.activeCollection = null;
+  @action clearActiveDocument = (): void => {
+    this.activeDocument = undefined;
   };
 
   @action enableEditMode() {