clean up example, add comments

Author: BenjamynBaker

src/App.js

@@ -3,9 +3,8 @@ import React, { useState, useEffect } from "react";
 
 const App = () => {
   const sample = {
-    name: "value",
-    example2: 19999,
-    example3: { hello: "world" },
+    example1: "",
+    example2: false,
     input: "",
   };
 
@@ -25,27 +24,31 @@ const App = () => {
   const [data, setData] = useState(sample);
   return (
     <div>
+      <h1> React-Retool</h1>
       <button
         onClick={() => {
-          setData({ ...data, example2: "new value" });
+          setData({ ...data, example2: !data.example2 });
         }}
       >
-        This is button
+        Click me!
       </button>
+      <br />
+      <br />
+      <label> Share something: </label>
       <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>
+      <br />
+      <br />
       <Retool
         url="https://support.retool.com/embedded/public/cb9e15f0-5d7c-43a7-a746-cdec870dde9a"
         data={data}
-        height="500px"
-        width="500px"
+        height="700px"
+        width="1000px"
       ></Retool>
+      <h1> {retoolData} </h1>
     </div>
   );
 };

src/components/Retool.js

@@ -4,6 +4,7 @@ const Retool = ({ data, url, height, width }) => {
   const embeddedIframe = useRef(null);
   const [elementWatchers, setElementWatchers] = useState({});
 
+  /* Retool passes up the list of elements to watch on page load  */
   useEffect(() => {
     for (const key in elementWatchers) {
       const watcher = elementWatchers[key];
@@ -19,7 +20,9 @@ const Retool = ({ data, url, height, width }) => {
     }
   }, [data, elementWatchers]);
 
+  /* On page load, add event listener to listen for events from Retool */
   useEffect(() => {
+    /* Handle events - if PWQ then create/replace watchers -> return result */
     const handler = (event) => {
       if (!embeddedIframe?.current?.contentWindow) return;
       if (event.data.type === "PARENT_WINDOW_QUERY") {
@@ -37,6 +40,7 @@ const Retool = ({ data, url, height, width }) => {
     return () => window.removeEventListener("message", handler);
   }, []);
 
+  /* Creates or updates the list of values for us to watch for changes */
   const createOrReplaceWatcher = (selector, pageName, queryId) => {
     const watcherId = pageName + "-" + queryId;
     const updatedState = elementWatchers;
@@ -51,6 +55,7 @@ const Retool = ({ data, url, height, width }) => {
     setElementWatchers(updatedState);
   };
 
+  /* Checks for selectors for data and posts message for Retool to read */
   const postMessageForSelector = (messageType, eventData) => {
     const maybeData = data[eventData.selector];
 

src/index.js

@@ -1,11 +1,11 @@
-import React from "react"
-import ReactDOM from "react-dom"
-import "./index.css"
-import App from "./App"
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById("root")
-)
+);