Refactor the each headersection into its own file (reducers, componen…

…ts and containers)

src/components/HeaderSection.jsx

@@ -0,0 +1,39 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+
+class HeaderSection extends Component {
+  constructor(props){
+    super(props);
+  }
+
+  componentDidMount(){
+  }
+
+  render(){
+    let imgPath = `../static/images/${this.props.icon}`;
+    return(
+      <div className="col-sm-3">
+        <div className={this.props.classId}>
+          <div className="row">
+            <div className="col-xs-8">
+              <h4>{this.props.title}</h4>
+              {this.props.value}
+            </div>
+            <div className="col-xs-4">
+              <img src={imgPath}/>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+HeaderSection.propTypes = {
+  classId: PropTypes.string,
+  title: PropTypes.string,
+  icon: PropTypes.string,
+  value: PropTypes.string
+};
+
+export default HeaderSection;

src/components/HeaderSectionLastBlock.jsx

@@ -0,0 +1,23 @@
+import React, {Component} from 'react';
+import HeaderSection from './HeaderSection.jsx';
+import PropTypes from 'prop-types';
+
+class HeaderSectionLastBlock extends Component {
+  constructor(props){
+    super(props);
+  }
+
+  render(){
+    return (<HeaderSection key={0} action={this.props.action} title={this.props.title} classId={this.props.class} icon={this.props.icon} value={this.props.value}/>);
+  }
+}
+
+HeaderSectionLastBlock.propTypes = {
+  action: PropTypes.string,
+  class: PropTypes.string,
+  title: PropTypes.string,
+  icon: PropTypes.string,
+  value: PropTypes.string
+};
+
+export default HeaderSectionLastBlock;

src/components/HeaderSectionMiningStatus.jsx

@@ -0,0 +1,23 @@
+import React, {Component} from 'react';
+import HeaderSection from './HeaderSection.jsx';
+import PropTypes from 'prop-types';
+
+class HeaderSectionMiningStatus extends Component {
+  constructor(props){
+    super(props);
+  }
+
+  render(){
+    return (<HeaderSection key={0} action={this.props.action} title={this.props.title} classId={this.props.class} icon={this.props.icon} value={this.props.value}/>);
+  }
+}
+
+HeaderSectionMiningStatus.propTypes = {
+  action: PropTypes.string,
+  class: PropTypes.string,
+  title: PropTypes.string,
+  icon: PropTypes.string,
+  value: PropTypes.string
+};
+
+export default HeaderSectionMiningStatus;

src/components/HeaderSectionRPCServer.jsx

@@ -0,0 +1,23 @@
+import React, {Component} from 'react';
+import HeaderSection from './HeaderSection.jsx';
+import PropTypes from 'prop-types';
+
+class HeaderSectionRPCServer extends Component {
+  constructor(props){
+    super(props);
+  }
+
+  render(){
+    return (<HeaderSection key={0} action={this.props.action} title={this.props.title} classId={this.props.class} icon={this.props.icon} value={this.props.value}/>);
+  }
+}
+
+HeaderSectionRPCServer.propTypes = {
+  action: PropTypes.string,
+  class: PropTypes.string,
+  title: PropTypes.string,
+  icon: PropTypes.string,
+  value: PropTypes.string
+};
+
+export default HeaderSectionRPCServer;

src/components/HeaderSectionTransactions.jsx

@@ -0,0 +1,23 @@
+import React, {Component} from 'react';
+import HeaderSection from './HeaderSection.jsx';
+import PropTypes from 'prop-types';
+
+class HeaderSectionTransactions extends Component {
+  constructor(props){
+    super(props);
+  }
+
+  render(){
+    return (<HeaderSection key={0} action={this.props.action} title={this.props.title} classId={this.props.class} icon={this.props.icon} value={this.props.value}/>);
+  }
+}
+
+HeaderSectionTransactions.propTypes = {
+  action: PropTypes.string,
+  class: PropTypes.string,
+  title: PropTypes.string,
+  icon: PropTypes.string,
+  value: PropTypes.string
+};
+
+export default HeaderSectionTransactions;

src/components/HeaderSections.jsx

@@ -1,61 +1,24 @@
 import React, {Component} from 'react';
-import PropTypes from 'prop-types';
+import HeaderSectionLastBlock from './HeaderSectionLastBlock.jsx';
+import HeaderSectionRPCServer from './HeaderSectionRPCServer.jsx';
+import HeaderSectionTransactions from './HeaderSectionTransactions.jsx';
+import HeaderSectionMiningStatus from './HeaderSectionMiningStatus.jsx';
 
 class HeaderSections extends Component {
   constructor(props){
     super(props);
   }
 
   render(){
-    var headerList = this.props.sectionList.map((section, index) => {
-      return (<SectionItem key={index} action={section.action} title={section.title} classId={section.class} icon={section.icon} value={section.value}/>);
-    });
     return(
       <div className="row">
-        {headerList}
+        <HeaderSectionLastBlock />
+        <HeaderSectionRPCServer />
+        <HeaderSectionTransactions />
+        <HeaderSectionMiningStatus />
       </div>
     );
   }
 }
 
-class SectionItem extends Component {
-  constructor(props){
-    super(props);
-  }
-
-  componentDidMount(){
-
-  }
-
-  render(){
-    let imgPath = `../static/images/${this.props.icon}`;
-    return(
-      <div className="col-sm-3">
-        <div className={this.props.classId}>
-          <div className="row">
-            <div className="col-xs-8">
-              <h4>{this.props.title}</h4>
-              {this.props.value}
-            </div>
-            <div className="col-xs-4">
-              <img src={imgPath}/>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-HeaderSections.propTypes = {
-  sectionList: PropTypes.array
-};
-
-SectionItem.propTypes = {
-  classId: PropTypes.string,
-  title: PropTypes.string,
-  icon: PropTypes.string,
-  value: PropTypes.string
-};
-
 export default HeaderSections;

src/reducers/headerSectionLastBlock.js

@@ -0,0 +1,21 @@
+import { handleActions } from 'redux-actions';
+import { getLatestBlockFulfilled } from '../actions';
+
+const initialState = {
+  title: 'Last Block',
+  action: 'getLatestBlockNumber',
+  class: 'last-block',
+  icon: 'last-block.png',
+  tag: 'lastBlock',
+  value: '',
+};
+
+const updateState = (state, {payload}) => ({ value: payload.toString() });
+
+export default handleActions(
+  {
+    [getLatestBlockFulfilled]: updateState,
+  },
+  initialState,
+);
+

src/reducers/headerSectionMiningStatus.js

@@ -0,0 +1,16 @@
+import { handleActions } from 'redux-actions';
+
+const initialState = {
+  title: 'Mining Status',
+  action: 'getMiningStatus',
+  class: 'mining-status',
+  icon: 'mining-status.png',
+  tag: 'miningStatus',
+  value: '',
+};
+
+export default handleActions(
+  {},
+  initialState,
+);
+

src/reducers/headerSectionRPCServer.js

@@ -0,0 +1,17 @@
+import { handleActions } from 'redux-actions';
+import { getRpcServer } from '../actions';
+
+const initialState = {
+  title: 'RPC Server',
+  action: 'getRpcServer',
+  class: 'rpc-server',
+  icon: 'rpc-server.png',
+  tag: 'rpcServer',
+  value: getRpcServer().payload,
+};
+
+export default handleActions(
+  {},
+  initialState,
+);
+

src/reducers/headerSectionTransactions.js

@@ -0,0 +1,36 @@
+import { handleActions } from 'redux-actions';
+import { getLatestTransactionFulfilled } from '../actions';
+
+const initialState = {
+  title: 'Transactions',
+  action: 'getTransactionCount',
+  class: 'transactions',
+  icon: 'transactions.png',
+  tag: 'transactions',
+  value: '',
+};
+
+const updateState = (state, { payload }) => {
+  let newState = { value: state.value };
+  for (let key in payload) {
+    if (key === 'ethValue') {
+      const newkey = key.charAt(0).toUpperCase() + key.substr(1);
+      newState.value += `${newkey}: ${payload[key]}
+    `;
+    }
+    if (key === 'from') {
+      const newkey = key.charAt(0).toUpperCase() + key.substr(1);
+      newState.value += `${newkey}: ${payload[key].substring(0, 12)}...\
+    `;
+    }
+  }
+  return newState;
+};
+
+export default handleActions(
+  {
+    [getLatestTransactionFulfilled]: updateState,
+  },
+  initialState,
+);
+