From 8cc02e9e3450ebead812301b86356680f445dd9a Mon Sep 17 00:00:00 2001 From: Ben Silverman Date: Mon, 28 Dec 2020 13:22:26 -0500 Subject: [PATCH 1/3] #106 Alert timeout after 2s --- src/components/Alerts/Alerts.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/Alerts/Alerts.js b/src/components/Alerts/Alerts.js index 29fae4dc..52dce471 100644 --- 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 ( From 7bc20fe3f0881a88c528daf9a00e228611a44fbf Mon Sep 17 00:00:00 2001 From: Ben Silverman Date: Mon, 28 Dec 2020 13:28:29 -0500 Subject: [PATCH 2/3] #106 Lower limit for documents and groups on dash --- .../Dashboard/DashboardDocumentList/DashboardDocumentList.js | 4 ++-- .../Dashboard/DashboardGroupList/DashboardGroupList.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Dashboard/DashboardDocumentList/DashboardDocumentList.js b/src/components/Dashboard/DashboardDocumentList/DashboardDocumentList.js index 55a8d2e2..f8f31022 100644 --- a/src/components/Dashboard/DashboardDocumentList/DashboardDocumentList.js +++ b/src/components/Dashboard/DashboardDocumentList/DashboardDocumentList.js @@ -23,10 +23,10 @@ const DashboardDocumentList = ({ async function fetchData() { if (session && (session.user.groups || session.user.id)) { if (key === 'shared') { - const docs = await getSharedDocumentsByGroup(session.user.groups, 10); + const docs = await getSharedDocumentsByGroup(session.user.groups, 7); setDocuments(docs); } else if (key === 'mine') { - const docs = await getDocumentsByUser(session.user.id, 10); + const docs = await getDocumentsByUser(session.user.id, 7); setDocuments(docs); } } diff --git a/src/components/Dashboard/DashboardGroupList/DashboardGroupList.js b/src/components/Dashboard/DashboardGroupList/DashboardGroupList.js index 1a035046..3ab08721 100644 --- 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]); From 887470c14262045d5767dd2543be76d8f41d4b13 Mon Sep 17 00:00:00 2001 From: Ben Silverman Date: Mon, 28 Dec 2020 13:40:30 -0500 Subject: [PATCH 3/3] #106 Fix loading indication in useEffects --- .../DashboardAnnotationList.js | 29 ++++++++++------ .../DashboardDocumentList.js | 33 +++++++++++-------- src/pages/documents/index.jsx | 29 ++++++++++------ 3 files changed, 57 insertions(+), 34 deletions(-) diff --git a/src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.js b/src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.js index 3f4eb8bc..f8ed86ae 100644 --- 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 index f8f31022..4ea0a9ab 100644 --- 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 = ({ )} - {!listLoading && (!documents || documents.length === 0) && ( + {!listLoading && documents && documents.length === 0 && ( {`You have no ${key === 'shared' ? key : 'created'} documents.`} diff --git a/src/pages/documents/index.jsx b/src/pages/documents/index.jsx index 3544663d..916610c3 100644 --- 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 (