From 75ed8feb929385a01754536ddafc395ade2821d3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 14 Jul 2022 15:19:42 +0100
Subject: [PATCH] Reduce state updates when selecting screens

---
 .../src/builderStore/store/frontend.js        | 26 +++++++++++++++----
 .../[screenId]/_components/AppPanel.svelte    |  3 ++-
 .../_components/ScreenListPanel.svelte        |  2 +-
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 16ae5ce215..b46516e875 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -61,6 +61,10 @@ const INITIAL_FRONTEND_STATE = {
 export const getFrontendStore = () => {
   const store = writable({ ...INITIAL_FRONTEND_STATE })
 
+  store.subscribe(state => {
+    console.log("new state")
+  })
+
   store.actions = {
     reset: () => {
       store.set({ ...INITIAL_FRONTEND_STATE })
@@ -184,12 +188,24 @@ export const getFrontendStore = () => {
     },
     screens: {
       select: screenId => {
-        store.update(state => {
-          let screens = state.screens
-          let screen =
-            screens.find(screen => screen._id === screenId) || screens[0]
-          if (!screen) return state
+        // Check this screen exists
+        const state = get(store)
+        const screen = state.screens.find(screen => screen._id === screenId)
+        console.log(screen)
+        if (!screen) {
+          return
+        }
 
+        // Check screen isn't already selected
+        if (
+          state.selectedScreenId === screen._id &&
+          state.selectedComponentId === screen.props?._id
+        ) {
+          return
+        }
+
+        // Select new screen
+        store.update(state => {
           state.selectedScreenId = screen._id
           state.selectedComponentId = screen.props?._id
           return state
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
index d86e4a3c8d..76118cc9c8 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
@@ -17,7 +17,8 @@
         getOptionValue={x => x._id}
         getOptionIcon={x => (x.routing.homeScreen ? "Home" : "WebPage")}
         getOptionColour={x => RoleUtils.getRoleColour(x.routing.roleId)}
-        bind:value={$store.selectedScreenId}
+        value={$store.selectedScreenId}
+        on:change={e => store.actions.screens.select(e.detail)}
       />
     </div>
     <div class="header-right">
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
index 40d9ab273d..ecb020b104 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
@@ -60,7 +60,7 @@
       indentLevel={0}
       selected={$store.selectedScreenId === screen._id}
       text={screen.routing.route}
-      on:click={() => ($store.selectedScreenId = screen._id)}
+      on:click={() => store.actions.screens.select(screen._id)}
       color={RoleUtils.getRoleColour(screen.routing.roleId)}
     >
       <ScreenDropdownMenu screenId={screen._id} />