Add persistent form class

2 files changed, 82 insertions, 1 deletions

diff --git a/docs/form_persisting_architecture.md b/docs/form_persisting_architecture.md
index 8b5ab495f..9e6cb7c41 100644
--- a/docs/form_persisting_architecture.md
+++ b/docs/form_persisting_architecture.md
@@ -10,5 +10,26 @@ Since:
 
 Whenever this class is loaded, it registers an `onChange` listener. On those events, it checks the target for a special ID attribute it listens for.
 
-Let's say we call our class `PersistentForm`. So then we might check for a `persistent-form-id`.
+Let's say we call our class `PersistentForm`. So then we might check for a `persistent-form-id` on change.
+
+The parent element will define a special attribute, let's say `persistent-form-parent-id`.
+
+Here's some pseudo-code for it:
+```
+onChange(ev) =>
+  persisted = localStorage[parentKey]
+  persisted[childKey] = ev.value
+  localStorage[parentKey] = persisted
+```
+
+On startup, we just do the inverse:
+
+```
+onStart() =>
+  el = this.getEl()
+  parentKey = el.attr('persistent-form-parent-id')
+  children = el.children.where('[persistent-form-id]')
+  children.each(loadValue)
+```
+
 
diff --git a/ui/lib/persistent-form.js b/ui/lib/persistent-form.js
new file mode 100644
index 000000000..4bb19ad58
--- /dev/null
+++ b/ui/lib/persistent-form.js
@@ -0,0 +1,60 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const defaultKey = 'persistent-form-default'
+const eventName = 'keyup'//.persistent-form-change'//.persistent-form-change'
+
+module.exports = PersistentForm
+
+function PersistentForm () {
+  Component.call(this)
+}
+
+inherits(PersistentForm, Component)
+
+PersistentForm.prototype.componentDidMount = function () {
+  const fields = document.querySelectorAll('[data-persistent-formid]')
+  const store = this.getPersistentStore()
+  fields.forEach((field) => {
+    const key = field.getAttribute('data-persistent-formid')
+    const val = field.value
+    const cached = store[key]
+    if (cached !== undefined) {
+      field.value = cached
+    }
+
+    field.addEventListener(eventName, this.persistentFieldDidUpdate.bind(this))
+  })
+}
+
+PersistentForm.prototype.getPersistentStore = function () {
+  let store = window.localStorage[this.persistentFormParentId || defaultKey]
+  if (store && store !== 'null') {
+    store = JSON.parse(store)
+  } else {
+    store = {}
+  }
+  return store
+}
+
+PersistentForm.prototype.setPersistentStore = function (newStore) {
+  window.localStorage[this.persistentFormParentId || defaultKey] = JSON.stringify(newStore)
+}
+
+PersistentForm.prototype.persistentFieldDidUpdate = function (event) {
+  const field = event.target
+  const store = this.getPersistentStore()
+  const key = field.getAttribute('data-persistent-formid')
+  const val = field.value
+  store[key] = val
+  console.log(val)
+  this.setPersistentStore(store)
+}
+
+PersistentForm.prototype.componentWillUnmount = function () {
+  const fields = document.querySelectorAll('[data-persistent-formid]')
+  const store = this.getPersistentStore()
+  fields.forEach((field) => {
+    field.removeEventListener(eventName, this.persistentFieldDidUpdate.bind(this))
+  })
+  this.setPersistentStore({})
+}