1  import React, {Component} from 'react';
 2  import {connect} from 'react-redux';
 3  import PropTypes from 'prop-types';
 4  import {contracts as contractsAction} from "../actions";
 5  
 6  import Contracts from '../components/Contracts';
 7  import DataWrapper from "../components/DataWrapper";
 8  import {getContracts, getFiddleContracts} from "../reducers/selectors";
 9  
10  class ContractsContainer extends Component {
11    componentDidMount() {
12      this.props.fetchContracts();
13    }
14  
15    render() {
16      return (
17        <React.Fragment>
18          <DataWrapper shouldRender={this.props.contracts.length > 0} {...this.props} render={({contracts}) => (
19              <Contracts contracts={contracts} />
20          )} />
21          <DataWrapper shouldRender={this.props.fiddleContracts.length > 0} {...this.props} render={({fiddleContracts}) => (
22            <React.Fragment>
23              <Contracts contracts={fiddleContracts} title="Fiddle contracts" />
24            </React.Fragment>
25          )} />
26        </React.Fragment>
27      );
28    }
29  }
30  
31  function mapStateToProps(state) {
32    return {
33      contracts: getContracts(state), 
34      fiddleContracts: getFiddleContracts(state), 
35      error: state.errorMessage, 
36      loading: state.loading};
37  }
38  
39  ContractsContainer.propTypes = {
40    contracts: PropTypes.array,
41    fiddleContracts: PropTypes.array,
42    fetchContracts: PropTypes.func
43  };
44  
45  export default connect(
46    mapStateToProps,{
47      fetchContracts: contractsAction.request
48    }
49  )(ContractsContainer);