Merge branch 'master' into inputs

frontend/components/Editor/Editor.js

@@ -117,7 +117,7 @@ type KeyData = {
         <Editor
           key={this.props.starred}
           ref={ref => (this.editor = ref)}
-          placeholder="Start with a title…"
+          placeholder="Start with a title..."
           className={cx(styles.editor, { readOnly: this.props.readOnly })}
           schema={this.schema}
           plugins={this.plugins}

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

@@ -7,26 +7,49 @@ import styled from 'styled-components';
 import SidebarLink from '../SidebarLink';
 
 import Collection from 'models/Collection';
+import Document from 'models/Document';
 
 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}
+class SidebarCollection extends React.Component {
+  props: Props;
+
+  renderDocuments(documentList) {
+    const { document } = this.props;
+
+    if (document) {
+      return documentList.map(doc => (
+        <Flex column key={doc.id}>
+          <SidebarLink key={doc.id} to={doc.url}>
+            {doc.title}
           </SidebarLink>
-        ))}
-      </Flex>
-    );
+          {(document.pathToDocument.includes(doc.id) ||
+            document.id === doc.id) &&
+            <Children>
+              {doc.children && this.renderDocuments(doc.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 +59,8 @@ const Header = styled(Flex)`
   letter-spacing: 0.04em;
 `;
 
+const Children = styled(Flex)`
+  margin-left: 20px;
+`;
+
 export default observer(SidebarCollection);

frontend/components/Layout/components/SidebarLink/SidebarLink.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { observer } from 'mobx-react';
-import { NavLink } from 'react-router-dom';
+import { NavLink, withRouter } from 'react-router-dom';
 import { Flex } from 'reflexbox';
 import styled from 'styled-components';
 
@@ -9,11 +9,20 @@ const activeStyle = {
   color: '#000000',
 };
 
-const SidebarLink = observer(props => (
-  <LinkContainer>
-    <NavLink {...props} activeStyle={activeStyle} />
-  </LinkContainer>
-));
+@observer class SidebarLink extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    // Navlink is having issues updating, forcing update on URL changes
+    return this.props.match !== nextProps.match;
+  }
+
+  render() {
+    return (
+      <LinkContainer>
+        <NavLink exact {...this.props} activeStyle={activeStyle} />
+      </LinkContainer>
+    );
+  }
+}
 
 const LinkContainer = styled(Flex)`
   padding: 5px 0;
@@ -23,4 +32,4 @@ const LinkContainer = styled(Flex)`
   }
 `;
 
-export default SidebarLink;
+export default withRouter(SidebarLink);