From 1603d703c9ba7ba0e22453cee9dc331faaef976a Mon Sep 17 00:00:00 2001
From: Eduardo Oliveira <eduardoliveira2009@gmail.com>
Date: Fri, 8 Mar 2024 20:24:11 +0000
Subject: [PATCH] initial system events

---
 src/App.tsx                                   |  2 ++
 .../EventNotifications.tsx                    | 36 +++++++++++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 src/system/components/event-notifications/EventNotifications.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 42a6f7f..e97b3a5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,6 +8,7 @@ import { DashboardProvider } from './dashboard/provider/DashboardProvider.tsx';
 import { PrinterWidgetProvider } from './printers/providers/PrinterWidgetProvider.tsx';
 import { SSEProvider } from './core/sse/SSEProvider.tsx';
 import { SettingsProvider } from './core/settings/settingsProvider.tsx';
+import { EventNotifications } from './system/components/event-notifications/EventNotifications.tsx';
 
 export default function App() {
     const [opened, { toggle }] = useDisclosure();
@@ -40,6 +41,7 @@ export default function App() {
                     </AppShell>
                     <ScrollToTop />
                     <AxiosErrorHandler />
+                    <EventNotifications />
                     <PrinterWidgetProvider />
                 </DashboardProvider>
             </SSEProvider>
diff --git a/src/system/components/event-notifications/EventNotifications.tsx b/src/system/components/event-notifications/EventNotifications.tsx
new file mode 100644
index 0000000..fdd20ec
--- /dev/null
+++ b/src/system/components/event-notifications/EventNotifications.tsx
@@ -0,0 +1,36 @@
+import SSEContext from "@/core/sse/SSEContext";
+import { useId } from "@mantine/hooks";
+import { notifications } from "@mantine/notifications";
+import { useContext, useEffect, useState } from "react";
+
+export function EventNotifications() {
+    const subscriberId = useId();
+    const { connected, subscribe, unsubscribe } = useContext(SSEContext)
+    const [message, setMessage] = useState("")
+    const [error, setError] = useState<Error | null>(null);
+    useEffect(() => {
+        if (!connected) return;
+        setMessage("")
+        const subscription = {
+            subscriberId,
+            provider: `system/events`,
+        }
+        subscribe({
+            ...subscription,
+            event: `system.state`,
+            callback: setMessage
+        }).catch(setError);
+        return () => {
+            unsubscribe(subscriberId)
+        }
+    }, [connected])
+
+    useEffect(() => {
+        console.log(message)
+        notifications.show({
+            title: message,
+            message: message,
+        })
+    }, [message])
+    return (<></>)
+}
\ No newline at end of file