Add BlockStatus component (re-usable)

openethereum · Nov 1, 2016 · 9a02f1d · 9a02f1d
1 parent 7fe9df1
commit 9a02f1d
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 43 deletions.
diff --git a/js/src/ui/BlockStatus/blockStatus.css b/js/src/ui/BlockStatus/blockStatus.css
@@ -0,0 +1,22 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.blockNumber {
+}
+
+.syncStatus {
+}
diff --git a/js/src/ui/BlockStatus/blockStatus.js b/js/src/ui/BlockStatus/blockStatus.js
@@ -0,0 +1,90 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import styles from './blockStatus.css';
+
+class BlockStatus extends Component {
+  static propTypes = {
+    blockNumber: PropTypes.object,
+    syncing: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.object
+    ])
+  }
+
+  render () {
+    const { blockNumber, syncing } = this.props;
+
+    if (!blockNumber) {
+      return null;
+    }
+
+    if (!syncing) {
+      return (
+        <div className={ styles.blockNumber }>
+          { blockNumber.toFormat() } best block
+        </div>
+      );
+    }
+
+    if (!syncing.warpChunksAmount.eq(syncing.warpChunksProcessed)) {
+      return (
+        <div className={ styles.syncStatus }>
+          { syncing.warpChunksProcessed.mul(100).div(syncing.warpChunksAmount).toFormat(2) }% warp restore
+        </div>
+      );
+    }
+
+    let warpStatus = null;
+
+    if (syncing.blockGap) {
+      const [first, last] = syncing.blockGap;
+
+      warpStatus = (
+        <span>, { first.mul(100).div(last).toFormat(2) }% historic</span>
+      );
+    }
+
+    return (
+      <div className={ styles.syncStatus }>
+        <span>{ syncing.currentBlock.toFormat() }/{ syncing.highestBlock.toFormat() } syncing</span>
+        { warpStatus }
+      </div>
+    );
+  }
+}
+
+function mapStateToProps (state) {
+  const { blockNumber, syncing } = state.nodeStatus;
+
+  return {
+    blockNumber,
+    syncing
+  };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(BlockStatus);
diff --git a/js/src/ui/BlockStatus/index.js b/js/src/ui/BlockStatus/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './blockStatus';
diff --git a/js/src/ui/index.js b/js/src/ui/index.js
@@ -20,6 +20,7 @@ import ActionbarSearch from './Actionbar/Search';
 import ActionbarSort from './Actionbar/Sort';
 import Badge from './Badge';
 import Balance from './Balance';
+import BlockStatus from './BlockStatus';
 import Button from './Button';
 import ConfirmDialog from './ConfirmDialog';
 import Container, { Title as ContainerTitle } from './Container';
@@ -46,6 +47,7 @@ export {
   AddressSelect,
   Badge,
   Balance,
+  BlockStatus,
   Button,
   ConfirmDialog,
   Container,

diff --git a/js/src/views/Application/Status/status.js b/js/src/views/Application/Status/status.js
@@ -18,71 +18,35 @@ import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
+import { BlockStatus } from '../../../ui';
+
 import styles from './status.css';
 
 class Status extends Component {
   static propTypes = {
-    blockNumber: PropTypes.object,
+    blockNumber: PropTypes.object.isRequired,
     clientVersion: PropTypes.string,
     netPeers: PropTypes.object,
     netChain: PropTypes.string,
-    syncing: PropTypes.oneOfType([
-      PropTypes.bool,
-      PropTypes.object
-    ]),
     isTest: PropTypes.bool
   }
 
   render () {
-    const { clientVersion, blockNumber, netChain, netPeers, syncing, isTest } = this.props;
+    const { blockNumber, clientVersion, netChain, netPeers, isTest } = this.props;
     const netStyle = `${styles.network} ${styles[isTest ? 'networktest' : 'networklive']}`;
-    let blockStatus = null;
 
     if (!blockNumber) {
       return null;
     }
 
-    if (syncing) {
-      if (!syncing.warpChunksAmount.eq(syncing.warpChunksProcessed)) {
-        blockStatus = (
-          <div className={ styles.syncing }>
-            { syncing.warpChunksProcessed.mul(100).div(syncing.warpChunksAmount).toFormat(2) }% warp restore
-          </div>
-        );
-      } else {
-        let warpStatus = null;
-
-        if (syncing.blockGap) {
-          const [first, last] = syncing.blockGap;
-
-          warpStatus = (
-            <span>, { first.mul(100).div(last).toFormat(2) }% historic</span>
-          );
-        }
-
-        blockStatus = (
-          <div className={ styles.syncing }>
-            <span>{ syncing.currentBlock.toFormat() }/{ syncing.highestBlock.toFormat() } syncing</span>
-            { warpStatus }
-          </div>
-        );
-      }
-    } else {
-      blockStatus = (
-        <div className={ styles.block }>
-          { blockNumber.toFormat() } best block
-        </div>
-      );
-    }
-
     return (
       <div className={ styles.status }>
         <div className={ styles.version }>
           { clientVersion }
         </div>
         <div className={ styles.netinfo }>
           <div>
-            { blockStatus }
+            <BlockStatus />
             <div className={ styles.peers }>
               { netPeers.active.toFormat() }/{ netPeers.connected.toFormat() }/{ netPeers.max.toFormat() } peers
             </div>
@@ -97,14 +61,13 @@ class Status extends Component {
 }
 
 function mapStateToProps (state) {
-  const { blockNumber, clientVersion, netPeers, netChain, syncing, isTest } = state.nodeStatus;
+  const { blockNumber, clientVersion, netPeers, netChain, isTest } = state.nodeStatus;
 
   return {
     blockNumber,
     clientVersion,
     netPeers,
     netChain,
-    syncing,
     isTest
   };
 }