Add notification service

package.json

@@ -184,7 +184,7 @@
     "mousetrap": "^1.6.5",
     "node-stream-zip": "^1.15.0",
     "nodejs-traceroute": "2.0.0",
-    "notistack": "^3.0.0-alpha.2",
+    "notistack": "^3.0.1",
     "obs-websocket-js": "^5.0.1",
     "observable-fns": "^0.6.1",
     "os-name": "^5.1.0",

src/renderer/lib/hooks/use_toasts.ts

@@ -1,27 +1,6 @@
-import { useSnackbar } from "notistack";
-import React from "react";
+import { useServices } from "@/services";
 
 export const useToasts = () => {
-  const { enqueueSnackbar } = useSnackbar();
-  const toastHandlers = React.useMemo(
-    () => ({
-      showError: (error: Error | string | unknown) => {
-        let message: string;
-        if (error instanceof Error) {
-          message = error.message;
-        } else if (typeof error === "string") {
-          message = error;
-        } else {
-          message = JSON.stringify(error);
-        }
-        // Let's not automatically hide error messages
-        enqueueSnackbar(message, { variant: "error", persist: true });
-      },
-      showSuccess: (message: string) => enqueueSnackbar(message, { variant: "success", autoHideDuration: 2500 }),
-      showWarning: (message: string) => enqueueSnackbar(message, { variant: "warning" }),
-      showInfo: (message: string) => enqueueSnackbar(message, { variant: "info" }),
-    }),
-    [enqueueSnackbar],
-  );
-  return toastHandlers;
+  const { notificationService } = useServices();
+  return notificationService;
 };

src/renderer/services/install.ts

@@ -3,6 +3,7 @@ import { appVersion } from "@common/constants";
 
 import createAuthClient from "./auth/auth.service";
 import createDolphinClient from "./dolphin/dolphin.service";
+import createNotificationClient from "./notification/notification.service";
 import createReplayClient from "./replay/replay.service";
 import createSlippiClient from "./slippi/slippi.service";
 import type { Services } from "./types";
@@ -18,6 +19,7 @@ export async function installServices(): Promise<Services> {
     dolphinService,
     `${appVersion}${isDevelopment ? "-dev" : ""}`,
   );
+  const notificationService = createNotificationClient();
 
   const broadcastService = window.electron.broadcast;
   const consoleService = window.electron.console;
@@ -29,5 +31,6 @@ export async function installServices(): Promise<Services> {
     broadcastService,
     consoleService,
     replayService,
+    notificationService,
   };
 }

src/renderer/services/notification/notification.service.ts

@@ -0,0 +1,23 @@
+import { enqueueSnackbar } from "notistack";
+
+import type { NotificationService } from "./types";
+
+export default function createNotificationClient(): NotificationService {
+  return {
+    showError: (error: Error | string | unknown) => {
+      let message: string;
+      if (error instanceof Error) {
+        message = error.message;
+      } else if (typeof error === "string") {
+        message = error;
+      } else {
+        message = JSON.stringify(error);
+      }
+      // Let's not automatically hide error messages
+      enqueueSnackbar(message, { variant: "error", persist: true });
+    },
+    showSuccess: (message: string) => enqueueSnackbar(message, { variant: "success", autoHideDuration: 2500 }),
+    showWarning: (message: string) => enqueueSnackbar(message, { variant: "warning" }),
+    showInfo: (message: string) => enqueueSnackbar(message, { variant: "info" }),
+  };
+}

src/renderer/services/notification/types.ts

@@ -0,0 +1,6 @@
+export interface NotificationService {
+  showError: (error: Error | string | unknown) => void;
+  showSuccess: (message: string) => void;
+  showWarning: (message: string) => void;
+  showInfo: (message: string) => void;
+}

src/renderer/services/types.ts

@@ -4,6 +4,7 @@ import type { DolphinService } from "@dolphin/types";
 import type { ReplayService } from "@replays/types";
 
 import type { AuthService } from "./auth/types";
+import type { NotificationService } from "./notification/types";
 import type { SlippiBackendService } from "./slippi/types";
 
 export type Services = {
@@ -13,4 +14,5 @@ export type Services = {
   broadcastService: BroadcastService;
   consoleService: ConsoleService;
   replayService: ReplayService;
+  notificationService: NotificationService;
 };