• R/O
  • HTTP
  • SSH
  • HTTPS

bytom-dashboard: Commit

dashboard of Bytom


Commit MetaInfo

Revision623949c636ef933089d6bdbbf9e28ab12dd279ca (tree)
Zeit2018-04-23 15:52:30
AutorYongfeng LI <wliyongfeng@gmai...>
CommiterYongfeng LI

Log Message

refactor Restore component

Ändern Zusammenfassung

Diff

--- a/src/features/backup/components/Backup.jsx
+++ b/src/features/backup/components/Backup.jsx
@@ -4,6 +4,7 @@ import {PageContent, PageTitle} from 'features/shared/components'
44 import styles from './Backup.scss'
55 import {connect} from 'react-redux'
66 import {chainClient} from 'utility/environment'
7+import Restore from './Restore'
78
89 class Backup extends React.Component {
910 constructor(props) {
@@ -13,6 +14,11 @@ class Backup extends React.Component {
1314
1415 backup() {
1516 this.connection.request('/backup-wallet').then(resp => {
17+ if (resp.status === 'fail') {
18+ this.props.showError(new Error(resp.msg))
19+ return
20+ }
21+
1622 const date = new Date()
1723 const dateStr = date.toLocaleDateString().split(' ')[0]
1824 const timestamp = date.getTime()
@@ -29,43 +35,11 @@ class Backup extends React.Component {
2935 })
3036 }
3137
32- handleFileChange(event) {
33- const files = event.target.files
34- if (files.length <= 0) {
35- this.setState({key: null})
36- return
37- }
38-
39- const fileReader = new FileReader()
40- fileReader.onload = fileLoadedEvent => {
41- const backupData = JSON.parse(fileLoadedEvent.target.result)
42- this.connection.request('/restore-wallet', backupData).then(resp => {
43- if (resp.status === 'fail') {
44- this.props.showError(new Error(resp.msg))
45- return
46- }
47- this.props.showRestoreSuccess()
48- })
49- }
50- fileReader.readAsText(files[0], 'UTF-8')
51-
52- const fileElement = document.getElementById('bytom-restore-file-upload')
53- fileElement.value = ''
54- }
55-
56- restore() {
57- const element = document.getElementById('bytom-restore-file-upload')
58- element.click()
59- }
60-
6138 render() {
6239 const lang = this.props.core.lang
6340 const newButton = <button className='btn btn-primary' onClick={this.backup.bind(this)}>
6441 {lang === 'zh' ? '备份' : 'Backup'}
6542 </button>
66- const restoreButton = <button className='btn btn-primary' onClick={this.restore.bind(this)}>
67- {lang === 'zh' ? '恢复' : 'Restore'}
68- </button>
6943
7044 return (
7145 <div className={componentClassNames(this, 'flex-container', styles.mainContainer)}>
@@ -73,9 +47,7 @@ class Backup extends React.Component {
7347 <PageContent>
7448 {newButton}
7549 <hr/>
76- {restoreButton}
77- <input id='bytom-restore-file-upload' type='file' style={{'display': 'none', 'alignItems': 'center', 'fontSize': '12px'}}
78- onChange={this.handleFileChange.bind(this)}/>
50+ <Restore index='0'></Restore>
7951 </PageContent>
8052 </div>
8153 )
@@ -84,14 +56,12 @@ class Backup extends React.Component {
8456
8557 const mapStateToProps = (state) => ({
8658 core: state.core,
87- navAdvancedState: state.app.navAdvancedState,
8859 })
8960
9061 const mapDispatchToProps = (dispatch) => ({
9162 showError: (err) => {
9263 dispatch({type: 'ERROR', payload: err})
9364 },
94- showRestoreSuccess: () => dispatch({type: 'RESTORE_SUCCESS'})
9565 })
9666
9767 export default connect(
--- /dev/null
+++ b/src/features/backup/components/Restore.jsx
@@ -0,0 +1,73 @@
1+import React from 'react'
2+import {chainClient} from 'utility/environment'
3+import {connect} from 'react-redux'
4+
5+class Restore extends React.Component {
6+ constructor(props) {
7+ super(props)
8+ this.connection = chainClient().connection
9+ this.fileuploadId = `bytom-restore-file-upload-${this.props.index}`
10+ }
11+
12+ handleFileChange(event) {
13+ const files = event.target.files
14+ if (files.length <= 0) {
15+ this.setState((pre) => {
16+ return Object.assign(pre, {key: null})
17+ })
18+ return
19+ }
20+
21+ const fileReader = new FileReader()
22+ fileReader.onload = fileLoadedEvent => {
23+ const backupData = JSON.parse(fileLoadedEvent.target.result)
24+ this.connection.request('/restore-wallet', backupData).then(resp => {
25+ if (resp.status === 'fail') {
26+ this.props.showError(new Error(resp.msg))
27+ return
28+ }
29+ this.props.showSuccess()
30+ })
31+ }
32+ fileReader.readAsText(files[0], 'UTF-8')
33+
34+ const fileElement = document.getElementById(this.fileuploadId)
35+ fileElement.value = ''
36+ }
37+
38+ restore() {
39+ const element = document.getElementById(this.fileuploadId)
40+ element.click()
41+ }
42+
43+ render() {
44+ const lang = this.props.core.lang
45+
46+ return (
47+ <span class='restore'>
48+ <button className='btn btn-primary' onClick={this.restore.bind(this)}>
49+ {lang === 'zh' ? '恢复' : 'Restore'}
50+ </button>
51+ <input id={this.fileuploadId} type='file'
52+ style={{'display': 'none', 'alignItems': 'center', 'fontSize': '12px'}}
53+ onChange={this.handleFileChange.bind(this)}/>
54+ </span>
55+ )
56+ }
57+}
58+
59+const mapStateToProps = (state) => ({
60+ core: state.core
61+})
62+
63+const mapDispatchToProps = (dispatch) => ({
64+ showError: (err) => {
65+ dispatch({type: 'ERROR', payload: err})
66+ },
67+ showSuccess: () => dispatch({type: 'RESTORE_SUCCESS'})
68+})
69+
70+export default connect(
71+ mapStateToProps,
72+ mapDispatchToProps
73+)(Restore)
Show on old repository browser