github.com/muhammedhassanm/blockchain@v0.0.0-20200120143007-697261defd4d/build-blockchain-insurance-app-master/web/src/repair-shop/components/RepairOrdersPage.js (about)

     1  'use strict';
     2  
     3  import React, { Props } from 'react';
     4  import PropTypes from 'prop-types';
     5  import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
     6  import { connect } from 'react-redux';
     7  import { bindActionCreators } from 'redux';
     8  import { withRouter } from 'react-router-dom';
     9  
    10  import Loading from '../../shared/Loading';
    11  import * as repairShopActions from '../actions/repairShopActions';
    12  import RepairOrderComponent from './RepairOrderComponent';
    13  
    14  class RepairOrdersPage extends React.Component {
    15  
    16    static get propTypes() {
    17      return {
    18        intl: intlShape.isRequired,
    19        repairOrders: PropTypes.array,
    20        loading: PropTypes.bool.isRequired,
    21        repairShopActions: PropTypes.object.isRequired
    22      };
    23    }
    24  
    25    constructor(props) {
    26      super(props);
    27  
    28      this.toRepairOrderComponent = this.toRepairOrderComponent.bind(this);
    29    }
    30  
    31    toRepairOrderComponent(repairOrder, index) {
    32      return (
    33        <RepairOrderComponent key={index} repairOrder={repairOrder}
    34          onMarkedComplete={this.props.repairShopActions.completeRepairOrder} />
    35      );
    36    }
    37  
    38    render() {
    39      const { repairOrders, loading, intl } = this.props;
    40  
    41      const cards = Array.isArray(repairOrders) ?
    42        repairOrders.map(this.toRepairOrderComponent) : null;
    43      const orders = ((Array.isArray(cards) && cards.length > 0) ||
    44        cards === null) ? cards :
    45        (
    46          <div className='ibm-col-5-5 ibm-col-medium-6-6'>
    47            <FormattedMessage id='No outstanding repair orders.' />
    48          </div>
    49        );
    50      return (
    51        <Loading hidden={loading}
    52          text={intl.formatMessage({ id: 'Loading Repair Orders...' })}>
    53          <div className='ibm-columns ibm-cards' style={{ minHeight: '30vh' }}
    54            data-widget='masonry' data-items='.ibm-col-5-1'>
    55            {orders}
    56          </div>
    57        </Loading>
    58      );
    59    }
    60  }
    61  
    62  function mapStateToProps(state, ownProps) {
    63    return {
    64      repairOrders: state.repairShop.repairOrders,
    65      loading: Array.isArray(state.repairShop.repairOrders)
    66    };
    67  }
    68  
    69  function mapDispatchToProps(dispatch) {
    70    return {
    71      repairShopActions: bindActionCreators(repairShopActions, dispatch)
    72    };
    73  }
    74  
    75  export default withRouter(connect(mapStateToProps, mapDispatchToProps)(
    76    injectIntl(RepairOrdersPage)));