Deprecate old push 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/api/subscriptions.ts

@@ -1,6 +1,5 @@
 import { store } from "../store";
 // Actions to push received content
-import { pushNotification } from "services/notifications/actions";
 import { clearIsInstallingLog, updateIsInstallingLog } from "services/isInstallingLogs/actions";
 import { updateVolumes, setSystemInfo } from "services/dappnodeStatus/actions";
 import { setDnpInstalled } from "services/dnpInstalled/actions";
@@ -27,10 +26,6 @@ export function mapSubscriptionsToRedux(subscriptions: Subscriptions): void {
     else store.dispatch(updateIsInstallingLog({ id, dnpName, log }));
   });
 
-  subscriptions.pushNotification.on((notification) => {
-    store.dispatch(pushNotification(notification));
-  });
-
   subscriptions.systemInfo.on((systemInfo) => {
     store.dispatch(setSystemInfo(systemInfo));
   });

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

@@ -1,27 +1,35 @@
-import React, { useEffect } from "react";
-import { useSelector, useDispatch } from "react-redux";
-import BaseDropdown from "./BaseDropdown";
-import { getNotifications } from "services/notifications/selectors";
-import { viewedNotifications, fetchNotifications } from "services/notifications/actions";
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
 // Icons
 import { FaRegBell } from "react-icons/fa";
+import { useApi } from "api";
 
 export default function Notifications() {
-  const notifications = useSelector(getNotifications);
-  const dispatch = useDispatch();
+  const unseenNotificationsReq = useApi.notificationsGetUnseenCount();
+  const [newNotifications, setNewNotifications] = useState(false);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      unseenNotificationsReq.revalidate();
+    }, 60 * 1000); // Updates the new norifications "blue dot" every minute
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [unseenNotificationsReq]);
+
   useEffect(() => {
-    dispatch(fetchNotifications());
-  }, [dispatch]);
+    if (unseenNotificationsReq.data !== undefined && unseenNotificationsReq.data !== null) {
+      setNewNotifications(unseenNotificationsReq.data > 0);
+    }
+  }, [unseenNotificationsReq.data]);
 
   return (
-    <BaseDropdown
-      name="Notifications"
-      messages={notifications}
-      Icon={FaRegBell}
-      onClick={() => dispatch(viewedNotifications())}
-      moreVisible={true}
-      className={"notifications"}
-      placeholder="No notifications yet"
-    />
+    <div onClick={() => navigate("/notifications/inbox")} className="tn-dropdown tn-dropdown-toggle">
+      <FaRegBell size={"1.4em"} />
+      {newNotifications && <div className={`icon-bubble success`} />}
+    </div>
   );
 }

packages/admin-ui/src/components/topbar/dropdownMenus/dropdown.scss

@@ -84,9 +84,6 @@
   &.profile > .menu {
     right: -0.5rem;
   }
-  &.notifications > .menu {
-    right: -3.1rem;
-  }
   &.chainstatus > .menu {
     right: -5.6rem;
   }

packages/admin-ui/src/rootReducer.ts

@@ -7,7 +7,6 @@ import { reducer as dnpDirectory } from "services/dnpDirectory/reducer";
 import { reducer as dnpRegistry } from "services/dnpRegistry/reducer";
 import { reducer as dnpInstalled } from "services/dnpInstalled/reducer";
 import { reducer as isInstallingLogs } from "services/isInstallingLogs/reducer";
-import { reducer as notifications } from "services/notifications/reducer";
 
 export const rootReducer = combineReducers({
   coreUpdate,
@@ -16,7 +15,6 @@ export const rootReducer = combineReducers({
   dnpRegistry,
   dnpInstalled,
   isInstallingLogs,
-  notifications
 });
 
 export type RootState = ReturnType<typeof rootReducer>;

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: {},