From e0401ed88a9f6d17b88d5710df680d4cbb7d1a66 Mon Sep 17 00:00:00 2001
From: GB27247 <148772006+GB27247@users.noreply.github.com>
Date: Tue, 24 Oct 2023 15:04:35 +0000
Subject: [PATCH 1/3] Remove bubble when no reviews

---
 frontend/src/wrapper/SideNavigation.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/wrapper/SideNavigation.tsx b/frontend/src/wrapper/SideNavigation.tsx
index 7b3536386..3df519dc2 100644
--- a/frontend/src/wrapper/SideNavigation.tsx
+++ b/frontend/src/wrapper/SideNavigation.tsx
@@ -147,12 +147,12 @@ export default function SideNavigation({
                   <ListItemIcon>
                     {!drawerOpen ? (
                       <Tooltip title='Review' arrow placement='right'>
-                        <Badge badgeContent={reviewCount} color='secondary'>
+                        <Badge badgeContent={reviewCount} color='secondary' invisible={reviewCount == 0}>
                           <ListAltIcon />
                         </Badge>
                       </Tooltip>
                     ) : (
-                      <Badge badgeContent={reviewCount} color='secondary'>
+                      <Badge badgeContent={reviewCount} color='secondary' invisible={reviewCount == 0}>
                         <ListAltIcon />
                       </Badge>
                     )}

From a4ea36260f2fdeafc1c2a9618a896b73680dd00d Mon Sep 17 00:00:00 2001
From: GB27247 <148772006+GB27247@users.noreply.github.com>
Date: Wed, 25 Oct 2023 08:19:46 +0000
Subject: [PATCH 2/3] Define strict equality in boolean expression

---
 frontend/src/wrapper/SideNavigation.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/wrapper/SideNavigation.tsx b/frontend/src/wrapper/SideNavigation.tsx
index 3df519dc2..c157aa6f6 100644
--- a/frontend/src/wrapper/SideNavigation.tsx
+++ b/frontend/src/wrapper/SideNavigation.tsx
@@ -80,7 +80,7 @@ export default function SideNavigation({
   toggleDrawer,
   currentUser,
 }: SideNavigationProps) {
-  const [reviewCount, setReviewCount] = useState(0)
+  const [reviewCount, setReviewCount] = useState('')
 
   const theme = useTheme()
 
@@ -91,7 +91,7 @@ export default function SideNavigation({
   }, [])
 
   async function fetchReviewCount() {
-    setReviewCount((await getReviewCount()).headers.get('x-count') as unknown as number)
+    setReviewCount((await getReviewCount()).headers.get('x-count') as string)
   }
 
   return (
@@ -147,12 +147,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>
                     )}

From 19ea1e4c4c9b43cab04a20c27b8fb03e1fe32bfe Mon Sep 17 00:00:00 2001
From: GB27247 <148772006+GB27247@users.noreply.github.com>
Date: Wed, 25 Oct 2023 14:32:24 +0000
Subject: [PATCH 3/3] Add snackbar for null response

---
 frontend/src/wrapper/SideNavigation.tsx | 29 ++++++++++++++++++-------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/frontend/src/wrapper/SideNavigation.tsx b/frontend/src/wrapper/SideNavigation.tsx
index c157aa6f6..3f30eaf26 100644
--- 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>
                     )}