1  import React, {Component} from 'react';
 2  import {connect} from 'react-redux';
 3  import PropTypes from 'prop-types';
 4  import {withRouter} from 'react-router-dom';
 5  
 6  import {block as blockAction} from '../actions';
 7  import Block from '../components/Block';
 8  import DataWrapper from "../components/DataWrapper";
 9  import Transactions from '../components/Transactions';
10  import {getBlock, getTransactionsByBlock} from "../reducers/selectors";
11  
12  class BlockContainer extends Component {
13    componentDidMount() {
14      this.props.fetchBlock(this.props.match.params.blockNumber);
15    }
16  
17    render() {
18      return (
19        <DataWrapper shouldRender={this.props.block !== undefined } {...this.props} render={({block, transactions}) => (
20          <React.Fragment>
21            <Block block={block} />
22            <Transactions transactions={transactions || []} />
23          </React.Fragment>
24        )} />
25      );
26    }
27  }
28  
29  function mapStateToProps(state, props) {
30    return {
31      block: getBlock(state, props.match.params.blockNumber),
32      transactions: getTransactionsByBlock(state, props.match.params.blockNumber),
33      error: state.errorMessage,
34      loading: state.loading
35    };
36  }
37  
38  BlockContainer.propTypes = {
39    match: PropTypes.object,
40    block: PropTypes.object,
41    transactions: PropTypes.arrayOf(PropTypes.object),
42    fetchBlock: PropTypes.func,
43    error: PropTypes.string
44  };
45  
46  export default withRouter(connect(
47    mapStateToProps,
48    {
49      fetchBlock: blockAction.request
50    }
51  )(BlockContainer));