From c4d8c07859e6c211ef88d436ad80e4da3be6e3f5 Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Sat, 21 Oct 2017 16:11:08 -0700
Subject: [PATCH] addressed comments and added time limit

---
 .../Layout/components/SidebarCollections.js   | 124 +++++++++---------
 frontend/models/Document.js                   |   6 +
 frontend/stores/DocumentsStore.js             |   5 +
 3 files changed, 75 insertions(+), 60 deletions(-)

diff --git a/frontend/components/Layout/components/SidebarCollections.js b/frontend/components/Layout/components/SidebarCollections.js
index 3d71e41ad..a40a2d0ea 100644
--- a/frontend/components/Layout/components/SidebarCollections.js
+++ b/frontend/components/Layout/components/SidebarCollections.js
@@ -20,6 +20,7 @@ import { type NavigationNode } from 'types';
 type Props = {
   history: Object,
   collections: CollectionsStore,
+  documents: DocumentsStore,
   activeDocument: ?Document,
   onCreateCollection: () => void,
   activeDocumentRef: HTMLElement => void,
@@ -36,6 +37,7 @@ type Props = {
       activeDocument,
       ui,
       activeDocumentRef,
+      documents,
     } = this.props;
 
     return (
@@ -48,6 +50,7 @@ type Props = {
             collection={collection}
             activeDocument={activeDocument}
             activeDocumentRef={activeDocumentRef}
+            prefetchDocument={documents.prefetchDocument}
             ui={ui}
           />
         ))}
@@ -77,6 +80,7 @@ type Props = {
       activeDocument,
       ui,
       activeDocumentRef,
+      prefetchDocument,
     } = this.props;
 
     return (
@@ -113,6 +117,7 @@ type Props = {
                   history={history}
                   document={document}
                   activeDocument={activeDocument}
+                  prefetchDocument={prefetchDocument}
                   depth={0}
                 />
               ))}
@@ -124,77 +129,76 @@ type Props = {
 }
 
 type DocumentLinkProps = {
-  documents: DocumentsStore,
   document: NavigationNode,
   history: Object,
   activeDocument: ?Document,
   activeDocumentRef: HTMLElement => void,
+  prefetchDocument: string => void,
   depth: number,
 };
 
-const DocumentLink = inject('documents')(
-  observer(
-    ({
-      documents,
-      document,
-      activeDocument,
-      activeDocumentRef,
-      depth,
-    }: DocumentLinkProps) => {
-      const isActiveDocument =
-        activeDocument && activeDocument.id === document.id;
-      const showChildren =
-        activeDocument &&
-        (activeDocument.pathToDocument
-          .map(entry => entry.id)
-          .includes(document.id) ||
-          isActiveDocument);
+const DocumentLink = observer(
+  ({
+    documents,
+    document,
+    activeDocument,
+    activeDocumentRef,
+    prefetchDocument,
+    depth,
+  }: DocumentLinkProps) => {
+    const isActiveDocument =
+      activeDocument && activeDocument.id === document.id;
+    const showChildren =
+      activeDocument &&
+      (activeDocument.pathToDocument
+        .map(entry => entry.id)
+        .includes(document.id) ||
+        isActiveDocument);
 
-      const handleMouseEnter = (event: SyntheticEvent) => {
-        event.stopPropagation();
-        event.preventDefault();
-        documents.prefetchDocument(document.id);
-      };
+    const handleMouseEnter = (event: SyntheticEvent) => {
+      event.stopPropagation();
+      event.preventDefault();
+      prefetchDocument(document.id);
+    };
 
-      return (
-        <Flex
-          column
-          key={document.id}
-          innerRef={isActiveDocument ? activeDocumentRef : undefined}
-          onMouseEnter={handleMouseEnter}
+    return (
+      <Flex
+        column
+        key={document.id}
+        innerRef={isActiveDocument ? activeDocumentRef : undefined}
+        onMouseEnter={handleMouseEnter}
+      >
+        <DropToImport
+          history={history}
+          documentId={document.id}
+          activeStyle="activeDropZone"
         >
-          <DropToImport
-            history={history}
-            documentId={document.id}
-            activeStyle="activeDropZone"
+          <SidebarLink
+            to={document.url}
+            hasChildren={document.children.length > 0}
+            expanded={showChildren}
           >
-            <SidebarLink
-              to={document.url}
-              hasChildren={document.children.length > 0}
-              expanded={showChildren}
-            >
-              {document.title}
-            </SidebarLink>
-          </DropToImport>
+            {document.title}
+          </SidebarLink>
+        </DropToImport>
 
-          {showChildren &&
-            <Children column>
-              {document.children &&
-                document.children.map(childDocument => (
-                  <DocumentLink
-                    key={childDocument.id}
-                    history={history}
-                    documents={documents}
-                    document={childDocument}
-                    activeDocument={activeDocument}
-                    depth={depth + 1}
-                  />
-                ))}
-            </Children>}
-        </Flex>
-      );
-    }
-  )
+        {showChildren &&
+          <Children column>
+            {document.children &&
+              document.children.map(childDocument => (
+                <DocumentLink
+                  key={childDocument.id}
+                  history={history}
+                  document={childDocument}
+                  activeDocument={activeDocument}
+                  prefetchDocument={prefetchDocument}
+                  depth={depth + 1}
+                />
+              ))}
+          </Children>}
+      </Flex>
+    );
+  }
 );
 
 const CollectionAction = styled.a`
@@ -230,4 +234,4 @@ const Children = styled(Flex)`
   margin-left: 20px;
 `;
 
-export default inject('collections', 'ui')(SidebarCollections);
+export default inject('collections', 'ui', 'documents')(SidebarCollections);
diff --git a/frontend/models/Document.js b/frontend/models/Document.js
index 4f4c760ef..b6a3455d5 100644
--- a/frontend/models/Document.js
+++ b/frontend/models/Document.js
@@ -40,6 +40,7 @@ class Document extends BaseModel {
   views: number;
 
   data: Object;
+  fetchedAt: Date;
 
   /* Computed */
 
@@ -101,6 +102,10 @@ class Document extends BaseModel {
       : null;
   }
 
+  get timeSinceFetch(): number {
+    return (new Date() - this.fetchedAt) / 1000;
+  }
+
   /* Actions */
 
   @action star = async () => {
@@ -252,6 +257,7 @@ class Document extends BaseModel {
 
     this.updateData(data);
     this.errors = stores.errors;
+    this.fetchedAt = new Date();
   }
 }
 
diff --git a/frontend/stores/DocumentsStore.js b/frontend/stores/DocumentsStore.js
index 9d30926a9..692ce14bb 100644
--- a/frontend/stores/DocumentsStore.js
+++ b/frontend/stores/DocumentsStore.js
@@ -116,6 +116,11 @@ class DocumentsStore extends BaseStore {
   };
 
   @action fetch = async (id: string, prefetch: boolean): Promise<*> => {
+    /** If document has been fetched under 5s ago, return it */
+    const existingDocument = this.getById(id);
+    if (existingDocument && existingDocument.timeSinceFetch < 5)
+      return existingDocument;
+
     if (!prefetch) this.isFetching = true;
 
     try {