From a5449951e8aacb43195c9a179732003ea65b75fb Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Fri, 5 Jan 2024 13:39:25 -0800
Subject: [PATCH] changed ref handling, some minor changes in the service

---
 teachertool/src/components/MakecodeFrame.tsx  | 19 ++++---------------
 .../src/services/makecodeEditorService.ts     |  4 +++-
 2 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/teachertool/src/components/MakecodeFrame.tsx b/teachertool/src/components/MakecodeFrame.tsx
index 7e6eb4a3c756..25e3faaf5b82 100644
--- 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 */
 }
\ No newline at end of file
diff --git a/teachertool/src/services/makecodeEditorService.ts b/teachertool/src/services/makecodeEditorService.ts
index 4fe4dfd9dfe1..bd1dceeec27b 100644
--- 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);