From 3eea601910aa1e3aa9978357b36ec5ee6f0d3fcc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 26 Aug 2021 17:52:04 +0100
Subject: [PATCH] Add ability to persist state values in local storage

---
 .../EventsEditor/actions/UpdateState.svelte   |  4 +-
 packages/client/src/store/state.js            | 43 ++++++++++++++++---
 packages/client/src/utils/buttonActions.js    |  4 +-
 3 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/UpdateState.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/UpdateState.svelte
index c9a0c2119e..374fd59007 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/UpdateState.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/UpdateState.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Select, Label, Combobox } from "@budibase/bbui"
+  import { Select, Label, Combobox, Checkbox } from "@budibase/bbui"
   import { onMount } from "svelte"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import { getAllStateVariables } from "builderStore/dataBinding"
@@ -42,6 +42,8 @@
       value={parameters.value}
       on:change={e => (parameters.value = e.detail)}
     />
+    <div />
+    <Checkbox bind:value={parameters.persist} text="Persist this value" />
   {/if}
 </div>
 
diff --git a/packages/client/src/store/state.js b/packages/client/src/store/state.js
index c32264914b..cb20149de8 100644
--- a/packages/client/src/store/state.js
+++ b/packages/client/src/store/state.js
@@ -1,21 +1,50 @@
-import { writable } from "svelte/store"
+import { writable, get, derived } from "svelte/store"
+import { localStorageStore } from "../../../builder/src/builderStore/store/localStorage"
+import { appStore } from "./app"
 
 const createStateStore = () => {
-  const store = writable({})
+  const localStorageKey = `${get(appStore).appId}.state`
+  const persistentStore = localStorageStore(localStorageKey, {})
 
-  const setValue = (key, value) => {
-    store.update(state => {
+  // Initialise the temp store to mirror the persistent store
+  const tempStore = writable(get(persistentStore))
+
+  // Sets a value to state, optionally persistent
+  const setValue = (key, value, persist = false) => {
+    const storeToSave = persist ? persistentStore : tempStore
+    const storeToClear = persist ? tempStore : persistentStore
+    storeToSave.update(state => {
       state[key] = value
       return state
     })
-  }
-  const deleteValue = key => {
-    store.update(state => {
+    storeToClear.update(state => {
       delete state[key]
       return state
     })
   }
 
+  // Delete a certain key from both stores
+  const deleteValue = key => {
+    const stores = [tempStore, persistentStore]
+    stores.forEach(store => {
+      store.update(state => {
+        delete state[key]
+        return state
+      })
+    })
+  }
+
+  // Derive the combination of both persisted and non persisted stores
+  const store = derived(
+    [tempStore, persistentStore],
+    ([$tempStore, $persistentStore]) => {
+      return {
+        ...$tempStore,
+        ...$persistentStore,
+      }
+    }
+  )
+
   return {
     subscribe: store.subscribe,
     actions: { setValue, deleteValue },
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 11c177d4f6..4413044155 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -124,9 +124,9 @@ const closeScreenModalHandler = () => {
 }
 
 const updateStateHandler = action => {
-  const { type, key, value } = action.parameters
+  const { type, key, value, persist } = action.parameters
   if (type === "set") {
-    stateStore.actions.setValue(key, value)
+    stateStore.actions.setValue(key, value, persist)
   } else if (type === "delete") {
     stateStore.actions.deleteValue(key)
   }