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

     1  'use strict';
     2  
     3  import React, { Props } from 'react';
     4  import PropTypes from 'prop-types';
     5  import { FormattedMessage } from 'react-intl';
     6  import { connect } from 'react-redux';
     7  import { withRouter, Redirect } from 'react-router-dom';
     8  
     9  import Loading from '../../../shared/Loading';
    10  import { fileClaim } from '../../api';
    11  
    12  class ClaimPage extends React.Component {
    13  
    14    static get propTypes() {
    15      return {
    16        user: PropTypes.object,
    17        history: PropTypes.object.isRequired,
    18        match: PropTypes.shape({
    19          params: PropTypes.shape({
    20            contractUuid: PropTypes.string.isRequired
    21          })
    22        }).isRequired
    23      };
    24    }
    25  
    26    constructor(props) {
    27      super(props);
    28  
    29      this.state = { loading: false, isTheft: false, description: '' };
    30  
    31      this.submit = this.submit.bind(this);
    32      this.setTheft = this.setTheft.bind(this);
    33      this.setDescription = this.setDescription.bind(this);
    34    }
    35  
    36    submit() {
    37      const { isTheft, description } = this.state;
    38      const { history } = this.props;
    39      this.setState({ loading: true });
    40      fileClaim(this.props.user,
    41        this.props.match.params.contractUuid, { isTheft, description })
    42        .then(() => {
    43          history.push('/self-service/contracts');
    44          this.setState({ loading: false });
    45        }).catch(() => {
    46          this.setState({ loading: false });
    47          alert('Error occurred!');
    48        });
    49    }
    50  
    51    setTheft(event) {
    52      this.setState({ isTheft: !this.refs.theftField.checked });
    53    }
    54  
    55    setDescription({ target }) {
    56      this.setState({ description: target.value });
    57    }
    58  
    59    render() {
    60      const { loading, isTheft, description } = this.state;
    61      const { user } = this.props;
    62  
    63      if (!user) {
    64        return (
    65          <Redirect to='/self-service' />
    66        );
    67      }
    68  
    69      return (
    70        <Loading hidden={!loading}>
    71          <div>
    72            <div className='ibm-columns'>
    73              <div className='ibm-col-2-1 ibm-col-medium-5-3 ibm-col-small-1-1'>
    74                <h3 className='ibm-h3'><FormattedMessage id='File a Claim' /></h3>
    75              </div>
    76            </div>
    77            <div className='ibm-columns'>
    78              <div className='ibm-col-2-1 ibm-col-medium-5-3 ibm-col-small-1-1'>
    79                <div className='ibm-column-form'>
    80                  <p className='ibm-form-elem-grp'>
    81                    <label>
    82                      <FormattedMessage className='ibm-field-label' id='Theft' />:
    83                  </label>
    84                    <span className='ibm-input-group'>
    85                      <input type='checkbox' ref='theftField'
    86                        className='ibm-styled-checkbox'
    87                        checked={isTheft} onChange={this.setTheft} />
    88                      <label className='ibm-field-label' htmlFor='theftField'
    89                        onClick={this.setTheft} />
    90                    </span>
    91                  </p>
    92                  <p>
    93                    <label><FormattedMessage id='Description' />:</label>
    94                    <span>
    95                      <textarea value={description}
    96                        onChange={this.setDescription} />
    97                    </span>
    98                  </p>
    99                </div>
   100              </div>
   101            </div>
   102            <div className='ibm-columns'>
   103              <div className='ibm-col-2-1 ibm-col-medium-5-3 ibm-col-small-1-1 ibm-right'>
   104                <button type='button' className='ibm-btn-pri ibm-btn-blue-50'
   105                  onClick={this.submit}><FormattedMessage id='Submit' /></button>
   106              </div>
   107            </div>
   108          </div>
   109        </Loading>
   110      );
   111    }
   112  }
   113  
   114  function mapStateToProps(state, ownProps) {
   115    return {
   116      user: state.userMgmt.user
   117    };
   118  }
   119  
   120  export default withRouter(connect(mapStateToProps)(ClaimPage));