update: act depending on action and send corect message

Exabyte-io · Mar 15, 2024 · 2434f65 · 2434f65
1 parent 2f0fadc
commit 2434f65
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 10 deletions.
diff --git a/src/other/jupyterlite/JupyterLiteSession.tsx b/src/other/jupyterlite/JupyterLiteSession.tsx
@@ -9,7 +9,7 @@ interface JupyterLiteSessionProps {
     messageHandler?: MessageHandler;
 }
 
-const defaultProps: Partial<JupyterLiteSessionProps> = {
+const defaultProps: JupyterLiteSessionProps = {
     // eslint-disable-next-line react/default-props-match-prop-types
     originURL: "https://jupyterlite.mat3ra.com",
     // eslint-disable-next-line react/default-props-match-prop-types
@@ -20,9 +20,13 @@ class JupyterLiteSession extends React.Component<JupyterLiteSessionProps> {
     // eslint-disable-next-line react/static-property-placement
     static defaultProps = defaultProps;
 
+    constructor(props: JupyterLiteSessionProps = defaultProps) {
+        super(props);
+    }
+
     componentDidMount() {
-        const { messageHandler, originURL } = this.props;
-        messageHandler?.init(originURL);
+        const { messageHandler, originURL, frameId } = this.props;
+        messageHandler?.init(originURL, frameId);
     }
 
     componentWillUnmount() {

diff --git a/src/other/jupyterlite/MessageHandler.ts b/src/other/jupyterlite/MessageHandler.ts
@@ -1,7 +1,6 @@
 import { IframeMessageSchema } from "@mat3ra/esse/lib/js/types";
 
-// Define a type for the handler functions
-type HandlerFunction = (data?: any, variableName?: string) => void;
+type HandlerFunction = (...args: any[]) => void | any;
 
 // Define a type for the handler map
 type HandlersMap = {
@@ -13,9 +12,12 @@ class MessageHandler {
 
     private originURL = "*";
 
-    public init(originURL: string): void {
+    private frameId = "";
+
+    public init(originURL: string, frameId: string): void {
         window.addEventListener("message", this.receiveMessage);
         this.originURL = originURL;
+        this.frameId = frameId;
     }
 
     public destroy(): void {
@@ -40,24 +42,31 @@ class MessageHandler {
             // @ts-ignore
             if (this.handlers[action]) {
                 // @ts-ignore
-                this.handlers[action].forEach((handler) => {
+                this.handlers["set-data"].forEach((handler) => {
                     handler(event.data.payload.data, event.data.payload.variableName);
                 });
+                this.handlers["get-data"].forEach((handler) => {
+                    const data = handler(event.data.payload.variableName);
+                    this.sendData(data, event.data.payload.variableName);
+                });
             }
         }
     };
 
     public sendData(data: any, variableName = "data"): void {
-        const message: IframeMessageSchema = {
+        const message = {
             type: "from-host-to-iframe",
             payload: {
                 action: "set-data",
                 data,
                 variableName,
             },
         };
-
-        window.parent.postMessage(message, this.originURL);
+        const iframe = document.getElementById(this.frameId);
+        if (iframe) {
+            // @ts-ignore
+            iframe.contentWindow.postMessage(message, this.originURL);
+        }
     }
 }