src/features/backup/components/Backup.jsx

   1 import React from 'react'
   2 import componentClassNames from 'utility/componentClassNames'
   3 import {PageContent, PageTitle} from 'features/shared/components'
   4 import styles from './Backup.scss'
   5 import {connect} from 'react-redux'
   6 import {chainClient} from 'utility/environment'
   7 import actions from 'actions'
   8
   9 class Backup extends React.Component {
  10   constructor(props) {
  11     super(props)
  12     this.state = {
  13       value: null
  14     }
  15   }
  16
  17   setValue(event) {
  18     this.setState({
  19       value:event.target.value
  20     })
  21   }
  22
  23   backup() {
  24     chainClient().backUp.backup()
  25       .then(resp => {
  26         const date = new Date()
  27         const dateStr = date.toLocaleDateString().split(' ')[0]
  28         const timestamp = date.getTime()
  29         const fileName = ['bytom-wallet-backup-', dateStr, timestamp].join('-')
  30
  31         let element = document.createElement('a')
  32         element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(resp.data)))
  33         element.setAttribute('download', fileName)
  34         element.style.display = 'none'
  35         document.body.appendChild(element)
  36         element.click()
  37
  38         document.body.removeChild(element)
  39       })
  40       .catch(err => { throw {_error: err} })
  41   }
  42
  43   handleFileChange(event) {
  44     const files = event.target.files
  45     if (files.length <= 0) {
  46       this.setState({key: null})
  47       return
  48     }
  49
  50     const fileReader = new FileReader()
  51     fileReader.onload = fileLoadedEvent => {
  52       const backupData = JSON.parse(fileLoadedEvent.target.result)
  53       this.props.restoreFile(backupData)
  54     }
  55     fileReader.readAsText(files[0], 'UTF-8')
  56
  57     const fileElement = document.getElementById('bytom-restore-file-upload')
  58     fileElement.value = ''
  59   }
  60
  61   restore() {
  62     const element = document.getElementById('bytom-restore-file-upload')
  63     element.click()
  64   }
  65
  66   render() {
  67     const lang = this.props.core.lang
  68
  69     const newButton = <button className={`btn btn-primary btn-lg ${styles.submit}`} onClick={this.backup.bind(this)}>
  70       {lang === 'zh' ? '下载备份' : 'Download Backup'}
  71     </button>
  72     const restoreButton = <button className={`btn btn-primary btn-lg ${styles.submit}`} onClick={this.restore.bind(this)}>
  73       {lang === 'zh' ? '选择备份文件' : 'Select Restore File'}
  74     </button>
  75     const rescanButton = <button className={`btn btn-primary btn-lg ${styles.submit}`}  onClick={() => this.props.rescan()}>
  76       {lang === 'zh' ? '重新扫描' : 'Rescan'}
  77     </button>
  78
  79     return (
  80       <div className='flex-container'>
  81         <PageTitle title={lang === 'zh' ? '备份与恢复' : 'Backup and Restore'}/>
  82         <PageContent>
  83
  84           <div onChange={e => this.setValue(e)}>
  85             <div className={styles.choices}>
  86               <div className={styles.choice_wrapper}>
  87                 <label>
  88                   <input className={styles.choice_radio_button}
  89                          type='radio'
  90                          name='type'
  91                          value='backup'/>
  92                   <div className={`${styles.choice} ${styles.new} `}>
  93                     <span className={styles.choice_title}>{lang === 'zh' ?'备份':'Back Up'}</span>
  94                     <p>
  95                       This option will back up all data stored in this core,
  96                       including blockchain data, accounts, assets
  97                       and balances.
  98                     </p>
  99                   </div>
 100                 </label>
 101               </div>
 102
 103               <div className={styles.choice_wrapper}>
 104                 <label>
 105                   <input className={styles.choice_radio_button}
 106                          type='radio'
 107                          name='type'
 108                          value='restore' />
 109                   <div className={`${styles.choice} ${styles.join}`}>
 110                     <span className={styles.choice_title}>{lang === 'zh' ?'恢复':'Restore'}</span>
 111                     <p>
 112                       This option will restore the wallet data form files.
 113                       You might need to rescan your wallet, if you balance is not up to date
 114                     </p>
 115                   </div>
 116                 </label>
 117               </div>
 118
 119               <div className={styles.choice_wrapper}>
 120                 <label>
 121                   <input className={styles.choice_radio_button}
 122                          type='radio'
 123                          name='type'
 124                          value='rescan' />
 125                   <div className={`${styles.choice} ${styles.join}`}>
 126                     <span className={styles.choice_title}>{lang === 'zh' ?'重新扫描':'Rescan'}</span>
 127                     <p>
 128                       This option will rescan your wallet and update your balance.
 129                     </p>
 130                   </div>
 131                 </label>
 132               </div>
 133
 134
 135             </div>
 136
 137             <div className={styles.choices}>
 138               <div>
 139                 {
 140                   this.state.value === 'backup'
 141                   &&<span className={styles.submitWrapper}>{newButton}</span>
 142                 }
 143               </div>
 144
 145               <div>
 146                 {
 147                   this.state.value === 'restore'
 148                   &&
 149                     <span className={styles.submitWrapper}>{restoreButton}</span>
 150                 }
 151                 <input id='bytom-restore-file-upload' type='file'
 152                        style={{'display': 'none', 'alignItems': 'center', 'fontSize': '12px'}}
 153                        onChange={this.handleFileChange.bind(this)}/>
 154               </div>
 155               <div>
 156                 {
 157                   this.state.value === 'rescan'
 158                   &&
 159                   <span className={styles.submitWrapper}>{rescanButton}</span>
 160                 }
 161               </div>
 162             </div>
 163           </div>
 164
 165         </PageContent>
 166       </div>
 167     )
 168   }
 169 }
 170
 171 const mapStateToProps = (state) => ({
 172   core: state.core,
 173   navAdvancedState: state.app.navAdvancedState,
 174 })
 175
 176 const mapDispatchToProps = (dispatch) => ({
 177   backup: () => dispatch(actions.backUp.backup()),
 178   rescan: () => dispatch(actions.backUp.rescan()),
 179   restoreFile: (backUpFile) => dispatch(actions.backUp.restore(backUpFile)),
 180 })
 181
 182 export default connect(
 183   mapStateToProps,
 184   mapDispatchToProps
 185 )(Backup)