#106 Fix loading indication in useEffects

mitaai · Dec 28, 2020 · 887470c · 887470c
1 parent 7bc20fe
commit 887470c
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 34 deletions.
diff --git a/src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.js b/src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.js
@@ -28,23 +28,32 @@ const DashboardAnnotationList = ({
       if (session && (session.user.groups || session.user.id)) {
         if (key === 'shared') {
           if (session.user.groups && session.user.groups.length > 0) {
-            const annos = await getSharedAnnotations(session.user.groups, limit);
-            setAnnotations(annos);
+            await getSharedAnnotations(session.user.groups, limit)
+              .then((annos) => {
+                setAnnotations(annos);
+                setListLoading(false);
+              })
+              .catch((err) => {
+                setAlerts([...alerts, { text: err.message, variant: 'danger' }]);
+                setListLoading(false);
+              });
           } else {
             setAnnotations([]);
           }
         } else if (key === 'mine') {
-          const annos = await getOwnAnnotations(session.user.id, limit);
-          setAnnotations(annos);
+          await getOwnAnnotations(session.user.id, limit)
+            .then((annos) => {
+              setAnnotations(annos);
+              setListLoading(false);
+            })
+            .catch((err) => {
+              setAlerts([...alerts, { text: err.message, variant: 'danger' }]);
+              setListLoading(false);
+            });
         }
       }
     }
-    fetchData()
-      .then(setListLoading(false))
-      .catch((err) => {
-        setAlerts([...alerts, { text: err.message, variant: 'danger' }]);
-        setListLoading(false);
-      });
+    fetchData();
   }, [key]);
 
 

diff --git a/src/components/Dashboard/DashboardDocumentList/DashboardDocumentList.js b/src/components/Dashboard/DashboardDocumentList/DashboardDocumentList.js
@@ -22,21 +22,29 @@ const DashboardDocumentList = ({
   useEffect(() => {
     async function fetchData() {
       if (session && (session.user.groups || session.user.id)) {
+        setListLoading(true);
         if (key === 'shared') {
-          const docs = await getSharedDocumentsByGroup(session.user.groups, 7);
-          setDocuments(docs);
+          await getSharedDocumentsByGroup(session.user.groups, 7)
+            .then((docs) => {
+              setDocuments(docs);
+              setListLoading(false);
+            }).catch((err) => {
+              setAlerts([...alerts, { text: err.message, variant: 'danger' }]);
+              setListLoading(false);
+            });
         } else if (key === 'mine') {
-          const docs = await getDocumentsByUser(session.user.id, 7);
-          setDocuments(docs);
+          await getDocumentsByUser(session.user.id, 7)
+            .then((docs) => {
+              setDocuments(docs);
+              setListLoading(false);
+            }).catch((err) => {
+              setAlerts([...alerts, { text: err.message, variant: 'danger' }]);
+              setListLoading(false);
+            });
         }
       }
     }
-    fetchData()
-      .then(setListLoading(false))
-      .catch((err) => {
-        setAlerts([...alerts, { text: err.message, variant: 'danger' }]);
-        setListLoading(false);
-      });
+    fetchData();
   }, [key]);
 
 
@@ -69,9 +77,6 @@ const DashboardDocumentList = ({
           style={{ justifyContent: 'flex-end', float: 'right', marginTop: '-2rem' }}
           activeKey={key}
           onSelect={(k) => {
-            if (k !== key) {
-              setListLoading(true);
-            }
             setKey(k);
           }}
         >
@@ -116,7 +121,7 @@ const DashboardDocumentList = ({
         </ListGroup.Item>
       </ListGroup>
       )}
-      {!listLoading && (!documents || documents.length === 0) && (
+      {!listLoading && documents && documents.length === 0 && (
         <Card.Body>
           {`You have no ${key === 'shared' ? key : 'created'} documents.`}
         </Card.Body>

diff --git a/src/pages/documents/index.jsx b/src/pages/documents/index.jsx
@@ -23,20 +23,29 @@ const DocumentsIndex = ({
     async function fetchData() {
       if (session && (session.user.groups || session.user.id)) {
         if (key === 'shared') {
-          const docs = await getSharedDocumentsByGroup(session.user.groups);
-          setDocuments(docs);
+          await getSharedDocumentsByGroup(session.user.groups)
+            .then((docs) => {
+              setDocuments(docs);
+              setListLoading(false);
+            })
+            .catch((err) => {
+              setAlerts([...alerts, { text: err.message, variant: 'danger' }]);
+              setListLoading(false);
+            });
         } else if (key === 'mine') {
-          const docs = await getDocumentsByUser(session.user.id);
-          setDocuments(docs);
+          await getDocumentsByUser(session.user.id)
+            .then((docs) => {
+              setDocuments(docs);
+              setListLoading(false);
+            })
+            .catch((err) => {
+              setAlerts([...alerts, { text: err.message, variant: 'danger' }]);
+              setListLoading(false);
+            });
         }
       }
     }
-    fetchData()
-      .then(setListLoading(false))
-      .catch((err) => {
-        setAlerts([{ text: err.message, variant: 'danger' }]);
-        setListLoading(false);
-      });
+    fetchData();
   }, [session, key]);
 
   return (