Split settings tabs to components

react/src/components/dashboard/settings/settings.appUpdatePanel.js

@@ -5,8 +5,14 @@ import Config from '../../../config';
 import {
   getPeersList,
   checkForUpdateUIPromise,
+  updateUIPromise,
 } from '../../../actions/actionCreators';
 
+import { SocketProvider } from 'socket.io-react';
+import io from 'socket.io-client';
+
+const socket = io.connect(`http://127.0.0.1:${Config.agamaPort}`);
+
 let updateProgressBar = {
   patch: -1,
 };
@@ -17,6 +23,9 @@ class AppUpdatePanel extends React.Component {
     this.state = {
       updatePatch: null,
       updateLog: [],
+      updateProgressPatch: null,
+      updatePatch: null,
+      updateBins: null,
     };
     this._checkForUpdateUIPromise = this._checkForUpdateUIPromise.bind(this);
     this._updateUIPromise = this._updateUIPromise.bind(this);
@@ -24,6 +33,14 @@ class AppUpdatePanel extends React.Component {
 
   }
 
+  componentWillMount() {
+    socket.on('patch', msg => this.updateSocketsData = (msg) => {});
+  }
+
+  componentWillUnmount() {
+    socket.removeAllListeners('patch', msg => this.updateSocketsData(msg));
+  }
+
   checkNodes() {
     if (this.state.getPeersCoin) {
       Store.dispatch(getPeersList(this.state.getPeersCoin.split('|')[0]));

react/src/components/dashboard/settings/settings.js

@@ -9,8 +9,6 @@ import {
   addPeerNode,
   getAppInfo,
   shepherdCli,
-  checkForUpdateUIPromise,
-  updateUIPromise,
   triggerToaster,
 } from '../../../actions/actionCreators';
 import Store from '../../../store';
@@ -32,14 +30,6 @@ import SupportPanel from './settings.supportPanel';
 import WalletInfoPanel from './settings.walletInfoPanel';
 import WalletBackupPanel from './settings.walletBackupPanel';
 
-import { SocketProvider } from 'socket.io-react';
-import io from 'socket.io-client';
-
-const socket = io.connect(`http://127.0.0.1:${Config.agamaPort}`);
-let updateProgressBar = {
-  patch: -1,
-};
-
 /*
   TODO:
   1) pre-select active coin in add node tab
@@ -56,15 +46,9 @@ class Settings extends React.Component {
       tabElId: null,
       seedInputVisibility: false,
       nativeOnly: Config.iguanaLessMode,
-      updatePatch: null,
-      updateBins: null,
-      updateLog: [],
-      updateProgressPatch: null,
       disableWalletSpecificUI: false,
     };
     this.updateInput = this.updateInput.bind(this);
-    this._checkForUpdateUIPromise = this._checkForUpdateUIPromise.bind(this);
-    this._updateUIPromise = this._updateUIPromise.bind(this);
     this.updateTabDimensions = this.updateTabDimensions.bind(this);
   }
 
@@ -82,12 +66,10 @@ class Settings extends React.Component {
   }
 
   componentWillMount() {
-    socket.on('patch', msg => this.updateSocketsData(msg));
     window.addEventListener('resize', this.updateTabDimensions);
   }
 
   componentWillUnmount() {
-    socket.removeAllListeners('patch', msg => this.updateSocketsData(msg));
     window.removeEventListener('resize', this.updateTabDimensions);
 
     if (!this.state.disableWalletSpecificUI) {
@@ -118,120 +100,6 @@ class Settings extends React.Component {
     }
   }
 
-  updateSocketsData(data) {
-    if (data &&
-        data.msg &&
-        data.msg.type === 'ui') {
-
-      if (data.msg.status === 'progress' &&
-          data.msg.progress &&
-          data.msg.progress < 100) {
-        this.setState(Object.assign({}, this.state, {
-          updateProgressPatch: data.msg.progress,
-        }));
-        updateProgressBar.patch = data.msg.progress;
-      } else {
-        if (data.msg.status === 'progress' &&
-            data.msg.progress &&
-            data.msg.progress === 100) {
-          let _updateLog = [];
-          _updateLog.push(`${translate('INDEX.UI_UPDATE_DOWNLOADED')}...`);
-          this.setState(Object.assign({}, this.state, {
-            updateLog: _updateLog,
-          }));
-          updateProgressBar.patch = 100;
-        }
-
-        if (data.msg.status === 'done') {
-          let _updateLog = [];
-          _updateLog.push(translate('INDEX.UI_UPDATED'));
-          this.setState(Object.assign({}, this.state, {
-            updateLog: _updateLog,
-            updatePatch: null,
-          }));
-          updateProgressBar.patch = -1;
-        }
-
-        if (data.msg.status === 'error') {
-          let _updateLog = [];
-          _updateLog.push(translate('INDEX.UI_UPDATE_ERROR'));
-          this.setState(Object.assign({}, this.state, {
-            updateLog: _updateLog,
-          }));
-          updateProgressBar.patch = -1;
-        }
-      }
-    } else {
-      if (data &&
-          data.msg) {
-        let _updateLog = this.state.updateLog;
-        _updateLog.push(data.msg);
-        this.setState(Object.assign({}, this.state, {
-          updateLog: _updateLog,
-        }));
-      }
-    }
-  }
-
-  _checkForUpdateUIPromise() {
-    let _updateLog = [];
-    _updateLog.push(translate('INDEX.CHECKING_UI_UPDATE'));
-    this.setState(Object.assign({}, this.state, {
-      updateLog: _updateLog,
-    }));
-
-    checkForUpdateUIPromise()
-    .then((res) => {
-      let _updateLog = this.state.updateLog;
-      _updateLog.push(res.result === 'update' ? (`${translate('INDEX.NEW_UI_UPDATE')} ${res.version.remote}`) : translate('INDEX.YOU_HAVE_LATEST_UI'));
-      this.setState(Object.assign({}, this.state, {
-        updatePatch: res.result === 'update' ? true : false,
-        updateLog: _updateLog,
-      }));
-    });
-  }
-
-  _updateUIPromise() {
-    updateProgressBar.patch = 0;
-    let _updateLog = [];
-    _updateLog.push(`${translate('INDEX.DOWNLOADING_UI_UPDATE')}...`);
-    this.setState(Object.assign({}, this.state, {
-      updateLog: _updateLog,
-    }));
-
-    updateUIPromise();
-  }
-
-  renderUpdateStatus() {
-    let items = [];
-    let patchProgressBar = null;
-    const _updateLogLength = this.state.updateLog.length;
-
-    for (let i = 0; i < _updateLogLength; i++) {
-      items.push(
-        <div key={ `settings-update-log-${i}` }>{ this.state.updateLog[i] }</div>
-      );
-    }
-
-    if (_updateLogLength) {
-      return (
-        <div style={{ minHeight: '200px' }}>
-          <hr />
-          <h5>{ translate('SETTINGS.PROGRESS') }:</h5>
-          <div className="padding-bottom-15">{ items }</div>
-          <div className={ updateProgressBar.patch > -1 ? 'progress progress-sm' : 'hide' }>
-            <div
-              className="progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success font-size-80-percent"
-              style={{ width: `${updateProgressBar.patch}%` }}>
-            </div>
-          </div>
-        </div>
-      );
-    } else {
-      return null;
-    }
-  }
-
   openTab(elemId, tab) {
     setTimeout(() => {
       const _height = document.querySelector(`#${elemId} .panel-collapse .panel-body`).offsetHeight;