-
Notifications
You must be signed in to change notification settings - Fork 65
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor the each headersection into its own file (reducers, componen…
…ts and containers)
- Loading branch information
Roger Ko
authored and
Roger Ko
committed
Jan 29, 2019
1 parent
5bf3c90
commit 1019121
Showing
16 changed files
with
237 additions
and
121 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
Empty file.
Empty file.
Empty file.
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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, | ||
); | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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, | ||
); | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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, | ||
); | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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, | ||
); | ||
|
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.