change react-retool to functional component

Author: BenjamynBaker

src/App.js

@@ -1,14 +1,51 @@
-import Retool from "./components/Retool"
+import Retool from "./components/Retool";
+import React, { useState, useEffect } from "react";
 
-function App() {
+const App = () => {
+  const sample = {
+    example: "value",
+    example2: 19999,
+    example3: { hello: "world" },
+    input: "",
+  };
+
+  useEffect(() => {
+    const handler = (event) => {
+      if (event.data?.type !== "PARENT_WINDOW_QUERY") {
+        setRetoolData(event.data);
+      }
+    };
+
+    window.addEventListener("message", handler);
+
+    return () => window.removeEventListener("message", handler);
+  }, []);
+
+  const [retoolData, setRetoolData] = useState("");
+  const [data, setData] = useState(sample);
   return (
-    <Retool
-      url="https://retoolin.tryretool.com/embedded/public/f7607e1f-670a-4ebf-9a09-be54cf17181e"
-      data={{
-        example: "value",
-      }}
-    ></Retool>
-  )
-}
-
-export default App
+    <div style={{ height: "500px" }}>
+      <button
+        onClick={() => {
+          setData({ ...data, example2: "new value" });
+        }}
+      >
+        This is button
+      </button>
+      <input
+        type="text"
+        value={data.input}
+        onChange={(e) => setData({ ...data, input: e.target.value })}
+      />
+      <p id="hello"> Hey123 </p>
+      <h1> {retoolData} </h1>
+      <p id="hello"> {JSON.stringify(data)} </p>
+      <Retool
+        url="https://support.retool.com/apps/Ben/parent%20window%20query123"
+        data={data}
+      ></Retool>
+    </div>
+  );
+};
+
+export default App;

src/components/Retool.js

@@ -1,129 +1,87 @@
-import React from "react"
+import React, { useEffect, useRef, useState } from "react";
 
-class Retool extends React.Component {
-  constructor(props) {
-    super(props)
+const Retool = ({ data, url }) => {
+  const embeddedIframe = useRef(null);
+  const [elementWatchers, setElementWatchers] = useState({});
 
-    if (!this.props.url)
-      throw new Error("Please pass a url into the Retool component.")
-
-    this.state = {
-      url: props.url,
-      elementWatchers: {},
-      parentData: this.props.data || {},
-    }
-  }
-
-  componentDidMount() {
-    this.startListening()
-    this.startWatchers()
-  }
-
-  startListening = () => {
-    if (this.iframe) {
-      window.addEventListener("message", (e) => this.handle(e))
+  useEffect(() => {
+    for (const key in elementWatchers) {
+      const watcher = elementWatchers[key];
+      watcher.iframe?.contentWindow.postMessage(
+        {
+          type: "PARENT_WINDOW_RESULT",
+          result: data[watcher.selector],
+          id: watcher.queryId,
+          pageName: watcher.pageName,
+        },
+        "*"
+      );
     }
-  }
-
-  startWatchers = () => {
-    var watcherKeys = Object.keys(this.state.elementWatchers)
-
-    for (var i = 0; i < watcherKeys.length; i++) {
-      var key = watcherKeys[i]
-      var watcher = this.state.elementWatchers[key]
-      var selector = watcher.selector
-      const value = this.dataFromSelector(selector)
-      if (value !== watcher.prevValue) {
-        watcher.prevValue = value
-        watcher.iframe.contentWindow.postMessage(
-          {
-            type: "PARENT_WINDOW_RESULT",
-            result: value,
-            id: watcher.queryId,
-            pageName: watcher.pageName,
-          },
-          "*"
-        )
+  }, [data, elementWatchers]);
+
+  useEffect(() => {
+    const handler = (event) => {
+      if (!embeddedIframe?.current?.contentWindow) return;
+      if (event.data.type === "PARENT_WINDOW_QUERY") {
+        createOrReplaceWatcher(
+          event.data.selector,
+          event.data.pageName,
+          event.data.id
+        );
+        postMessageForSelector("PARENT_WINDOW_RESULT", event.data);
       }
-    }
+    };
 
-    setTimeout(this.startWatchers, 100)
-  }
+    window.addEventListener("message", handler);
 
-  createOrReplaceWatcher = (selector, pageName, queryId) => {
-    var watcherId = pageName + "-" + queryId
-    var watchers = { ...this.state.elementWatchers }
+    // clean up
+    return () => window.removeEventListener("message", handler);
+  }, []);
 
-    watchers[watcherId] = {
-      iframe: this.iframe,
+  const createOrReplaceWatcher = (selector, pageName, queryId) => {
+    const watcherId = pageName + "-" + queryId;
+    const updatedState = elementWatchers;
+
+    updatedState[watcherId] = {
+      iframe: embeddedIframe.current,
       selector: selector,
       pageName: pageName,
       queryId: queryId,
-      prevValue: null,
-    }
-
-    this.setState({ elementWatchers: watchers })
-  }
+    };
 
-  dataFromSelector = (selector) => {
-    // Two places the app might be asking for data:
-    //  1. The textContent of an HTML element.
-    //  2. From data passed into this component
-    const matchingInjectedData = this.state.parentData[selector]
-    const nodeData = document.querySelector(selector)?.textContent
-    return matchingInjectedData || nodeData || null
-  }
+    setElementWatchers(updatedState);
+  };
 
-  postMessageForSelector = (messageType, eventData) => {
-    const maybeData = this.dataFromSelector(eventData.selector)
+  const postMessageForSelector = (messageType, eventData) => {
+    const maybeData = data[eventData.selector];
 
     if (maybeData) {
-      this.iframe.contentWindow.postMessage(
+      embeddedIframe.current.contentWindow.postMessage(
         {
           type: messageType,
           result: maybeData,
           id: eventData.id,
           pageName: eventData.pageName,
         },
         "*"
-      )
+      );
     } else {
       console.log(
         `Not sending data back to Retool, nothing found for selector: ${eventData.selector}`
-      )
-    }
-  }
-
-  handle = (event) => {
-    if (!this.iframe?.contentWindow) return
-    if (event.data.type === "PARENT_WINDOW_QUERY") {
-      this.createOrReplaceWatcher(
-        event.data.selector,
-        event.data.pageName,
-        event.data.id
-      )
-      this.postMessageForSelector("PARENT_WINDOW_RESULT", event.data)
+      );
     }
-
-    if (event.data.type === "PARENT_WINDOW_PREVIEW_QUERY") {
-      this.postMessageForSelector("PARENT_WINDOW_PREVIEW_RESULT", event.data)
-    }
-  }
-
-  render() {
-    return (
-      <iframe
-        height="100%"
-        width="100%"
-        frameBorder="none"
-        src={this.state.url}
-        ref={(e) => {
-          this.iframe = e
-        }}
-        title="retool"
-      ></iframe>
-    )
-  }
-}
-
-export default Retool
+  };
+
+  return (
+    <iframe
+      height="100%"
+      width="100%"
+      frameBorder="none"
+      src={url}
+      ref={embeddedIframe}
+      title="retool"
+    ></iframe>
+  );
+};
+
+export default Retool;