conflict in blocks

This commit is contained in:
Jonathan Rainville 2018-10-24 10:42:06 -04:00
parent 7eb87f1a25
commit 2ed2f9388b
4 changed files with 48 additions and 37 deletions

View File

@ -4,48 +4,50 @@ import {Row, Col, Card, CardHeader, CardBody} from 'reactstrap';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import CardTitleIdenticon from './CardTitleIdenticon'; import CardTitleIdenticon from './CardTitleIdenticon';
import LoadMore from "./LoadMore";
const Blocks = ({blocks}) => ( const Blocks = ({blocks, showLoadMore, loadMore}) => (
<Row> <Row>
<Col> <Col>
<h1>Blocks</h1> <Card>
{blocks.map(block => ( <CardHeader>
<Card key={block.number}> <h1>Blocks</h1>
<CardHeader> </CardHeader>
<CardTitleIdenticon id={block.hash}>Block&nbsp; <CardBody>
<Link to={`/embark/explorer/blocks/${block.number}`}> {blocks.map(block => (
{block.number} <div className="explorer-row" key={block.number}>
</Link> <CardTitleIdenticon id={block.hash}>Block&nbsp;
</CardTitleIdenticon> <Link className="align-top" to={`/embark/explorer/blocks/${block.number}`}>
</CardHeader> {block.number}
<CardBody> </Link>
<Row> </CardTitleIdenticon>
<Col> <Row>
<strong>Number</strong> <Col>
<div>{block.number}</div> <strong>Mined On</strong>
</Col> <div>{new Date(block.timestamp * 1000).toLocaleString()}</div>
<Col> </Col>
<strong>Mined On</strong> <Col>
<div>{new Date(block.timestamp * 1000).toLocaleString()}</div> <strong>Gas Used</strong>
</Col> <div>{block.gasUsed}</div>
<Col> </Col>
<strong>Gas Used</strong> <Col>
<div>{block.gasUsed}</div> <strong>TX Count</strong>
</Col> <div>{block.transactions.length}</div>
<Col> </Col>
<strong>TX Count</strong> </Row>
<div>{block.transactions.length}</div> </div>
</Col> ))}
</Row> {showLoadMore && <LoadMore loadMore={() => loadMore()} />}
</CardBody> </CardBody>
</Card> </Card>
))}
</Col> </Col>
</Row> </Row>
); );
Blocks.propTypes = { Blocks.propTypes = {
blocks: PropTypes.arrayOf(PropTypes.object) blocks: PropTypes.arrayOf(PropTypes.object),
showLoadMore: PropTypes.bool,
loadMore: PropTypes.func
}; };
export default Blocks; export default Blocks;

View File

@ -0,0 +1,9 @@
.explorer-row {
margin-bottom: 20px;
padding-bottom: 5px;
border-bottom: 1px solid #c8ced3;
}
.dark-theme .explorer-row {
border-bottom-color: #23282c;
}

View File

@ -8,6 +8,8 @@ import AccountsContainer from '../containers/AccountsContainer';
import BlocksContainer from '../containers/BlocksContainer'; import BlocksContainer from '../containers/BlocksContainer';
import TransactionsContainer from '../containers/TransactionsContainer'; import TransactionsContainer from '../containers/TransactionsContainer';
import './Explorer.css';
const ExplorerDashboardLayout = () => ( const ExplorerDashboardLayout = () => (
<React.Fragment> <React.Fragment>
<Row> <Row>

View File

@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
import {blocks as blocksAction, initBlockHeader, stopBlockHeader} from '../actions'; import {blocks as blocksAction, initBlockHeader, stopBlockHeader} from '../actions';
import Blocks from '../components/Blocks'; import Blocks from '../components/Blocks';
import DataWrapper from "../components/DataWrapper"; import DataWrapper from "../components/DataWrapper";
import LoadMore from "../components/LoadMore";
import {getBlocks} from "../reducers/selectors"; import {getBlocks} from "../reducers/selectors";
class BlocksContainer extends Component { class BlocksContainer extends Component {
@ -34,9 +33,8 @@ class BlocksContainer extends Component {
return ( return (
<React.Fragment> <React.Fragment>
<DataWrapper shouldRender={this.props.blocks.length > 0} {...this.props} render={({blocks}) => ( <DataWrapper shouldRender={this.props.blocks.length > 0} {...this.props} render={({blocks}) => (
<Blocks blocks={blocks} /> <Blocks blocks={blocks} showLoadMore={(this.loadMoreFrom() >= 0)} loadMore={() => this.loadMore()} />
)} /> )} />
{(this.loadMoreFrom() >= 0) ? <LoadMore loadMore={() => this.loadMore()} /> : <React.Fragment />}
</React.Fragment> </React.Fragment>
); );
} }