From ea09c6e45950f1cc1e20b927e59da90c0ce03a60 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Fri, 13 Nov 2020 10:29:54 +0000
Subject: [PATCH 1/2] fixing reactive chart issue

---
 .../src/builderStore/store/frontend.js        | 27 ++++++++++---------
 .../ComponentSelectionList.svelte             |  9 ++++---
 .../userInterface/MultiOptionSelect.svelte    | 13 +++------
 .../userInterface/SettingsView.svelte         |  6 ++---
 .../standard-components/src/Navigation.svelte |  4 ++-
 5 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 35cd8b09f6..31b8dcff22 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -193,8 +193,8 @@ export const getFrontendStore = () => {
             )
             state.currentComponentInfo = safeProps
             screen.props = safeProps
-            savePromise = store.actions.pages.save()
           }
+          savePromise = store.actions.pages.save()
 
           return state
         })
@@ -223,7 +223,7 @@ export const getFrontendStore = () => {
             // TODO: Should be done server side
             state.pages[pageName]._screens = state.pages[
               pageName
-            ]._screens.filter(scr => scr.name !== screenToDelete.name)
+            ]._screens.filter(scr => scr._id !== screenToDelete._id)
             deletePromise = api.delete(
               `/api/screens/${screenToDelete._id}/${screenToDelete._rev}`
             )
@@ -277,18 +277,20 @@ export const getFrontendStore = () => {
         const pageToSave = page || storeContents.pages[pageName]
 
         // TODO: revisit. This sends down a very weird payload
-        const response = await api
-          .post(`/api/pages/${pageToSave._id}`, {
-            page: {
-              componentLibraries: storeContents.pages.componentLibraries,
-              ...pageToSave,
-            },
-            screens: pageToSave._screens,
-          })
-          .then(response => response.json())
+        const response = await api.post(`/api/pages/${pageToSave._id}`, {
+          page: {
+            componentLibraries: storeContents.pages.componentLibraries,
+            ...pageToSave,
+          },
+          screens: pageToSave._screens,
+        })
+
+        const json = await response.json()
+
+        if (!json.ok) throw new Error("Error updating page")
 
         store.update(state => {
-          state.pages[pageName]._rev = response.rev
+          state.pages[pageName]._rev = json.rev
           return state
         })
       },
@@ -304,7 +306,6 @@ export const getFrontendStore = () => {
           return state
         })
       },
-      // addChildComponent
       create: (componentToAdd, presetProps) => {
         store.update(state => {
           function findSlot(component_array) {
diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index 5dc9c05ea5..ba29c0a24e 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -39,9 +39,13 @@
       class="category"
       on:click={() => onCategoryChosen(category, idx)}
       class:active={idx === selectedIndex}>
-      {#if category.icon}<i class={category.icon} />{/if}
+      {#if category.icon}
+        <i class={category.icon} />
+      {/if}
       <span>{category.name}</span>
-      {#if category.isCategory}<i class="ri-arrow-down-s-line arrow" />{/if}
+      {#if category.isCategory}
+        <i class="ri-arrow-down-s-line arrow" />
+      {/if}
     </div>
   {/each}
 </div>
@@ -68,7 +72,6 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    z-index: 1;
     min-height: 24px;
     flex-wrap: wrap;
     gap: var(--spacing-l);
diff --git a/packages/builder/src/components/userInterface/MultiOptionSelect.svelte b/packages/builder/src/components/userInterface/MultiOptionSelect.svelte
index 5122969975..d8ae2b2d59 100644
--- a/packages/builder/src/components/userInterface/MultiOptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/MultiOptionSelect.svelte
@@ -7,8 +7,6 @@
   export let onChange = () => {}
 
   let boundValue = getValidOptions(value, options)
-  $: setValue(boundValue)
-  $: sanitiseOptions(options)
 
   function getValidOptions(selectedOptions, allOptions) {
     // Fix the hardcoded default string value
@@ -18,17 +16,14 @@
     return selectedOptions.filter(val => allOptions.indexOf(val) !== -1)
   }
 
-  function setValue(val) {
-    onChange(val)
-  }
-
-  function sanitiseOptions(options) {
-    boundValue = getValidOptions(value, options)
+  function setValue(value) {
+    boundValue = getValidOptions(value.detail, options)
+    onChange(boundValue)
   }
 </script>
 
 <div>
-  <Multiselect extraThin secondary bind:value={boundValue}>
+  <Multiselect extraThin secondary value={boundValue} on:change={setValue}>
     {#each options as option}
       <option value={option}>{option}</option>
     {/each}
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index 9a566260fa..8afdfce7ec 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -50,8 +50,8 @@
   const isDuplicateName = name => {
     let duplicate = false
 
-    const lookForDuplicate = rootPops => {
-      walkProps(rootPops, (inst, cancel) => {
+    const lookForDuplicate = rootProps => {
+      walkProps(rootProps, (inst, cancel) => {
         if (inst._instanceName === name && inst._id !== componentInstance._id) {
           duplicate = true
           cancel()
@@ -62,7 +62,7 @@
     lookForDuplicate($store.pages[$store.currentPageName].props)
     if (duplicate) return true
 
-    // if viwing screen, check current screen for duplicate
+    // if viewing screen, check current screen for duplicate
     if ($store.currentFrontEndType === "screen") {
       lookForDuplicate($store.currentPreviewItem.props)
     } else {
diff --git a/packages/standard-components/src/Navigation.svelte b/packages/standard-components/src/Navigation.svelte
index dda860414d..05a8d9f3a3 100644
--- a/packages/standard-components/src/Navigation.svelte
+++ b/packages/standard-components/src/Navigation.svelte
@@ -35,7 +35,9 @@
       {#if logoUrl}
         <img class="logo" alt="logo" src={logoUrl} height="48" />
       {/if}
-      {#if title}<span>{title}</span>{/if}
+      {#if title}
+        <span>{title}</span>
+      {/if}
     </a>
     <div class="nav__controls">
       <div on:click={logOut}>Log out</div>

From 44cb577f8a759d84339627d669b7cf53a5982bab Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Fri, 13 Nov 2020 10:54:03 +0000
Subject: [PATCH 2/2] lint

---
 .../userInterface/ComponentSelectionList.svelte           | 8 ++------
 packages/standard-components/src/Navigation.svelte        | 4 +---
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index ba29c0a24e..f099984e5a 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -39,13 +39,9 @@
       class="category"
       on:click={() => onCategoryChosen(category, idx)}
       class:active={idx === selectedIndex}>
-      {#if category.icon}
-        <i class={category.icon} />
-      {/if}
+      {#if category.icon}<i class={category.icon} />{/if}
       <span>{category.name}</span>
-      {#if category.isCategory}
-        <i class="ri-arrow-down-s-line arrow" />
-      {/if}
+      {#if category.isCategory}<i class="ri-arrow-down-s-line arrow" />{/if}
     </div>
   {/each}
 </div>
diff --git a/packages/standard-components/src/Navigation.svelte b/packages/standard-components/src/Navigation.svelte
index 05a8d9f3a3..dda860414d 100644
--- a/packages/standard-components/src/Navigation.svelte
+++ b/packages/standard-components/src/Navigation.svelte
@@ -35,9 +35,7 @@
       {#if logoUrl}
         <img class="logo" alt="logo" src={logoUrl} height="48" />
       {/if}
-      {#if title}
-        <span>{title}</span>
-      {/if}
+      {#if title}<span>{title}</span>{/if}
     </a>
     <div class="nav__controls">
       <div on:click={logOut}>Log out</div>