Explicitly define state in import account from json component (#3491)

1 files changed, 95 insertions, 73 deletions

diff --git a/old-ui/app/accounts/import/json.js b/old-ui/app/accounts/import/json.js
index 8d6bd7f7b..3ee3b95df 100644
--- a/old-ui/app/accounts/import/json.js
+++ b/old-ui/app/accounts/import/json.js
@@ -1,100 +1,122 @@
-const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const actions = require('../../../../ui/app/actions')
 const FileInput = require('react-simple-file-input').default
+const PropTypes = require('prop-types')
 
 const HELP_LINK = 'https://github.com/MetaMask/faq/blob/master/README.md#q-i-cant-use-the-import-feature-for-uploading-a-json-file-the-window-keeps-closing-when-i-try-to-select-a-file'
 
-module.exports = connect(mapStateToProps)(JsonImportSubview)
+class JsonImportSubview extends Component {
+  constructor (props) {
+    super(props)
 
-function mapStateToProps (state) {
-  return {
-    error: state.appState.warning,
+    this.state = {
+      file: null,
+      fileContents: '',
+    }
   }
-}
 
-inherits(JsonImportSubview, Component)
-function JsonImportSubview () {
-  Component.call(this)
-}
+  render () {
+    const { error } = this.props
 
-JsonImportSubview.prototype.render = function () {
-  const { error } = this.props
-
-  return (
-    h('div', {
-      style: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        padding: '5px 15px 0px 15px',
-      },
-    }, [
-
-      h('p', 'Used by a variety of different clients'),
-      h('a.warning', { href: HELP_LINK, target: '_blank' }, 'File import not working? Click here!'),
-
-      h(FileInput, {
-        readAs: 'text',
-        onLoad: this.onLoad.bind(this),
+    return (
+      h('div', {
         style: {
-          margin: '20px 0px 12px 20px',
-          fontSize: '15px',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          padding: '5px 15px 0px 15px',
         },
-      }),
+      }, [
+
+        h('p', 'Used by a variety of different clients'),
+        h('a.warning', {
+          href: HELP_LINK,
+          target: '_blank',
+        }, 'File import not working? Click here!'),
+
+        h(FileInput, {
+          readAs: 'text',
+          onLoad: this.onLoad.bind(this),
+          style: {
+            margin: '20px 0px 12px 20px',
+            fontSize: '15px',
+          },
+        }),
+
+        h('input.large-input.letter-spacey', {
+          type: 'password',
+          placeholder: 'Enter password',
+          id: 'json-password-box',
+          onKeyPress: this.createKeyringOnEnter.bind(this),
+          style: {
+            width: 260,
+            marginTop: 12,
+          },
+        }),
+
+        h('button.primary', {
+          onClick: this.createNewKeychain.bind(this),
+          style: {
+            margin: 12,
+          },
+        }, 'Import'),
+
+        error ? h('span.error', error) : null,
+      ])
+    )
+  }
 
-      h('input.large-input.letter-spacey', {
-        type: 'password',
-        placeholder: 'Enter password',
-        id: 'json-password-box',
-        onKeyPress: this.createKeyringOnEnter.bind(this),
-        style: {
-          width: 260,
-          marginTop: 12,
-        },
-      }),
+  onLoad (event, file) {
+    this.setState({file: file, fileContents: event.target.result})
+  }
 
-      h('button.primary', {
-        onClick: this.createNewKeychain.bind(this),
-        style: {
-          margin: 12,
-        },
-      }, 'Import'),
+  createKeyringOnEnter (event) {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      this.createNewKeychain()
+    }
+  }
 
-      error ? h('span.error', error) : null,
-    ])
-  )
-}
+  createNewKeychain () {
+    const { fileContents } = this.state
 
-JsonImportSubview.prototype.onLoad = function (event, file) {
-  this.setState({file: file, fileContents: event.target.result})
-}
+    if (!fileContents) {
+      const message = 'You must select a file to import.'
+      return this.props.displayWarning(message)
+    }
 
-JsonImportSubview.prototype.createKeyringOnEnter = function (event) {
-  if (event.key === 'Enter') {
-    event.preventDefault()
-    this.createNewKeychain()
-  }
-}
+    const passwordInput = document.getElementById('json-password-box')
+    const password = passwordInput.value
 
-JsonImportSubview.prototype.createNewKeychain = function () {
-  const state = this.state
-  const { fileContents } = state
+    if (!password) {
+      const message = 'You must enter a password for the selected file.'
+      return this.props.displayWarning(message)
+    }
 
-  if (!fileContents) {
-    const message = 'You must select a file to import.'
-    return this.props.dispatch(actions.displayWarning(message))
+    this.props.importNewAccount([ fileContents, password ])
   }
+}
 
-  const passwordInput = document.getElementById('json-password-box')
-  const password = passwordInput.value
+JsonImportSubview.propTypes = {
+  error: PropTypes.string,
+  displayWarning: PropTypes.func,
+  importNewAccount: PropTypes.func,
+}
 
-  if (!password) {
-    const message = 'You must enter a password for the selected file.'
-    return this.props.dispatch(actions.displayWarning(message))
+const mapStateToProps = state => {
+  return {
+    error: state.appState.warning,
   }
+}
 
-  this.props.dispatch(actions.importNewAccount('JSON File', [ fileContents, password ]))
+const mapDispatchToProps = dispatch => {
+  return {
+    goHome: () => dispatch(actions.goHome()),
+    displayWarning: warning => dispatch(actions.displayWarning(warning)),
+    importNewAccount: options => dispatch(actions.importNewAccount('JSON File', options)),
+  }
 }
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(JsonImportSubview)