Fix notifications not deleting due to old API, add notification badge support

src/components/AppLayout/AppLayout.tsx

@@ -53,7 +53,11 @@ import { Notification } from "../../types/Notification";
 import { sendNotificationRequest } from "../../utilities/notifications";
 import { withSnackbar } from "notistack";
 import { getConfig, getUserDefaultBool } from "../../utilities/settings";
-import { isDesktopApp, isDarwinApp } from "../../utilities/desktop";
+import {
+    isDesktopApp,
+    isDarwinApp,
+    getElectronApp
+} from "../../utilities/desktop";
 import { Config } from "../../types/Config";
 
 interface IAppLayoutState {
@@ -139,6 +143,11 @@ export class AppLayout extends Component<any, IAppLayoutState> {
         this.streamListener.on("notification", (notif: Notification) => {
             const notificationCount = this.state.notificationCount + 1;
             this.setState({ notificationCount });
+
+            if (isDesktopApp()) {
+                getElectronApp().setBadgeCount(notificationCount);
+            }
+
             if (!document.hasFocus()) {
                 let primaryMessage = "";
                 let secondaryMessage = "";
@@ -238,6 +247,10 @@ export class AppLayout extends Component<any, IAppLayoutState> {
         if (!getUserDefaultBool("displayAllOnNotificationBadge")) {
             this.setState({ notificationCount: 0 });
         }
+
+        if (isDesktopApp() && getElectronApp().getBadgeCount() > 0) {
+            getElectronApp().setBadgeCount(0);
+        }
     }
 
     titlebar() {

src/pages/Notifications.tsx

@@ -110,7 +110,7 @@ class NotificationsPage extends Component<any, INotificationsPageState> {
 
     removeNotification(id: string) {
         this.client
-            .post("/notifications/dismiss", { id: id })
+            .post(`/notifications/${id}/dismiss`)
             .then((resp: any) => {
                 let notifications = this.state.notifications;
                 if (notifications !== undefined && notifications.length > 0) {

src/pages/PageLayout.styles.tsx

@@ -156,16 +156,16 @@ export const styles = (theme: Theme) =>
         pageProfileNameEmoji: {
             minHeight: theme.typography.h4.fontSize,
             fontWeight: theme.typography.fontWeightMedium,
-            '& img': {
-                height: theme.typography.h4.fontSize,
+            "& img": {
+                height: theme.typography.h4.fontSize
             }
         },
         pageProfileBioEmoji: {
-            height: '0.875rem',
-            '& img': {
-                height: '0.875rem',
+            height: "0.875rem",
+            "& img": {
+                height: "0.875rem",
                 paddingLeft: 4,
-                paddingRight: 4,
+                paddingRight: 4
             }
         },
         pageProfileStatsDiv: {

src/utilities/desktop.tsx

@@ -29,3 +29,12 @@ export function isDarkMode() {
     const { remote } = eWin.require("electron");
     return remote.systemPreferences.isDarkMode();
 }
+
+/**
+ * Get the app component from the desktop app
+ */
+export function getElectronApp() {
+    const eWin = window as ElectronWindow;
+    const { remote } = eWin.require("electron");
+    return remote.app;
+}