From fe142faf3a6c0f2cdf83c9e4ce4fd9d03802cb83 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Wed, 12 Feb 2020 15:10:27 +0000
Subject: [PATCH] move state origin build from server to client

---
 .../src/builderStore/buildStateOrigins.js     | 27 +++++++++++++++
 .../src/userInterface/PropertyCascader.svelte |  5 +--
 .../builder/tests/buildStateOrigins.spec.js   | 29 ++++++++++++++++
 packages/server/utilities/builder/index.js    |  1 -
 .../server/utilities/builder/listScreens.js   | 34 +------------------
 5 files changed, 60 insertions(+), 36 deletions(-)
 create mode 100644 packages/builder/src/builderStore/buildStateOrigins.js
 create mode 100644 packages/builder/tests/buildStateOrigins.spec.js

diff --git a/packages/builder/src/builderStore/buildStateOrigins.js b/packages/builder/src/builderStore/buildStateOrigins.js
new file mode 100644
index 0000000000..e1c1efed9a
--- /dev/null
+++ b/packages/builder/src/builderStore/buildStateOrigins.js
@@ -0,0 +1,27 @@
+  /**
+   * buildStateOrigins
+   *
+   * Builds an object that details all the bound state in the application, and what updates it. 
+   *
+   * @param screenDefinition - the screen definition metadata.
+   * @returns {Object} an object with the client state values and how they are managed. 
+   */
+  export const buildStateOrigins = screenDefinition => {
+    const origins = {};
+
+    function traverse(propValue) {
+      for (let key in propValue) {
+        if (!Array.isArray(propValue[key])) continue;
+
+        if (key === "_children") propValue[key].forEach(traverse);
+
+        for (let element of propValue[key]) {
+          if (element["##eventHandlerType"] === "Set State") origins[element.parameters.path] = element;
+        }
+      }
+    }
+
+    traverse(screenDefinition.props);
+
+    return origins;
+  };
\ No newline at end of file
diff --git a/packages/builder/src/userInterface/PropertyCascader.svelte b/packages/builder/src/userInterface/PropertyCascader.svelte
index c8f6b4af6b..fdee0d3a26 100644
--- a/packages/builder/src/userInterface/PropertyCascader.svelte
+++ b/packages/builder/src/userInterface/PropertyCascader.svelte
@@ -1,6 +1,7 @@
 <script>
   import { ArrowDownIcon } from "../common/Icons/";
   import { store } from "../builderStore";
+  import { buildStateOrigins } from "../builderStore/buildStateOrigins";
   import { isBinding, getBinding, setBinding } from "../common/binding";
 
   export let onChanged = () => {};
@@ -41,7 +42,7 @@
     const currentScreen = $store.screens.find(
       ({ name }) => name === $store.currentPreviewItem.name
     );
-    stateBindings = currentScreen ? currentScreen.stateOrigins : [];
+    stateBindings = currentScreen ? Object.keys(buildStateOrigins(currentScreen)) : [];
   }
 </script>
 
@@ -66,7 +67,7 @@
   </div>
   {#if isOpen}
     <ul class="options">
-      {#each Object.keys(stateBindings) as stateBinding}
+      {#each stateBindings as stateBinding}
         <li
           class:bold={stateBinding === bindingPath}
           on:click={() => {
diff --git a/packages/builder/tests/buildStateOrigins.spec.js b/packages/builder/tests/buildStateOrigins.spec.js
new file mode 100644
index 0000000000..65357aac15
--- /dev/null
+++ b/packages/builder/tests/buildStateOrigins.spec.js
@@ -0,0 +1,29 @@
+import { buildStateOrigins } from "../src/builderStore/buildStateOrigins";
+
+it("builds the correct stateOrigins object from a screen definition with handlers", () => {
+  expect(buildStateOrigins({
+    "name": "screen1",
+    "description": "",
+    "props": {
+    "_component": "@budibase/standard-components/div",
+      "className": "",
+      "onClick": [
+        {
+          "##eventHandlerType": "Set State",
+          "parameters": {
+            "path": "testKey",
+            "value": "value"
+          }
+        }
+      ]
+    }
+  })).toEqual({
+    "testKey": {
+      "##eventHandlerType": "Set State",
+      "parameters": {
+        "path": "testKey",
+        "value": "value"
+      }
+    }
+  });
+});
\ No newline at end of file
diff --git a/packages/server/utilities/builder/index.js b/packages/server/utilities/builder/index.js
index ac9c17d3fd..187f5aca88 100644
--- a/packages/server/utilities/builder/index.js
+++ b/packages/server/utilities/builder/index.js
@@ -63,7 +63,6 @@ module.exports.saveScreen = async (config, appname, pagename, screen) => {
     flag: "w",
     spaces: 2,
   })
-  screen.stateOrigins = listScreens.buildStateOrigins(screen);
   return screen;
 }
 
diff --git a/packages/server/utilities/builder/listScreens.js b/packages/server/utilities/builder/listScreens.js
index ad463b07a0..a2e86bc6f8 100644
--- a/packages/server/utilities/builder/listScreens.js
+++ b/packages/server/utilities/builder/listScreens.js
@@ -31,8 +31,6 @@ const fetchscreens = async (appPath, pagename, relativePath = "") => {
 
       component.props = component.props || {}
 
-      component.stateOrigins = buildStateOrigins(component);
-
       screens.push(component)
     } else {
       const childComponents = await fetchscreens(
@@ -47,34 +45,4 @@ const fetchscreens = async (appPath, pagename, relativePath = "") => {
   }
 
   return screens
-}
-
-/**
- * buildStateOrigins
- *
- * Builds an object that details all the bound state in the application, and what updates it. 
- *
- * @param screenDefinition - the screen definition metadata.
- * @returns {Object} an object with the client state values and how they are managed. 
- */
-const buildStateOrigins = screenDefinition => {
-  const origins = {};
-
-  function traverse(propValue) {
-    for (let key in propValue) {
-      if (!Array.isArray(propValue[key])) continue;
-
-      if (key === "_children") propValue[key].forEach(traverse);
-
-      for (let element of propValue[key]) {
-        if (element["##eventHandlerType"] === "Set State") origins[element.parameters.path] = element;
-      }
-    }
-  }
-
-  traverse(screenDefinition.props);
-
-  return origins;
-};
-
-module.exports.buildStateOrigins = buildStateOrigins;
\ No newline at end of file
+}
\ No newline at end of file