Add snackbar for null response

gchq · Oct 25, 2023 · 19ea1e4 · 19ea1e4
1 parent a4ea362
commit 19ea1e4
Showing 1 changed file with 21 additions and 8 deletions.
diff --git a/frontend/src/wrapper/SideNavigation.tsx b/frontend/src/wrapper/SideNavigation.tsx
@@ -25,6 +25,7 @@ import { CSSProperties, useEffect, useState } from 'react'
 import { getReviewCount } from '../../actions/review'
 import { User } from '../../types/types'
 import { DRAWER_WIDTH } from '../../utils/constants'
+import useNotification from '../common/Snackbar'
 import Link from '../Link'
 
 const StyledList = styled(List)(({ theme }) => ({
@@ -80,19 +81,31 @@ export default function SideNavigation({
   toggleDrawer,
   currentUser,
 }: SideNavigationProps) {
-  const [reviewCount, setReviewCount] = useState('')
+  const [reviewCount, setReviewCount] = useState(0)
+
+  const sendNotification = useNotification()
 
   const theme = useTheme()
 
   // We should add some error handling here, such as an error message appearing in a snackbar
   // Additional error messages should be added for screen-readers
   useEffect(() => {
-    fetchReviewCount()
-  }, [])
+    async function fetchReviewCount() {
+      const response = (await getReviewCount()).headers.get('x-count')
+      if (response === null) {
+        sendNotification({
+          variant: 'error',
+          msg: 'Response was null, number expected',
+          anchorOrigin: { horizontal: 'center', vertical: 'bottom' },
+        })
+        setReviewCount(0)
+        return
+      }
 
-  async function fetchReviewCount() {
-    setReviewCount((await getReviewCount()).headers.get('x-count') as string)
-  }
+      setReviewCount(parseInt(response))
+    }
+    fetchReviewCount()
+  }, [sendNotification])
 
   return (
     <Drawer sx={pageTopStyling} variant='permanent' open={drawerOpen}>
@@ -147,12 +160,12 @@ export default function SideNavigation({
                   <ListItemIcon>
                     {!drawerOpen ? (
                       <Tooltip title='Review' arrow placement='right'>
-                        <Badge badgeContent={reviewCount} color='secondary' invisible={reviewCount === '0'}>
+                        <Badge badgeContent={reviewCount} color='secondary' invisible={reviewCount === 0}>
                           <ListAltIcon />
                         </Badge>
                       </Tooltip>
                     ) : (
-                      <Badge badgeContent={reviewCount} color='secondary' invisible={reviewCount === '0'}>
+                      <Badge badgeContent={reviewCount} color='secondary' invisible={reviewCount === 0}>
                         <ListAltIcon />
                       </Badge>
                     )}