Merge pull request #107 from kthcloud/beta

Fix notification badge
kthcloud · Nov 22, 2023 · 27e011a · 27e011a
2 parents 58919d4 + f7215d4
commit 27e011a
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/src/contexts/ResourceContext.jsx b/src/contexts/ResourceContext.jsx
@@ -35,6 +35,7 @@ export const ResourceContextProvider = ({ children }) => {
   const [jobs, setJobs] = useState([]);
   const [user, setUser] = useState(null);
   const [notifications, setNotifications] = useState([]);
+  const [unread, setUnread] = useState(0);
   const [teams, setTeams] = useState([]);
   const [zones, setZones] = useState([]);
   const [initialLoad, setInitialLoad] = useState(false);
@@ -127,6 +128,15 @@ export const ResourceContextProvider = ({ children }) => {
     try {
       const notifications = await getNotifications(keycloak.token);
       setNotifications(notifications);
+
+      let u = 0;
+      notifications.forEach((n) => {
+        if (!n.readAt) {
+          u++;
+        }
+      });
+
+      setUnread(u);
     } catch (error) {
       errorHandler(error).forEach((e) =>
         enqueueSnackbar("Error fetching notifications: " + e, {
@@ -245,6 +255,8 @@ export const ResourceContextProvider = ({ children }) => {
         setUser,
         notifications,
         setNotifications,
+        unread,
+        setUnread,
         teams,
         setTeams,
         zones,

diff --git a/src/layouts/dashboard/Menu.jsx b/src/layouts/dashboard/Menu.jsx
@@ -25,7 +25,7 @@ export default function Menu() {
 
   const [open, setOpen] = useState(null);
 
-  const { notifications } = useResource();
+  const { unread } = useResource();
 
   const handleOpen = (event) => {
     setOpen(event.currentTarget);
@@ -129,11 +129,7 @@ export default function Menu() {
                     component={RouterLink}
                     onClick={handleClose}
                   >
-                    {t("inbox") +
-                      " " +
-                      (notifications.length > 0
-                        ? "(" + notifications.length + ")"
-                        : "")}
+                    {t("inbox") + " " + (unread > 0 ? "(" + unread + ")" : "")}
                   </MenuItem>
                   <MenuItem
                     to={"/teams"}

diff --git a/src/layouts/dashboard/ProfileButton.jsx b/src/layouts/dashboard/ProfileButton.jsx
@@ -14,7 +14,7 @@ import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
 const ProfileButton = () => {
-  const { user, notifications } = useResource();
+  const { user, unread } = useResource();
   const [userAvatar, setUserAvatar] = useState(null);
   const [hasFetched, setHasFetched] = useState(false);
   const { t } = useTranslation();
@@ -66,7 +66,7 @@ const ProfileButton = () => {
             component={Link}
             to="/inbox"
           >
-            {`${t("inbox")} (${notifications?.length})`}
+            {`${t("inbox")} (${unread})`}
           </Button>
           <Button
             startIcon={<Iconify icon="mdi:account-group" />}
@@ -80,8 +80,8 @@ const ProfileButton = () => {
       }
     >
       <Badge
-        invisible={notifications?.length === 0}
-        badgeContent={notifications.length}
+        invisible={unread === 0}
+        badgeContent={unread}
         color="primary"
         sx={{
           display: {