add the error show up in the backup page.

diff --git a/src/features/backup/actions.js b/src/features/backup/actions.js
index 9a211d0..15a62c9 100644 (file)
--- a/src/features/backup/actions.js
+++ b/src/features/backup/actions.js
@@ -2,23 +2,30 @@ import { chainClient } from 'utility/environment'
 
 let actions = {
   backup:()=>{
-    return chainClient().backUp.backup()
-      .then(resp => {
-        const date = new Date()
-        const dateStr = date.toLocaleDateString().split(' ')[0]
-        const timestamp = date.getTime()
-        const fileName = ['bytom-wallet-backup-', dateStr, timestamp].join('-')
+    return function(dispatch) {
+      return chainClient().backUp.backup()
+        .then(resp => {
+          if (resp.status === 'fail') {
+            throw resp
+          }
+          const date = new Date()
+          const dateStr = date.toLocaleDateString().split(' ')[0]
+          const timestamp = date.getTime()
+          const fileName = ['bytom-wallet-backup-', dateStr, timestamp].join('-')
 
-        let element = document.createElement('a')
-        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(resp.data)))
-        element.setAttribute('download', fileName)
-        element.style.display = 'none'
-        document.body.appendChild(element)
-        element.click()
+          let element = document.createElement('a')
+          element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(resp.data)))
+          element.setAttribute('download', fileName)
+          element.style.display = 'none'
+          document.body.appendChild(element)
+          element.click()
 
-        document.body.removeChild(element)
-      })
-      .catch(err => { throw {_error: err} })
+          document.body.removeChild(element)
+
+        }).catch((err) => {
+          throw err
+        })
+    }
   },
 
   success: ()=>{

diff --git a/src/features/backup/components/Backup.jsx b/src/features/backup/components/Backup.jsx
index 457c08e..7a8511d 100644 (file)
--- a/src/features/backup/components/Backup.jsx
+++ b/src/features/backup/components/Backup.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import { RestoreKeystore, RestoreMnemonic, PageContent, PageTitle } from 'features/shared/components'
+import { RestoreKeystore, RestoreMnemonic, PageContent, PageTitle, ErrorBanner} from 'features/shared/components'
 import styles from './Backup.scss'
 import actions from 'actions'
 import {withNamespaces} from 'react-i18next'
@@ -9,11 +9,13 @@ class Backup extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      value: null
+      value: null,
+      error: null
     }
 
     this.mnemonicPopup = this.mnemonicPopup.bind(this)
     this.keystorePopup = this.keystorePopup.bind(this)
+    this.submitWithValidation = this.submitWithValidation.bind(this)
   }
 
   setValue(event) {
@@ -36,12 +38,26 @@ class Backup extends React.Component {
     )
   }
 
+  submitWithValidation() {
+    this.props.backup()
+      .then(()=>{
+        this.setState({
+          error: null
+        })
+      })
+      .catch((err) => {
+        this.setState({
+          error: err
+        })
+      })
+  }
+
   render() {
-    const {
-      t,
-    } = this.props
+    const {t} = this.props
 
-    const newButton = <button className={`btn btn-primary btn-lg ${styles.submit}`} onClick={() => this.props.backup()}>
+    const {error} = this.state
+
+    const newButton = <button className={`btn btn-primary btn-lg ${styles.submit}`} onClick={() => this.submitWithValidation()}>
       {t('backup.download')}
     </button>
     const restoreKeystoreButton = <button className={`btn btn-primary btn-lg ${styles.submit}`} onClick={this.keystorePopup}>
@@ -109,7 +125,8 @@ class Backup extends React.Component {
               <div>
                 {
                   this.state.value === 'backup'
-                  &&<span className={styles.submitWrapper}>{newButton}</span>
+                  &&[<div className={styles.submitWrapper}>{error && <ErrorBanner error={error} />}</div>,
+                    <span className={styles.submitWrapper}>{newButton}</span>]
                 }
               </div>
 
@@ -128,6 +145,7 @@ class Backup extends React.Component {
                 }
               </div>
             </div>
+
           </div>
 
         </PageContent>
@@ -154,4 +172,4 @@ const mapDispatchToProps = (dispatch) => ({
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)( withNamespaces('translations') (Backup) )
+)(withNamespaces('translations') (Backup))