diff --git a/src/components/HeaderSection.jsx b/src/components/HeaderSection.jsx
new file mode 100644
index 0000000..bdde79c
--- /dev/null
+++ b/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(
+
+
+
+
+
{this.props.title}
+ {this.props.value}
+
+
+
+
+
+
+
+ );
+ }
+}
+
+HeaderSection.propTypes = {
+ classId: PropTypes.string,
+ title: PropTypes.string,
+ icon: PropTypes.string,
+ value: PropTypes.string
+};
+
+export default HeaderSection;
diff --git a/src/components/HeaderSectionLastBlock.jsx b/src/components/HeaderSectionLastBlock.jsx
new file mode 100644
index 0000000..d60401a
--- /dev/null
+++ b/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 ();
+ }
+}
+
+HeaderSectionLastBlock.propTypes = {
+ action: PropTypes.string,
+ class: PropTypes.string,
+ title: PropTypes.string,
+ icon: PropTypes.string,
+ value: PropTypes.string
+};
+
+export default HeaderSectionLastBlock;
\ No newline at end of file
diff --git a/src/components/HeaderSectionMiningStatus.jsx b/src/components/HeaderSectionMiningStatus.jsx
new file mode 100644
index 0000000..c889e0f
--- /dev/null
+++ b/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 ();
+ }
+}
+
+HeaderSectionMiningStatus.propTypes = {
+ action: PropTypes.string,
+ class: PropTypes.string,
+ title: PropTypes.string,
+ icon: PropTypes.string,
+ value: PropTypes.string
+};
+
+export default HeaderSectionMiningStatus;
\ No newline at end of file
diff --git a/src/components/HeaderSectionRPCServer.jsx b/src/components/HeaderSectionRPCServer.jsx
new file mode 100644
index 0000000..83420c1
--- /dev/null
+++ b/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 ();
+ }
+}
+
+HeaderSectionRPCServer.propTypes = {
+ action: PropTypes.string,
+ class: PropTypes.string,
+ title: PropTypes.string,
+ icon: PropTypes.string,
+ value: PropTypes.string
+};
+
+export default HeaderSectionRPCServer;
\ No newline at end of file
diff --git a/src/components/HeaderSectionTransactions.jsx b/src/components/HeaderSectionTransactions.jsx
new file mode 100644
index 0000000..f04df0d
--- /dev/null
+++ b/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 ();
+ }
+}
+
+HeaderSectionTransactions.propTypes = {
+ action: PropTypes.string,
+ class: PropTypes.string,
+ title: PropTypes.string,
+ icon: PropTypes.string,
+ value: PropTypes.string
+};
+
+export default HeaderSectionTransactions;
\ No newline at end of file
diff --git a/src/components/HeaderSections.jsx b/src/components/HeaderSections.jsx
index 3ca3c76..3616d69 100644
--- a/src/components/HeaderSections.jsx
+++ b/src/components/HeaderSections.jsx
@@ -1,5 +1,8 @@
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){
@@ -7,55 +10,15 @@ class HeaderSections extends Component {
}
render(){
- var headerList = this.props.sectionList.map((section, index) => {
- return ();
- });
return(
- {headerList}
+
+
+
+
);
}
}
-class SectionItem extends Component {
- constructor(props){
- super(props);
- }
-
- componentDidMount(){
-
- }
-
- render(){
- let imgPath = `../static/images/${this.props.icon}`;
- return(
-
-
-
-
-
{this.props.title}
- {this.props.value}
-
-
-
-
-
-
-
- );
- }
-}
-
-HeaderSections.propTypes = {
- sectionList: PropTypes.array
-};
-
-SectionItem.propTypes = {
- classId: PropTypes.string,
- title: PropTypes.string,
- icon: PropTypes.string,
- value: PropTypes.string
-};
-
export default HeaderSections;
diff --git a/src/containers/HeaderSectionLastBlockContainer.jsx b/src/containers/HeaderSectionLastBlockContainer.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/containers/HeaderSectionMiningStatusContainer.jsx b/src/containers/HeaderSectionMiningStatusContainer.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/containers/HeaderSectionRPCServerContainer.jsx b/src/containers/HeaderSectionRPCServerContainer.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/containers/HeaderSectionTransactionContainer.jsx b/src/containers/HeaderSectionTransactionContainer.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/reducers/headerSectionLastBlock.js b/src/reducers/headerSectionLastBlock.js
new file mode 100644
index 0000000..e668756
--- /dev/null
+++ b/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,
+);
+
diff --git a/src/reducers/headerSectionMiningStatus.js b/src/reducers/headerSectionMiningStatus.js
new file mode 100644
index 0000000..b2f7ca4
--- /dev/null
+++ b/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,
+);
+
diff --git a/src/reducers/headerSectionRPCServer.js b/src/reducers/headerSectionRPCServer.js
new file mode 100644
index 0000000..65f7398
--- /dev/null
+++ b/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,
+);
+
diff --git a/src/reducers/headerSectionTransactions.js b/src/reducers/headerSectionTransactions.js
new file mode 100644
index 0000000..e80bca3
--- /dev/null
+++ b/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,
+);
+
diff --git a/src/reducers/headerSections.js b/src/reducers/headerSections.js
deleted file mode 100644
index 1b04bc1..0000000
--- a/src/reducers/headerSections.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import { handleActions } from 'redux-actions';
-import { getRpcServer, getLatestTransactionFulfilled, getLatestBlockFulfilled} from '../actions';
-import { deepCopyState } from '../lib/utils';
-
-const initialState = {
- sectionList: [
- {
- title: 'Last Block',
- action: 'getLatestBlockNumber',
- class: 'last-block',
- icon: 'last-block.png',
- tag: 'lastBlock',
- value: '',
- },
- {
- title: 'RPC Server',
- action: 'getRpcServer',
- class: 'rpc-server',
- icon: 'rpc-server.png',
- tag: 'rpcServer',
- value: getRpcServer().payload,
- },
- {
- title: 'Transactions',
- action: 'getTransactionCount',
- class: 'transactions',
- icon: 'transactions.png',
- tag: 'transactions',
- value: '',
- },
- {
- title: 'Mining Status',
- action: 'getMiningStatus',
- class: 'mining-status',
- icon: 'mining-status.png',
- tag: 'miningStatus',
- value: '',
- },
- ],
-};
-
-export default handleActions(
- {
- [getLatestTransactionFulfilled]: (state, { payload }) => {
- const newState = deepCopyState(state);
- newState.sectionList.map(section => {
- if (section.tag === 'transactions') {
- for (let key in payload) {
- if (key === 'ethValue') {
- const newkey = key.charAt(0).toUpperCase() + key.substr(1);
- section.value += `${newkey}: ${payload[key]}
- `;
- }
- if (key === 'from') {
- const newkey = key.charAt(0).toUpperCase() + key.substr(1);
- section.value += `${newkey}: ${payload[key].substring(0, 12)}...\
- `;
- }
- }
- }
- });
- return newState;
- },
- [getLatestBlockFulfilled]: (state, {payload}) => {
- const newState = deepCopyState(state);
- newState.sectionList.map((section) => {
- if (section.tag === 'lastBlock') section.value = payload.toString();
- });
- return newState;
- },
- },
- initialState,
-);
-
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 80ef345..a7f51bd 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -2,13 +2,19 @@ import { combineReducers } from 'redux';
import accounts from './accounts';
import transactions from './transactions';
import blocks from './blocks';
-import headerSections from './headerSections';
+import headerSectionLastBlock from './headerSectionLastBlock';
+import headerSectionMiningStatus from './headerSectionMiningStatus';
+import headerSectionRPCServer from './headerSectionRPCServer';
+import headerSectionTransactions from './headerSectionTransactions';
import events from './events';
export default combineReducers({
accounts,
transactions,
blocks,
- headerSections,
+ headerSectionLastBlock,
+ headerSectionTransactions,
+ headerSectionRPCServer,
+ headerSectionMiningStatus,
events,
});