diff --git a/docs/form_persisting_architecture.md b/docs/form_persisting_architecture.md deleted file mode 100644 index e2d766ccc..000000000 --- a/docs/form_persisting_architecture.md +++ /dev/null @@ -1,28 +0,0 @@ -# Form Persisting Architecture - -Since: - - The popup is torn down completely on every click outside of it. - - We have forms with multiple fields (like passwords & seed phrases) that might encourage a user to leave our panel to refer to a password manager. - - We cause user friction when we lose the contents of certain forms. - - This calls for an architecture of a form component that can completely persist its values to LocalStorage on every relevant change, and restore those values on reopening. - - To achieve this, we have defined a class, a subclass of `React.Component`, called `PersistentForm`, and it's stored at `ui/lib/persistent-form.js`. - -To use this class, simply take your form component (the component that renders `input`, `select`, or `textarea` elements), and make it subclass from `PersistentForm` instead of `React.Component`. - -You can see an example of this in use in `ui/app/first-time/restore-vault.js`. - -Additionally, any field whose value should be persisted, should have a `persistentFormId` attribute, which needs to be assigned under a `dataset` key on the main `attributes` hash. For example: - -```javascript - return h('textarea.twelve-word-phrase.letter-spacey', { - dataset: { - persistentFormId: 'wallet-seed', - }, - }) -``` - -That's it! This field should be persisted to `localStorage` on each `keyUp`, those values should be restored on view load, and the cached values should be cleared when navigating deliberately away from the form. - diff --git a/ui/app/pages/send/send.component.js b/ui/app/pages/send/send.component.js index bb8c9c9f1..3507c1cf1 100644 --- a/ui/app/pages/send/send.component.js +++ b/ui/app/pages/send/send.component.js @@ -1,6 +1,5 @@ -import React from 'react' +import React, { Component } from 'react' import PropTypes from 'prop-types' -import PersistentForm from '../../../lib/persistent-form' import { getAmountErrorObject, getGasFeeErrorObject, @@ -16,7 +15,7 @@ import SendFooter from './send-footer' import EnsInput from './send-content/add-recipient/ens-input' -export default class SendTransactionScreen extends PersistentForm { +export default class SendTransactionScreen extends Component { static propTypes = { addressBook: PropTypes.arrayOf(PropTypes.object), diff --git a/ui/lib/persistent-form.js b/ui/lib/persistent-form.js deleted file mode 100644 index b26cfac38..000000000 --- a/ui/lib/persistent-form.js +++ /dev/null @@ -1,62 +0,0 @@ -import { inherits } from 'util' -import { Component } from 'react' - -const defaultKey = 'persistent-form-default' -const eventName = 'keyup' - -export default PersistentForm - -function PersistentForm () { - Component.call(this) -} - -inherits(PersistentForm, Component) - -PersistentForm.prototype.componentDidMount = function () { - const fields = document.querySelectorAll('[data-persistent-formid]') - const store = this.getPersistentStore() - - for (let i = 0; i < fields.length; i++) { - const field = fields[i] - const key = field.getAttribute('data-persistent-formid') - 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 - this.setPersistentStore(store) -} - -PersistentForm.prototype.componentWillUnmount = function () { - const fields = document.querySelectorAll('[data-persistent-formid]') - for (let i = 0; i < fields.length; i++) { - const field = fields[i] - field.removeEventListener(eventName, this.persistentFieldDidUpdate.bind(this)) - } - this.setPersistentStore({}) -} -