From c20282de0685354ac3171f1d174479d6a360704f Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sun, 22 Dec 2019 17:06:39 -0800
Subject: [PATCH] feat: Add child document preloading

---
 .../Sidebar/components/DocumentLink.js        | 33 ++++++++++++++++---
 app/stores/DocumentsStore.js                  | 12 +++++++
 2 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/app/components/Sidebar/components/DocumentLink.js b/app/components/Sidebar/components/DocumentLink.js
index d3840f2ec..36b1c589f 100644
--- a/app/components/Sidebar/components/DocumentLink.js
+++ b/app/components/Sidebar/components/DocumentLink.js
@@ -27,6 +27,20 @@ type Props = {
 class DocumentLink extends React.Component<Props> {
   @observable menuOpen = false;
 
+  componentDidMount() {
+    if (this.isActiveDocument() && this.hasChildDocuments()) {
+      this.props.documents.fetchChildDocuments(this.props.node.id);
+    }
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps.activeDocument !== this.props.activeDocument) {
+      if (this.isActiveDocument() && this.hasChildDocuments()) {
+        this.props.documents.fetchChildDocuments(this.props.node.id);
+      }
+    }
+  }
+
   handleMouseEnter = (ev: SyntheticEvent<>) => {
     const { node, prefetchDocument } = this.props;
 
@@ -35,6 +49,17 @@ class DocumentLink extends React.Component<Props> {
     prefetchDocument(node.id);
   };
 
+  isActiveDocument = () => {
+    return (
+      this.props.activeDocument &&
+      this.props.activeDocument.id === this.props.node.id
+    );
+  };
+
+  hasChildDocuments = () => {
+    return !!this.props.node.children.length;
+  };
+
   render() {
     const {
       node,
@@ -46,7 +71,6 @@ class DocumentLink extends React.Component<Props> {
       depth,
     } = this.props;
 
-    const isActiveDocument = activeDocument && activeDocument.id === node.id;
     const showChildren = !!(
       activeDocument &&
       collection &&
@@ -54,16 +78,15 @@ class DocumentLink extends React.Component<Props> {
         .pathToDocument(activeDocument)
         .map(entry => entry.id)
         .includes(node.id) ||
-        isActiveDocument)
+        this.isActiveDocument())
     );
-    const hasChildren = !!node.children.length;
     const document = documents.get(node.id);
 
     return (
       <Flex
         column
         key={node.id}
-        ref={isActiveDocument ? activeDocumentRef : undefined}
+        ref={this.isActiveDocument() ? activeDocumentRef : undefined}
         onMouseEnter={this.handleMouseEnter}
       >
         <DropToImport documentId={node.id} activeClassName="activeDropZone">
@@ -92,7 +115,7 @@ class DocumentLink extends React.Component<Props> {
               )
             }
           >
-            {hasChildren && (
+            {this.hasChildDocuments() && (
               <DocumentChildren column>
                 {node.children.map(childNode => (
                   <DocumentLink
diff --git a/app/stores/DocumentsStore.js b/app/stores/DocumentsStore.js
index f7d4f3869..81e33d65f 100644
--- a/app/stores/DocumentsStore.js
+++ b/app/stores/DocumentsStore.js
@@ -171,6 +171,18 @@ export default class DocumentsStore extends BaseStore<Document> {
     );
   }
 
+  @action
+  fetchChildDocuments = async (documentId: string): Promise<?(Document[])> => {
+    const res = await client.post(`/documents.list`, {
+      parentDocumentId: documentId,
+    });
+    invariant(res && res.data, 'Document list not available');
+    const { data } = res;
+    runInAction('DocumentsStore#fetchChildDocuments', () => {
+      data.forEach(this.add);
+    });
+  };
+
   @action
   fetchNamedPage = async (
     request: string = 'list',