Merge pull request #114 from mitaai/blms/ui-tweaks

#106 Fix loading indicators and auto-remove alerts
mitaai · Dec 28, 2020 · affef45 · affef45
2 parents 88ac709 + 887470c
commit affef45
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 37 deletions.
diff --git a/src/components/Alerts/Alerts.js b/src/components/Alerts/Alerts.js
@@ -8,9 +8,17 @@ function Alerts({ alerts }) {
     for (let i = 0; i < alerts.length; i += 1) {
       if (!Object.keys(show).includes(`alert[${i}]`)) {
         alertsToAdd[`alert[${i}]`] = true;
+        setTimeout(() => {
+          alertsToAdd[`alert[${i}]`] = false;
+          setShow(
+            (prevState) => ({ ...prevState, ...alertsToAdd }),
+          );
+        }, 2000);
       }
     }
-    setShow((prevState) => ({ ...prevState, ...alertsToAdd }));
+    setShow(
+      (prevState) => ({ ...prevState, ...alertsToAdd }),
+    );
   }, [alerts]);
 
   return (

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, 10);
-          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, 10);
-          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/components/Dashboard/DashboardGroupList/DashboardGroupList.js b/src/components/Dashboard/DashboardGroupList/DashboardGroupList.js
@@ -12,8 +12,8 @@ const DashboardGroupList = ({
   const [groups, setGroups] = useState([]);
 
   useEffect(() => {
-    if (session && !deepEqual(session.user.groups.slice(0, 10), groups)) {
-      setGroups(session.user.groups.slice(0, 10));
+    if (session && !deepEqual(session.user.groups.slice(0, 7), groups)) {
+      setGroups(session.user.groups.slice(0, 7));
     }
   }, [session]);
 

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 (