区块链研究实验室|使用Hyperledger Composer和React.js构建保险应用程序-part3

  • 时间:
  • 浏览:53
  • 来源:区块链技术网

接下来,我们要创建将用于显示和实现添加新资产的功能的组件。在组件中创建新组件AddAsset.js:

import React, { Component } from 'react';
import AddAssetForm from './AddAssetForm'
import PropTypes from 'prop-types';


class AddAsset extends Component {

  // The state stores the form variables
  state = {
    assetType'',
    value'',
    durationInMonths''
  }

  // Handles the submit. Passes the form varaibles to the function addAsset in App.js
  onSubmit = (e) => {
    e.preventDefault();
    this.props.addAsset(this.state.assetType, this.state.value, this.state.durationInMonths);
    this.setState({ assetType''value''durationInMonths'' });
  }

  // Handles when information is changed in the form storing it in the state
  onChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  }


  render() {
    return (
      <div>
      <h1>Add New Asset</h1>
        <AddAssetForm onSubmit={this.onSubmit} onChange={this.onChange} assetType={this.state.assetType} value={this.state.value} durationInMonths={this.state.durationInMonths} />
      </div>
    );
  }

}

//PropTypes
AddAsset.propTypes = {
  addAsset: PropTypes.func.isRequired
}

export default AddAsset

在上面的代码中,您会注意到我们也在使用表单的另一个组件,因此我们需要创建addassetform.js:

import React, { Component } from 'react';
import PropTypes from 'prop-types';


class AddAssetForm extends Component {

    render() {
        // Styling
        const style = {
            formComponentsStyle: {
                fontFamily: 'Arial, Helvetica, sans-serif',
                textAlign: 'left',
                marginTop: '10px',
                marginLeft: '10px',
                padding: '10px',
                width: '80%'
            },
            submitStyle: {
                flex: '1',
                background: 'white',
                color: 'black',
                borderRadius: '4px',
                padding: '3px',
                margin: '3px',
                cursor: 'pointer',
                fontSize: '16px',
                marginLeft: '80%'
            },
            formStyle: {
                display: 'block',
                background: '#333',
                padding: '10px',
                margin: '10px'
            }
        }

        return (
            <form onSubmit={this.props.onSubmit} font-size: inherit; line-height: inherit; color: #5f9182; word-wrap: inherit !important; word-break: inherit !important;">select
                        type={"text"}
                        name={"assetType"}
                        font-size: inherit; line-height: inherit; color: #7d9726; word-wrap: inherit !important; word-break: inherit !important;">"Select asset type"}
                        value={this.props.assetType}
                        onChange={this.props.onChange}>
                        <option value={"DEFAULT"}>Select asset type</option>
                        <option value={"HOUSE"}>House</option>
                        <option value={"CAR"}>Car</option>
                        <option value={"PHONE"}>Phone</option>
                    </select>
                </div>
                <div>
                    <input
                        type={"text"}
                        name={"value"}
                        font-size: inherit; line-height: inherit; color: #7d9726; word-wrap: inherit !important; word-break: inherit !important;">"Enter value"}
                        value={this.props.value}
                        onChange={this.props.onChange} />
                </div>
                <div>
                    <input
                        type={"text"}
                        name={"durationInMonths"}
                        font-size: inherit; line-height: inherit; color: #7d9726; word-wrap: inherit !important; word-break: inherit !important;">"Enter how long you want this asset insured for"}
                        value={this.props.durationInMonths}
                        onChange={this.props.onChange} />
                </div>
                <div>
                    <input
                        type="submit"
                        value="Submit"
                        className="btn"
                        font-size: inherit; line-height: inherit; color: #6c6b5a; word-wrap: inherit !important; word-break: inherit !important;">//PropTypes
AddAssetForm.propTypes = {
    onSubmit: PropTypes.func.isRequired,
    onChange: PropTypes.func.isRequired,
    assetType: PropTypes.string.isRequired,
    value: PropTypes.string.isRequired,
    durationInMonths: PropTypes.string.isRequired
}

export default AddAssetForm

在Homepage.js中导入AddAsset.js:

import AddAsset from "./AddAsset"

现在通过添加以下div,样式和props在Homepage.js中实现AddAsset:

 

import React, { Component } from 'react'
import UserAssets from './UserAssets'
import PropTypes from 'prop-types';
import AddAsset from "./AddAsset"

class Homepage extends Component {

  render() {
    let style = {
      UserAssetsStyle: {
        position: 'relative',
        top: '10px',
        width: '58%',
        borderRight: '1px solid black',
      },
      AddAssetStyle: {
        position: 'absolute',
        top: '290px',
        width: '30%',
        height: '34%',
        borderBottom: '1px solid black',
        left: '59%'
      }
    }

    return (
      <div>
        <div font-size: inherit; line-height: inherit; color: #5f9182; word-wrap: inherit !important; word-break: inherit !important;">this.props.assets} />
        </div>
        <div font-size: inherit; line-height: inherit; color: #5f9182; word-wrap: inherit !important; word-break: inherit !important;">this.props.addAsset} />
        </div>
      </div>);

  }
}

//PropTypes
Homepage.propTypes = {
  assets: PropTypes.array.isRequired,
  addAsset: PropTypes.func.isRequired
}

export default Homepage

现在,我们需要通过更新app.js中的主页路由,将addasset函数从app.js传递到homepage.js,如下所示:

<Homepage assets={this.state.assets} addAsset={this.addAsset} />

您现在应该在Web应用程序中查看以下内容。

 

通过添加新资产进行测试,单击“提交”后,该资产应显示在资产中。这可能需要几秒钟才能完全完成。

现在,我们还可以添加一个显示用户基本信息的配置文件。

在组件中创建一个名为Profile.js的新文件,并添加以下代码:

 

import React, { Component } from 'react'
import PropTypes from 'prop-types';

class Profile extends Component {
  render() {
    let profileStyle = {
      background'#333',
      width'300px',
      padding'20px',
      margin'20px',
      border'5px solid #333',
      color'white'

  }
    return (
        <div style = { profileStyle }>
            <p>Name: {this.props.user.name}</p>
            <p>Balance: {this.props.user.balance}</p>
            <p>Assets: {this.props.user.numAssets}</p>
        </div>


    )
  }

}

//PropTypes
Profile.propTypes = {
  user: PropTypes.object.isRequired
}

export default Profile

在App.js中更新getAssets,state和componentWillMount表示以下内容并添加函数getUserProfile:

state = {
    name: "joe",
    assets: [],
    user: {}
  }

  componentWillMount() {
    this.getAssets()
    this.getUserProfile()
  }
  getAssets = () => {
    // Search for the users assets
    Connection.search('queries/selectAssetByPolicyholder?policyholder=resource:org.acme.riskanalysis.Policyholder#' + this.state.name)
      .then(data => {
        //store the assets in the assets array
        this.setState({
          assets: data
        })
        // Retrieve the user object from the state
        let user = this.state.user
        // Add the number of assets to the object
        user.numAssets = this.state.assets.length
        // Update the state
        this.setState({
          user
        })

        let assets = this.state.assets
        for (let i = 0; i < assets.length; i++) {
          // Set insurance status
          if (assets[i].insuranceCompany == null) {
            assets[i].insured = false
          }
          else {
            assets[i].insured = true
          }
        }
        // Update the state
        this.setState({
          assets: assets
        })

      })
  }

  getUserProfile = () => {
    // Send get request for user
    Connection.search('Policyholder/joe')
      .then(data => {
        // Retrieve the user object from the state
        let user = this.state.user
        // Add details to the user object
        user.name = data.name
        user.balance = data.balance
        user.noClaimsYears = data.noClaimsYears
        // Update the state
        this.setState({
          user: user
        })
      })
  }

将配置文件导入Homepage.js并添加以下div,样式和props,以便您的Homepage.js现在如下所示:

import React, { Component } from 'react'
import UserAssets from './UserAssets'
import PropTypes from 'prop-types';
import AddAsset from "./AddAsset"
import Profile from "./Profile"

class Homepage extends Component {

  render() {
    let style = {
      UserAssetsStyle: {
        position: 'relative',
        top: '10px',
        width: '58%',
        borderRight: '1px solid black',
      },
      AddAssetStyle: {
        position: 'absolute',
        top: '290px',
        width: '30%',
        height: '34%',
        borderBottom: '1px solid black',
        left: '59%'
      },
      ProfileStyle: {
        position: 'absolute',
        top: '100px',
        left: '59%',
        width: '30%',
        borderBottom: '1px solid black'
      }
    }

    return (
      <div>
        <div font-size: inherit; line-height: inherit; color: #5f9182; word-wrap: inherit !important; word-break: inherit !important;">this.props.assets} />
        </div>
        <div font-size: inherit; line-height: inherit; color: #5f9182; word-wrap: inherit !important; word-break: inherit !important;">this.props.addAsset} />
        </div>
        <div font-size: inherit; line-height: inherit; color: #5f9182; word-wrap: inherit !important; word-break: inherit !important;">this.props.user} />
        </div>
      </div>);

  }
}

//PropTypes
Homepage.propTypes = {
  assets: PropTypes.array.isRequired,
  addAsset: PropTypes.func.isRequired,
  user: PropTypes.object.isRequired
}

export default Homepage

记住,我们现在还需要将用户对象从app.js传递到主页,因此将主页路径更新为以下路径:

<Homepage assets={this.state.assets} addAsset={this.addAsset} user={this.state.user}/>

您的Web应用程序现在应该是这样的:

保单持有人web应用程序的最后两部分是接受和提供保险的能力以及提出索赔的能力。这两者都依赖于保险公司的申请。但是,我们仍然可以使用Hyperledger Composer Rest Server提供的测试界面测试这些工作。

让实现创建声明,首先添加一个名为NewClaim.js的新组件,并向其添加以下代码:

 

import React, { Component } from 'react';
import NewClaimForm from './NewClaimForm'
import PropTypes from 'prop-types';


class NewClaim extends Component {
    state = {
        claimValue: '',
        claimDescription: '',
        assetID: ''
    }

    // Handles submit
    onSubmit = (e) => {
        e.preventDefault();
        this.props.newClaim(this.state.assetID, this.state.claimValue, this.state.claimDescription);
        this.setState({ assetID: '', claimValue: '', claimDescription: '' });
    }

    // Handles form changes
    onChange = (e) => {

        this.setState({ [e.target.name]: e.target.value });
    }


    render() {
        return (
            <div >
                <h1>New Claim</h1>
                <NewClaimForm onSubmit={this.onSubmit} onChange={this.onChange}
                    assetID={this.state.assetID} claimValue={this.state.claimValue}
                    claimDescription={this.state.claimDescription} assets={this.props.assets} />
            </div>
        );
    }

}

//PropTypes
NewClaim.propTypes = {
    newClaim: PropTypes.func.isRequired,
    assets: PropTypes.array.isRequired
}

export default NewClaim

好。由于公众号内容限制原因,此部分需要分开两部分展示;

猜你喜欢

深入了解FabCar:Hyperledger Fabric的完整应用程序示例(part3)

我们已经讲解完了FabCar应用的Chaincode部分。现在我们继续前进到客户端部分。我们在第2部分中介绍如何使用SDK与Chaincode进行交互。区块链研究实验室|深入了

2021-11-29

区块链研究实验室|使用Hyperledger Composer和React.js构建保险应用程序-part3

接下来,我们要创建将用于显示和实现添加新资产的功能的组件。在组件中创建新组件AddAsset.js:importReact,{Component}from'react';imp

2021-11-29

区块链研究实验室|如何使用node.js语言实现PBFT协议part3

区块类接下来我们将创建区块类。在项目目录中,创建一个文件block.js并在其中创建一个类Block。Block将具有以下属性:timestamp-区块的生成时间lastHas

2021-11-29

详解如何在以太坊智能合约中集成可证明的Oracle-part3

1个函数reclaimLeaseDeposit()公开{2租赁存储租赁=tenantLease[msg.sender];3要求(lease.leaseFullyPaid,“必须

2021-11-29

区块链研究实验室|如何在区块链上实现去中心化数据仓库共享-part3

本文提供了在Solidity中共享分散数据的另一个示例解决方案,Solidity是以太坊区块链的智能合约的开发语言。背景Alice和Bob已经在他们选择的数据仓库中共享数据,而

2021-11-29