From e971ebd15b1a0e2fbbf786859817c6b9dd045990 Mon Sep 17 00:00:00 2001
From: Kai Vandivier <kpvandivier@gmail.com>
Date: Mon, 3 Feb 2025 20:30:52 +0100
Subject: [PATCH] refactor: clean up

---
 services/plugin/src/Plugin.tsx | 74 ++++++++++++----------------------
 1 file changed, 26 insertions(+), 48 deletions(-)

diff --git a/services/plugin/src/Plugin.tsx b/services/plugin/src/Plugin.tsx
index 50801a8d..112f34c4 100644
--- a/services/plugin/src/Plugin.tsx
+++ b/services/plugin/src/Plugin.tsx
@@ -89,11 +89,6 @@ export const Plugin = ({
             appShortName: pluginShortName,
         })
 
-    const [communicationReceived, setCommunicationReceived] =
-        useState<boolean>(false)
-    const [prevCommunicationReceived, setPrevCommunicationReceived] =
-        useState<boolean>(false)
-
     const [inErrorState, setInErrorState] = useState<boolean>(false)
     // These are height and width values to be set by callbacks passed to the
     // plugin (these default sizes will be quickly overwritten by the plugin).
@@ -118,35 +113,30 @@ export const Plugin = ({
         /* eslint-enable react-hooks/exhaustive-deps */
     )
 
-    const prevSrcRef = useRef(pluginEntryPoint)
-    const commsReceivedRef = useRef(false)
+    // Used to track changes to the plugin source
+    const prevEntryPointRef = useRef(pluginEntryPoint)
+    // Becomes `true` when we get the first message from a plugin, so we know
+    // it's ready to send messages to
+    const communicationReceivedRef = useRef(false)
 
+    // If plugin source changes, reset communicationReceived so new listeners
+    // can be set up on the new window. This also helps avoid sending prop
+    // updates meant for the new window to the old one
     useEffect(() => {
-        // ! old:
-        // setCommunicationReceived(false)
-
-        if (pluginEntryPoint !== prevSrcRef.current) {
-            console.log('resetting comms received', {
-                pluginEntryPoint,
-                prevSrc: prevSrcRef.current,
-            })
-            commsReceivedRef.current = false
-            prevSrcRef.current = pluginEntryPoint
+        if (pluginEntryPoint !== prevEntryPointRef.current) {
+            communicationReceivedRef.current = false
+            prevEntryPointRef.current = pluginEntryPoint
         }
     }, [pluginEntryPoint])
 
+    // Set up communication listeners: if we haven't gotten a message from the
+    // plugin, set up a listener for its request for initial props. If we have
+    // received communication from the plugin, then on any props update, we can
+    // send them to the plugin
     useEffect(() => {
         if (!iframeRef.current) {
             return
         }
-        // if communicationReceived switches from false to true, the props have been sent
-        // const prevCommunication = prevCommunicationReceived
-        // setPrevCommunicationReceived(communicationReceived)
-        // if (prevCommunication === false && communicationReceived === true) {
-        //     return
-        // }
-
-        console.log('no-comms-received-version')
 
         const iframeProps = {
             ...memoizedPropsToPass,
@@ -158,42 +148,30 @@ export const Plugin = ({
             setPluginHeight: !height ? setPluginHeight : null,
             setPluginWidth: !width && clientWidth ? setPluginWidth : null,
             setInErrorState,
-            // Not really needed -- the 'initial props' listener will persist
-            // for when the plugin will reload
-            // setCommunicationReceived,
             clientWidth,
         }
 
-        // if iframe has not sent initial request, set up a listener
-        if (!commsReceivedRef.current && !inErrorState) {
+        // If iframe has not sent initial request, set up a listener
+        // (this will still be set up if plugin needs to reload)
+        if (!communicationReceivedRef.current && !inErrorState) {
             const listener = postRobot.on(
                 'getPropsFromParent',
                 // listen for messages coming only from the iframe rendered by this component
                 { window: iframeRef.current.contentWindow },
                 (): any => {
-                    console.log('sending initial props')
-
-                    // ! old
-                    // setCommunicationReceived(true)
-
-                    commsReceivedRef.current = true
+                    communicationReceivedRef.current = true
                     return iframeProps
                 }
             )
             return () => listener.cancel()
         }
 
-        // if iframe has sent initial request, send new props
+        // If iframe has sent initial request, send new props
         if (
-            commsReceivedRef.current &&
+            communicationReceivedRef.current &&
             iframeRef.current.contentWindow &&
             !inErrorState
         ) {
-            console.log('sending updated props', {
-                pluginEntryPoint,
-                iframeProps,
-                iframeSrc: iframeRef.current.src,
-            })
             postRobot
                 .send(iframeRef.current.contentWindow, 'updated', iframeProps)
                 .catch((err) => {
@@ -201,14 +179,14 @@ export const Plugin = ({
                     console.error(err)
                 })
         }
-        // prevCommunicationReceived update should not retrigger this hook
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         memoizedPropsToPass,
-        // communicationReceived,
         inErrorState,
+        // The following should be pretty stable:
         alertsAdd,
-        pluginEntryPoint,
+        clientWidth,
+        height,
+        width,
     ])
 
     if (data && !pluginEntryPoint) {
@@ -227,7 +205,7 @@ export const Plugin = ({
     return (
         <iframe
             ref={iframeRef}
-            src={pluginSource}
+            src={pluginEntryPoint}
             // Styles can be added via className. Sizing styles will take
             // precedence over the `width` and `height` props
             className={className}