"Blue dot" on Notifications

packages/admin-ui/src/__mock-backend__/index.ts

@@ -390,6 +390,7 @@ export const otherCalls: Omit<Routes, keyof typeof namedSpacedCalls> = {
   notificationsGetAllEndpoints: async () => {
     return { "geth.dnp.dappnode.eth": { endpoints: [], customEndpoints: [], isCore: false } };
   },
+  notificationsGetUnseenCount: async () => 2,
   notificationsUpdateEndpoints: async () => {},
   notificationsGetAll: async () => [],
   notificationsApplyPreviousEndpoints: async () => {

packages/admin-ui/src/components/topbar/dropdownMenus/Notifications.tsx

@@ -3,19 +3,28 @@ import { useNavigate } from "react-router-dom";
 
 // Icons
 import { FaRegBell } from "react-icons/fa";
+import { useApi } from "api";
 
 export default function Notifications() {
+  const unseenNotificationsReq = useApi.notificationsGetUnseenCount();
   const [newNotifications, setNewNotifications] = useState(false);
-
   const navigate = useNavigate();
 
-  //TODO: Check notifier endpoint that returns if there are new notifications, and set newNotifications state
   useEffect(() => {
-    console.log("Notifications check");
-    setInterval(() => {
-      console.log("Notifications check");
-    }, 30000);
-  }, []);
+    const interval = setInterval(() => {
+      unseenNotificationsReq.revalidate();
+    }, 60 * 1000); // Updates the new norifications "blue dot" every minute
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [unseenNotificationsReq]);
+
+  useEffect(() => {
+    if (unseenNotificationsReq.data !== undefined && unseenNotificationsReq.data !== null) {
+      setNewNotifications(unseenNotificationsReq.data > 0);
+    }
+  }, [unseenNotificationsReq.data]);
 
   return (
     <div onClick={() => navigate("/notifications/inbox")} className="tn-dropdown tn-dropdown-toggle">

packages/dappmanager/src/calls/index.ts

@@ -22,7 +22,7 @@ export { getCoreVersion } from "./getCoreVersion.js";
 export { getUserActionLogs } from "./getUserActionLogs.js";
 export { getHostUptime } from "./getHostUptime.js";
 export { getIsConnectedToInternet } from "./getIsConnectedToInternet.js";
-export { notificationsGetAllEndpoints, notificationsUpdateEndpoints, notificationsGetAll, notificationsApplyPreviousEndpoints } from "./notifications.js";
+export { notificationsGetAllEndpoints, notificationsUpdateEndpoints, notificationsGetAll, notificationsApplyPreviousEndpoints, notificationsGetUnseenCount } from "./notifications.js";
 export * from "./httpsPortal.js";
 export { ipfsTest } from "./ipfsTest.js";
 export { ipfsClientTargetSet } from "./ipfsClientTargetSet.js";

packages/dappmanager/src/calls/notifications.ts

@@ -9,6 +9,13 @@ export async function notificationsGetAll(): Promise<Notification[]> {
   return await notifications.getAllNotifications();
 }
 
+/**
+ * Get unseen notifications count
+ */
+export async function notificationsGetUnseenCount(): Promise<number> {
+  return await notifications.getUnseenNotificationsCount();
+}
+
 /**
  * Get gatus and custom endpoints indexed by dnpName
  */

packages/notifications/src/api.ts

@@ -27,6 +27,13 @@ export class NotificationsApi {
     return await (await fetch(new URL("/api/v1/notifications", `${this.rootUrl}:8080`).toString())).json();
   }
 
+  /**
+   * Get the count of unseen notifications
+   */
+  async getUnseenNotificationsCount(): Promise<{unseenCount: number}> {
+    return await (await fetch(new URL("/api/v1/notifications/unseen", `${this.rootUrl}:8080`).toString())).json();          
+  }
+
   /**
    * Trigger reload of endpoint to make changes effective
    */

packages/notifications/src/index.ts

@@ -25,6 +25,13 @@ class Notifications {
     return await this.api.getAllNotifications();
   }
 
+  /**
+   * Get the count of unseen notifications
+   */
+  async getUnseenNotificationsCount(): Promise<number> {
+    return (await this.api.getUnseenNotificationsCount()).unseenCount;
+  }
+
   /**
    * Get gatus and custom endpoints indexed by dnpName
    */

packages/types/src/routes.ts

@@ -266,6 +266,11 @@ export interface Routes {
    * Get all the notifications
    */
   notificationsGetAll(): Promise<Notification[]>;
+
+  /**
+   * Get unseen notifications count
+   */
+  notificationsGetUnseenCount(): Promise<number>;
 
   /**
    * Gatus get endpoints
@@ -722,6 +727,7 @@ export const routesData: { [P in keyof Routes]: RouteData } = {
   fetchRegistry: {},
   fetchDnpRequest: {},
   notificationsGetAll: { log: true },
+  notificationsGetUnseenCount: { log: true },
   notificationsGetAllEndpoints: { log: true },
   notificationsUpdateEndpoints: { log: true },
   notificationsApplyPreviousEndpoints: {},