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

     1  'use strict';
     2  
     3  import React, { Props } from 'react';
     4  import PropTypes from 'prop-types';
     5  import { bindActionCreators } from 'redux';
     6  import {
     7    FormattedMessage, FormattedDate,
     8    injectIntl, intlShape
     9  } from 'react-intl';
    10  import { connect } from 'react-redux';
    11  import { withRouter } from 'react-router-dom';
    12  
    13  import Loading from '../../../shared/Loading';
    14  import ClaimComponent from './ClaimComponent';
    15  import * as claimProcessingActions from '../../actions/claimProcessingActions';
    16  
    17  class ClaimsPage extends React.Component {
    18  
    19    static get propTypes() {
    20      return {
    21        intl: intlShape.isRequired,
    22        claims: PropTypes.array,
    23        loading: PropTypes.bool.isRequired,
    24        claimProcessingActions: PropTypes.object.isRequired
    25      };
    26    }
    27  
    28    constructor(props) {
    29      super(props);
    30    }
    31  
    32    render() {
    33      const { loading, intl, claimProcessingActions, claims } = this.props;
    34  
    35      const cards = Array.isArray(claims) ? claims
    36        .sort((a, b) => a.uuid.localeCompare(b.uuid))
    37        .map(claim => {
    38          const repair = () => {
    39            claimProcessingActions.processClaim(
    40              claim.contractUuid, claim.uuid, 'R', 0);
    41          };
    42          const reimburse = (reimbursable) => {
    43            claimProcessingActions.processClaim(
    44              claim.contractUuid, claim.uuid, 'F', reimbursable);
    45          };
    46          const reject = () => {
    47            claimProcessingActions.processClaim(
    48              claim.contractUuid, claim.uuid, 'J', 0);
    49          };
    50          return (
    51            <ClaimComponent key={claim.uuid} claim={claim}
    52              onRepair={repair}
    53              onReimburse={reimburse}
    54              onReject={reject} />
    55          );
    56        }) : null;
    57      const claimsDisplay = ((Array.isArray(cards) && cards.length > 0) ||
    58        cards === null) ? cards :
    59        (
    60          <div className='ibm-col-5-5 ibm-col-medium-6-6'>
    61            <FormattedMessage id='No outstanding claims.' />
    62          </div>
    63        );
    64  
    65      return (
    66        <Loading hidden={!loading}
    67          text={intl.formatMessage({ id: 'Loading Claims...' })}>
    68          <div>
    69            <div className='ibm-columns'>
    70              <div className='ibm-col-5-5 ibm-col-medium-6-6'>
    71                <h3 className='ibm-h3'>
    72                  <FormattedMessage id='Unprocessed Claims' />
    73                </h3>
    74              </div>
    75            </div>
    76            <div className='ibm-columns ibm-cards' style={{ minHeight: '30vh' }}
    77              data-widget='masonry' data-items='.ibm-col-2-1'>
    78              {claimsDisplay}
    79            </div>
    80          </div>
    81        </Loading>
    82      );
    83    }
    84  }
    85  
    86  function mapStateToProps(state, ownProps) {
    87    return {
    88      claims: state.claimProcessing.claims,
    89      loading: !Array.isArray(state.claimProcessing.claims)
    90    };
    91  }
    92  
    93  function mapDispatchToProps(dispatch) {
    94    return {
    95      claimProcessingActions: bindActionCreators(claimProcessingActions, dispatch)
    96    };
    97  }
    98  
    99  export default withRouter(connect(mapStateToProps, mapDispatchToProps)(
   100    injectIntl(ClaimsPage)));