From 9e6693da6c3cda1dce968c320f683d4c8763d32a Mon Sep 17 00:00:00 2001
From: Dinh Long Nguyen <dinhlongviolin1@gmail.com>
Date: Wed, 28 Feb 2024 18:03:49 +0700
Subject: [PATCH] add onNotify for frontend decouple (#896)

---
 frontend/taipy-gui/base/src/app.ts   | 12 ++++++++++++
 frontend/taipy-gui/base/src/utils.ts |  8 ++++++++
 2 files changed, 20 insertions(+)

diff --git a/frontend/taipy-gui/base/src/app.ts b/frontend/taipy-gui/base/src/app.ts
index 9abf8312a3..9fb1c04dde 100644
--- a/frontend/taipy-gui/base/src/app.ts
+++ b/frontend/taipy-gui/base/src/app.ts
@@ -8,11 +8,13 @@ import { initSocket } from "./utils";
 
 export type OnInitHandler = (appManager: TaipyApp) => void;
 export type OnChangeHandler = (appManager: TaipyApp, encodedName: string, value: unknown) => void;
+export type OnNotifyHandler = (appManager: TaipyApp, type: string, message: string) => void;
 
 export class TaipyApp {
     socket: Socket;
     _onInit: OnInitHandler | undefined;
     _onChange: OnChangeHandler | undefined;
+    _onNotify: OnNotifyHandler | undefined;
     variableData: DataManager | undefined;
     functionData: DataManager | undefined;
     appId: string;
@@ -60,6 +62,16 @@ export class TaipyApp {
         this._onChange = handler;
     }
 
+    get onNotify() {
+        return this._onNotify;
+    }
+    set onNotify(handler: OnNotifyHandler | undefined) {
+        if (handler !== undefined && handler?.length !== 3) {
+            throw new Error("onNotify() requires three parameters");
+        }
+        this._onNotify = handler;
+    }
+
     // Utility methods
     init() {
         this.clientId = "";
diff --git a/frontend/taipy-gui/base/src/utils.ts b/frontend/taipy-gui/base/src/utils.ts
index b313894fcb..3744f3e381 100644
--- a/frontend/taipy-gui/base/src/utils.ts
+++ b/frontend/taipy-gui/base/src/utils.ts
@@ -9,6 +9,11 @@ interface MultipleUpdatePayload {
     payload: { value: unknown };
 }
 
+interface AlertMessage extends WsMessage {
+    atype: string;
+    message: string;
+}
+
 const initWsMessageTypes = ["ID", "AID", "GMC"];
 
 export const initSocket = (socket: Socket, appManager: TaipyApp) => {
@@ -82,6 +87,9 @@ const processWsMessage = (message: WsMessage, appManager: TaipyApp) => {
                 return appManager.init();
             }
             appManager.appId = payload.id as string;
+        } else if (message.type === "AL" && appManager.onNotify) {
+            const payload = message as AlertMessage;
+            appManager.onNotify(appManager, payload.atype, payload.message);
         }
         postWsMessageProcessing(message, appManager);
     }