From 8628bc70f5f87dbab5c9c3a10a754f9942428d29 Mon Sep 17 00:00:00 2001
From: jberg <jberg@users.noreply.github.com>
Date: Mon, 12 Aug 2019 15:05:46 -0700
Subject: [PATCH] Setup update listeners to rerender react components (#848)

* Setup update listeners to rerender react components

* setupUpdates -> useJsUpdates
---
 modern/src/App.js                | 20 +++++++++++++-------
 modern/src/runtime/GuiObject.js  |  1 +
 modern/src/runtime/MakiObject.js |  4 ++++
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/modern/src/App.js b/modern/src/App.js
index faee3f96..69c69b15 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useReducer } from "react";
 import JSZip from "jszip";
 import "./App.css";
 import * as Utils from "./utils";
@@ -22,6 +22,11 @@ async function getSkin() {
   return await initialize(zip, skinXml);
 }
 
+function useJsUpdates(node) {
+  const [ignored, forceUpdate] = useReducer(x => x + 1, 0);
+  useEffect(() => node.js_listen("js_update", forceUpdate));
+}
+
 function handleMouseEventDispatch(node, event, eventName) {
   const rect = event.target.getBoundingClientRect();
   const x = event.clientX - rect.left;
@@ -66,7 +71,8 @@ function handleMouseButtonEventDispatch(
   );
 }
 
-function GuiObjectEvents({ node, children }) {
+function GuiObjectEvents({ Component, node, children }) {
+  useJsUpdates(node);
   return (
     <div
       onMouseDown={e =>
@@ -94,7 +100,9 @@ function GuiObjectEvents({ node, children }) {
       onKeyUp={e => node.js_trigger("onKeyUp", e.keyCode)}
       onKeyDown={e => node.js_trigger("onKeyDown", e.keyCode)}
     >
-      {children}
+      <Component node={node} {...node.attributes}>
+        {children}
+      </Component>
     </div>
   );
 }
@@ -318,10 +326,8 @@ function XmlNode({ node }) {
     return null;
   }
   return (
-    <GuiObjectEvents node={node}>
-      <Component node={node} {...attributes}>
-        {children}
-      </Component>
+    <GuiObjectEvents Component={Component} node={node}>
+      {children}
     </GuiObjectEvents>
   );
 }
diff --git a/modern/src/runtime/GuiObject.js b/modern/src/runtime/GuiObject.js
index b7fa824c..171328c6 100644
--- a/modern/src/runtime/GuiObject.js
+++ b/modern/src/runtime/GuiObject.js
@@ -35,6 +35,7 @@ class GuiObject extends MakiObject {
 
   setxmlparam(param, value) {
     this.attributes[param] = value;
+    this.js_trigger("js_update");
     return value;
   }
 
diff --git a/modern/src/runtime/MakiObject.js b/modern/src/runtime/MakiObject.js
index 78e3ac93..31905bdc 100644
--- a/modern/src/runtime/MakiObject.js
+++ b/modern/src/runtime/MakiObject.js
@@ -29,6 +29,10 @@ class MakiObject {
     this._emitter.trigger(eventName, ...args);
   }
 
+  js_listen(eventName, cb) {
+    return this._emitter.listen(eventName, cb);
+  }
+
   js_listenToAll(cb) {
     return this._emitter.listenToAll(cb);
   }