changed ref handling, some minor changes in the service

microsoft · Jan 5, 2024 · a544995 · a544995
1 parent 30d3a19
commit a544995
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 16 deletions.
diff --git a/teachertool/src/components/MakecodeFrame.tsx b/teachertool/src/components/MakecodeFrame.tsx
@@ -1,6 +1,5 @@
 /// <reference path="../../../built/pxteditor.d.ts" />
 import * as React from "react";
-import { useEffect, useRef } from "react";
 import { setEditorRef } from "../services/makecodeEditorService";
 interface MakeCodeFrameProps {
     pageSourceUrl: string;
@@ -10,23 +9,13 @@ interface MakeCodeFrameProps {
 export const MakeCodeFrame: React.FC<MakeCodeFrameProps> =
     ( { pageSourceUrl} ) => {
 
-    let frameRef = useRef<HTMLIFrameElement>(null);
-
-    useEffect(() => {
-        if (frameRef.current) {
-            setEditorRef(frameRef.current);
-        } else {
-            setEditorRef(null);
-        }
-
-        return () => {
-            setEditorRef(null);
-        }
-    }, []);
+    const handleIFrameRef = (el: HTMLIFrameElement | null) => {
+        setEditorRef(el ?? undefined);
+    }
 
     /* eslint-disable @microsoft/sdl/react-iframe-missing-sandbox */
     return <div className="makecode-frame-outer" style={{ display: "block" }}>
-        <iframe className="makecode-frame" src={pageSourceUrl} title={"title"} ref={frameRef}></iframe>
+        <iframe className="makecode-frame" src={pageSourceUrl} title={"title"} ref={handleIFrameRef}></iframe>
     </div>
     /* eslint-enable @microsoft/sdl/react-iframe-missing-sandbox */
 }
diff --git a/teachertool/src/services/makecodeEditorService.ts b/teachertool/src/services/makecodeEditorService.ts
@@ -16,6 +16,8 @@ const onMessageReceived = (event: MessageEvent) => {
         delete pendingMessages[data.id];
         return;
     }
+
+    console.log("Received message from MakeCode:", data);
 }
 
 export const sendMessageAsync = (message?: any) => {
@@ -40,7 +42,7 @@ export const sendMessageAsync = (message?: any) => {
     });
 }
 
-export const setEditorRef = (ref: HTMLIFrameElement | null) => {
+export const setEditorRef = (ref: HTMLIFrameElement | undefined) => {
     if (ref) {
         makecodeEditorRef = ref;
         window.addEventListener("message", onMessageReceived);