From cab35c4c304c8a5778d6c7c3d4de3a1b8d060733 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Mon, 28 Dec 2020 12:34:40 -0500
Subject: [PATCH] #106 Loading handlers for dashboard and docs

---
 .../DashboardAnnotationList.js                | 28 +++++++++-------
 .../DashboardDocumentList.js                  | 28 +++++++++-------
 src/components/DocumentList/DocumentList.js   |  3 ++
 src/pages/documents/index.jsx                 | 33 +++++++++++--------
 4 files changed, 54 insertions(+), 38 deletions(-)

diff --git a/src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.js b/src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.js
index 479e4cf3..8eb118ec 100644
--- a/src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.js
+++ b/src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.js
@@ -28,24 +28,23 @@ const DashboardAnnotationList = ({
       if (session && (session.user.groups || session.user.id)) {
         if (key === 'shared') {
           if (session.user.groups && session.user.groups.length > 0) {
-            setAnnotations(
-              await getSharedAnnotations(session.user.groups, limit)
-                .then(setListLoading(false))
-                .catch((err) => setAlerts([...alerts, { text: err.message, variant: 'danger' }])),
-            );
+            const annos = await getSharedAnnotations(session.user.groups, limit);
+            setAnnotations(annos);
           } else {
             setAnnotations([]);
           }
         } else if (key === 'mine') {
-          setAnnotations(
-            await getOwnAnnotations(session.user.id, limit)
-              .then(setListLoading(false))
-              .catch((err) => setAlerts([...alerts, { text: err.message, variant: 'danger' }])),
-          );
+          const annos = await getOwnAnnotations(session.user.id, limit);
+          setAnnotations(annos);
         }
       }
     }
-    fetchData();
+    fetchData()
+      .then(setListLoading(false))
+      .catch((err) => {
+        setAlerts([...alerts, { text: err.message, variant: 'danger' }]);
+        setListLoading(false);
+      });
   }, [key]);
 
 
@@ -81,7 +80,12 @@ const DashboardAnnotationList = ({
           transition={false}
           style={{ justifyContent: 'flex-end', float: 'right', marginTop: '-2rem' }}
           activeKey={key}
-          onSelect={(k) => setKey(k)}
+          onSelect={(k) => {
+            if (k !== key) {
+              setListLoading(true);
+            }
+            setKey(k);
+          }}
         >
           <Tab eventKey="shared" title="Shared" />
           <Tab eventKey="mine" title="Mine" />
diff --git a/src/components/Dashboard/DashboardDocumentList/DashboardDocumentList.js b/src/components/Dashboard/DashboardDocumentList/DashboardDocumentList.js
index af2c51a1..516501bd 100644
--- a/src/components/Dashboard/DashboardDocumentList/DashboardDocumentList.js
+++ b/src/components/Dashboard/DashboardDocumentList/DashboardDocumentList.js
@@ -23,21 +23,20 @@ const DashboardDocumentList = ({
     async function fetchData() {
       if (session && (session.user.groups || session.user.id)) {
         if (key === 'shared') {
-          setDocuments(
-            await getSharedDocumentsByGroup(session.user.groups, 10)
-              .then(setListLoading(false))
-              .catch((err) => setAlerts([...alerts, { text: err.message, variant: 'danger' }])),
-          );
+          const docs = await getSharedDocumentsByGroup(session.user.groups, 10);
+          setDocuments(docs);
         } else if (key === 'mine') {
-          setDocuments(
-            await getDocumentsByUser(session.user.id, 10)
-              .then(setListLoading(false))
-              .catch((err) => setAlerts([...alerts, { text: err.message, variant: 'danger' }])),
-          );
+          const docs = await getDocumentsByUser(session.user.id, 10);
+          setDocuments(docs);
         }
       }
     }
-    fetchData();
+    fetchData()
+      .then(setListLoading(false))
+      .catch((err) => {
+        setAlerts([...alerts, { text: err.message, variant: 'danger' }]);
+        setListLoading(false);
+      });
   }, [key]);
 
 
@@ -66,7 +65,12 @@ const DashboardDocumentList = ({
           transition={false}
           style={{ justifyContent: 'flex-end', float: 'right', marginTop: '-2rem' }}
           activeKey={key}
-          onSelect={(k) => setKey(k)}
+          onSelect={(k) => {
+            if (k !== key) {
+              setListLoading(true);
+            }
+            setKey(k);
+          }}
         >
           <Tab eventKey="shared" title="Shared" />
           <Tab eventKey="mine" title="Mine" />
diff --git a/src/components/DocumentList/DocumentList.js b/src/components/DocumentList/DocumentList.js
index 00d2fc33..c7c55d0b 100644
--- a/src/components/DocumentList/DocumentList.js
+++ b/src/components/DocumentList/DocumentList.js
@@ -23,6 +23,7 @@ const DocumentList = ({
   documents,
   setDocuments,
   loading,
+  setLoading,
   userId,
   alerts,
   setAlerts,
@@ -163,6 +164,7 @@ const DocumentList = ({
                         handleCloseModal={handleCloseModal}
                         show={showModal === document._id}
                         onClick={(event) => {
+                          setLoading(true);
                           event.target.setAttribute('disabled', 'true');
                           deleteDocumentById(document._id).then(() => {
                             setDocuments(documents.filter((d) => d._id !== document._id));
@@ -172,6 +174,7 @@ const DocumentList = ({
                             }]);
                           }).catch((err) => {
                             setAlerts([...alerts, { text: err.message, variant: 'danger' }]);
+                            setLoading(false);
                           });
                           handleCloseModal();
                         }}
diff --git a/src/pages/documents/index.jsx b/src/pages/documents/index.jsx
index 81013a45..3544663d 100644
--- a/src/pages/documents/index.jsx
+++ b/src/pages/documents/index.jsx
@@ -23,26 +23,25 @@ const DocumentsIndex = ({
     async function fetchData() {
       if (session && (session.user.groups || session.user.id)) {
         if (key === 'shared') {
-          setDocuments(
-            await getSharedDocumentsByGroup(session.user.groups)
-              .then(setListLoading(false))
-              .catch((err) => setAlerts([{ text: err.message, variant: 'danger' }])),
-          );
+          const docs = await getSharedDocumentsByGroup(session.user.groups);
+          setDocuments(docs);
         } else if (key === 'mine') {
-          setDocuments(
-            await getDocumentsByUser(session.user.id)
-              .then(setListLoading(false))
-              .catch((err) => setAlerts([{ text: err.message, variant: 'danger' }])),
-          );
+          const docs = await getDocumentsByUser(session.user.id);
+          setDocuments(docs);
         }
       }
     }
-    fetchData();
+    fetchData()
+      .then(setListLoading(false))
+      .catch((err) => {
+        setAlerts([{ text: err.message, variant: 'danger' }]);
+        setListLoading(false);
+      });
   }, [session, key]);
 
   return (
     <Layout alerts={alerts} type="document" statefulSession={statefulSession}>
-      {loading && !session && (
+      {((loading && !session) || listLoading) && (
       <Card>
         <Card.Header>
           <Card.Title>
@@ -54,7 +53,7 @@ const DocumentsIndex = ({
         </Card.Body>
       </Card>
       )}
-      {!loading && session && (
+      {!loading && session && !listLoading && (
       <Card>
         <Card.Header>
           <Card.Title>
@@ -67,7 +66,12 @@ const DocumentsIndex = ({
             id="document-list-tabs"
             style={{ justifyContent: 'flex-end', marginBottom: '0', marginRight: '0' }}
             activeKey={key}
-            onSelect={(k) => setKey(k)}
+            onSelect={(k) => {
+              if (k !== key) {
+                setListLoading(true);
+              }
+              setKey(k);
+            }}
           >
             <Tab eventKey="shared" title="Shared" />
             <Tab eventKey="mine" title="Mine" />
@@ -79,6 +83,7 @@ const DocumentsIndex = ({
               alerts={alerts}
               setAlerts={setAlerts}
               loading={listLoading}
+              setLoading={setListLoading}
               userId={session.user.id}
             />
           )}