only call the saveUpdateHook callback once

reactive-python · Sep 13, 2020 · 5bb693a · 5bb693a
1 parent 7236f20
commit 5bb693a
Showing 1 changed file with 20 additions and 15 deletions.
diff --git a/idom/client/app/core_modules/layout.js b/idom/client/app/core_modules/layout.js
@@ -26,7 +26,7 @@ export function mountLayoutWithWebSocket(mountElement, endpoint) {
 
   const ws = new WebSocket(endpoint);
 
-  function registerUpdateCallback(update) {
+  function saveUpdateHook(update) {
     ws.onmessage = (event) => {
       const [pathPrefix, patch] = JSON.parse(event.data);
       update(pathPrefix, patch);
@@ -42,28 +42,33 @@ export function mountLayoutWithWebSocket(mountElement, endpoint) {
     );
   }
 
-  return mountLayout(mountElement, registerUpdateCallback, sendCallback);
+  return mountLayout(mountElement, saveUpdateHook, sendCallback);
 }
 
-export function mountLayout(
-  mountElement,
-  registerUpdateCallback,
-  sendCallback
-) {
-  return reactDOM.render(
-    html`<${Layout}
-      registerUpdateCallback=${registerUpdateCallback}
-      sendCallback=${sendCallback}
-    />`,
+export function mountLayout(mountElement, saveUpdateHook, sendEvent) {
+  const updateHook = { current: null };
+
+  function setUpdateHook(hook) {
+    updateHook.current = hook;
+  }
+
+  reactDOM.render(
+    html`<${Layout} setUpdateHook=${setUpdateHook} sendEvent=${sendEvent} />`,
     mountElement
   );
+
+  saveUpdateHook((pathPrefix, patch) => {
+    if (updateHook.current) {
+      updateHook.current(pathPrefix, patch);
+    }
+  });
 }
 
-export default function Layout({ registerUpdateCallback, sendCallback }) {
+export default function Layout({ setUpdateHook, sendEvent }) {
   const [model, setModel] = react.useState({});
 
   react.useEffect(() => {
-    registerUpdateCallback((pathPrefix, patch) => {
+    setUpdateHook((pathPrefix, patch) => {
       setModel(
         jsonpatch.applyPatch(
           model,
@@ -79,7 +84,7 @@ export default function Layout({ registerUpdateCallback, sendCallback }) {
   }, [model]);
 
   if (model.tagName) {
-    return html`<${Element} sendEvent=${sendCallback} model=${model} />`;
+    return html`<${Element} sendEvent=${sendEvent} model=${model} />`;
   } else {
     return html`<div />`;
   }