Add null checks and loader icons

partio-scout · Jul 15, 2022 · 6a386ff · 6a386ff
1 parent 6cccc3d
commit 6a386ff
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 14 deletions.
diff --git a/src/components/LoadingSpinner.js b/src/components/LoadingSpinner.js
@@ -22,12 +22,14 @@ const CenteredContainer = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
+
+  ${({ fullHeight }) => (fullHeight ? 'height: 100vh;' : '')}
 `
 
 export const Spinner = () => <Loader />
 
-export const CenteredSpinner = () => (
-  <CenteredContainer>
+export const CenteredSpinner = (props) => (
+  <CenteredContainer {...props}>
     <Spinner />
   </CenteredContainer>
 )

diff --git a/src/helpers/groupTasks.js b/src/helpers/groupTasks.js
@@ -33,20 +33,24 @@ export const getMemberCompletedTasks = (member, mandatoryTasks) => {
  * @param itemsByGuid
  * @param completedTaskItems
  */
-export const getTaskGroupsWithItems = (itemsByGuid, completedTaskItems) =>
-  Object.values(itemsByGuid)
-    .filter((item) => item.type === 'TASK_GROUP' && item.item.activities.length)
-    .reduce((acc, item) => {
+export const getTaskGroupsWithItems = (itemsByGuid, completedTaskItems) => {
+  const getActivities = (item) =>
+    (item && item.item && item.item.activities) || []
+
+  return Object.values(itemsByGuid)
+    .filter((item) => item.type === 'TASK_GROUP' && getActivities(item).length)
+    .reduce((acc, taskGroup) => {
       const itemTasks = completedTaskItems.filter((task) => {
-        return item.item.activities.find((groupTask) => {
-          return getItemId(groupTask) === getItemId(task.item)
-        })
+        return getActivities(taskGroup).find(
+          (groupTask) => getItemId(groupTask) === getItemId(task.item)
+        )
       })
-      if (itemTasks.length) {
-        acc[getItemId(item.item)] = itemTasks
+      if (itemTasks.length && taskGroup.item) {
+        acc[getItemId(taskGroup.item)] = itemTasks
       }
       return acc
     }, {})
+}
 
 /**
  * Get the parent groups for a task group with the tasks array as the value for the last child group

diff --git a/src/views/Member/index.js b/src/views/Member/index.js
@@ -122,9 +122,20 @@ const Member = () => {
   const { groupId } = useParams()
   const { memberId } = useParams()
 
-  if (!groupsData) return null
-
-  if (!itemsByGuid || !translations) return null
+  if (
+    !groupsData ||
+    !itemsByGuid ||
+    !translations ||
+    Object.keys(itemsByGuid).length < 25
+  ) {
+    return (
+      <Background>
+        <Content>
+          <CenteredSpinner fullHeight />
+        </Content>
+      </Background>
+    )
+  }
 
   const group = groupsData.find(
     (groups) => groups.id.toString() === groupId.toString()