Expose child document in sidebar

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>

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) => {
+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>
+    ));
+  }
+
+  render() {
+    const { collection } = this.props;
+
     if (collection) {
       return (
         <Flex column>
           <Header>{collection.name}</Header>
-        {collection.documents.map(document => (
+          {this.renderDocuments(collection.documents)}
-          <SidebarLink key={document.id} to={document.url}>
-            {document.title}
-          </SidebarLink>
-        ))}
         </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);

frontend/scenes/Document/Document.js

@@ -73,7 +73,7 @@ type Props = {
   }
 
   componentWillUnmount() {
-    this.props.ui.clearActiveCollection();
+    this.props.ui.clearActiveDocument();
   }
 
   onEdit = () => {

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');

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 => {
+  @action setActiveDocument = (document: Document): void => {
-    this.activeCollection = id;
+    this.activeDocument = document;
   };
 
-  @action clearActiveCollection = (): void => {
+  @action clearActiveDocument = (): void => {
-    this.activeCollection = null;
+    this.activeDocument = undefined;
   };
 
   @action enableEditMode() {