| Revision | 623949c636ef933089d6bdbbf9e28ab12dd279ca (tree) |
|---|---|
| Zeit | 2018-04-23 15:52:30 |
| Autor | Yongfeng LI <wliyongfeng@gmai...> |
| Commiter | Yongfeng LI |
refactor Restore component
src/features/backup/components/Backup.jsx (diff) src/features/backup/components/Restore.jsx (diff)| @@ -4,6 +4,7 @@ import {PageContent, PageTitle} from 'features/shared/components' | ||
| 4 | 4 | import styles from './Backup.scss' |
| 5 | 5 | import {connect} from 'react-redux' |
| 6 | 6 | import {chainClient} from 'utility/environment' |
| 7 | +import Restore from './Restore' | |
| 7 | 8 | |
| 8 | 9 | class Backup extends React.Component { |
| 9 | 10 | constructor(props) { |
| @@ -13,6 +14,11 @@ class Backup extends React.Component { | ||
| 13 | 14 | |
| 14 | 15 | backup() { |
| 15 | 16 | this.connection.request('/backup-wallet').then(resp => { |
| 17 | + if (resp.status === 'fail') { | |
| 18 | + this.props.showError(new Error(resp.msg)) | |
| 19 | + return | |
| 20 | + } | |
| 21 | + | |
| 16 | 22 | const date = new Date() |
| 17 | 23 | const dateStr = date.toLocaleDateString().split(' ')[0] |
| 18 | 24 | const timestamp = date.getTime() |
| @@ -29,43 +35,11 @@ class Backup extends React.Component { | ||
| 29 | 35 | }) |
| 30 | 36 | } |
| 31 | 37 | |
| 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 | - | |
| 61 | 38 | render() { |
| 62 | 39 | const lang = this.props.core.lang |
| 63 | 40 | const newButton = <button className='btn btn-primary' onClick={this.backup.bind(this)}> |
| 64 | 41 | {lang === 'zh' ? '备份' : 'Backup'} |
| 65 | 42 | </button> |
| 66 | - const restoreButton = <button className='btn btn-primary' onClick={this.restore.bind(this)}> | |
| 67 | - {lang === 'zh' ? '恢复' : 'Restore'} | |
| 68 | - </button> | |
| 69 | 43 | |
| 70 | 44 | return ( |
| 71 | 45 | <div className={componentClassNames(this, 'flex-container', styles.mainContainer)}> |
| @@ -73,9 +47,7 @@ class Backup extends React.Component { | ||
| 73 | 47 | <PageContent> |
| 74 | 48 | {newButton} |
| 75 | 49 | <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> | |
| 79 | 51 | </PageContent> |
| 80 | 52 | </div> |
| 81 | 53 | ) |
| @@ -84,14 +56,12 @@ class Backup extends React.Component { | ||
| 84 | 56 | |
| 85 | 57 | const mapStateToProps = (state) => ({ |
| 86 | 58 | core: state.core, |
| 87 | - navAdvancedState: state.app.navAdvancedState, | |
| 88 | 59 | }) |
| 89 | 60 | |
| 90 | 61 | const mapDispatchToProps = (dispatch) => ({ |
| 91 | 62 | showError: (err) => { |
| 92 | 63 | dispatch({type: 'ERROR', payload: err}) |
| 93 | 64 | }, |
| 94 | - showRestoreSuccess: () => dispatch({type: 'RESTORE_SUCCESS'}) | |
| 95 | 65 | }) |
| 96 | 66 | |
| 97 | 67 | export default connect( |
| @@ -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) |
Fork