以太坊众筹DAPP实战（五）

一、在我参与的众筹界面显示所有申请

（1）定义状态变量

state = {
    supportorFundingDetail : [],
    currentFundingDetail : '',
    requests : [],
}

（2）定义onCardClick和onRequestDetailClick函数。

import {..., showRequests} from '../eth/interaction'

// 回调函数，点击每一个Card时候自动调用
onCardClick = (currentFundingDetail) => {
    this.setState({
        currentFundingDetail
    })
}

// 申请详情按钮事件
onRequestDetailClick = async () => {
    try {
        let {currentFundingDetail} = this.state
        let requests = await showRequests(currentFundingDetail.fundingAddress)
        this.setState({"requests": requests})
    } catch (e) {
        console.log(e)
    }
}

（3）修改render方法，获取状态变量currentFundingDetail和requests，并生成Button和RequestTable。

render() {
    let {currentFundingDetail, requests} = this.state
    return (
        <div>
            <CardList details={this.state.supportorFundingDetail} onCardClick={this.onCardClick}/>
            {
                // 如果currentFundingDetail为空，代表用户还没点击Card，所以不会显示后面的div
                // 如果currentFundingDetail不为空，代表用户已经点击Card，所以就会输出div
                currentFundingDetail && <div>
                    <Button onClick={this.onRequestDetailClick}>申请详情</Button>
                    <RequestTable requests={requests}/>
                </div>
            }
        </div>
    )
}

运行程序，界面效果如下图所示：

 

二、批准实现

（1）在interaction中定义批准方法，并导出。

// 批准
const approveRequest = (fundingAddress, index) => {
    return new Promise(async(resolve, reject) => {
        try {
            let accounts = await web3.eth.getAccounts()
            // 创建合约实例
            let fundingContractInstance = getFundingContractInstance()
            fundingContractInstance.options.address = fundingAddress
            // 调用合约的方法
            let res = await fundingContractInstance.methods.approveRequest(index).send({
                from : accounts[0]
            })
            resolve(res)
        } catch (e) {
            reject(e)
        }
    })
}

export {
    ...
    approveRequest,
}

（2）在SupportorFunndingTab中引入该方法，然后定义一个实现了批准业务逻辑的方法，并把该方法传给RequestTable中。

import {..., approveRequest} from '../eth/interaction'

// 处理批准
// 参数一：Funding合约地址
// 参数二：第几个合约,从0开始
handleApprove = (index) => {
    try {
        let {fundingAddress} = this.state.currentFundingDetail
        approveRequest(fundingAddress, index)
    } catch (e) {
        console.log(e)
    }
}

render() {
    ...
    return (
        <div>
            ...
            {
                ...
                <RequestTable requests={requests} handleApprove={this.handleApprove}/>
            }
        </div>
    )
}

（3）在RequestTable中获取函数，然后把函数传给RowInfo方法，并且把索引i也一起传给RowInfo。

const RequestTable = (props) => {
    let {requests, handleApprove} = props
    let rows = requests.map((request, i) => {
        return <RowInfo key={i} request={request} handleApprove={handleApprove} index={i} />
    })
    ...
}

注意：这里不能够使用key属性来获取索引值。这里我们定义一个index属性把索引值传递给RowInfo。

（4）在RowInfo方法中添加Button按钮，并在onClick事件中调用handleApprove函数。该函数接收一个参数，该参数指定花费申请的索引值。

let RowInfo = (props) => {
    let {request, handleApprove, index} = props
    ...
    return (
        <Table.Row>
            ...
            <Table.Cell>
                <Button onClick={() => handleApprove(index)}>批准</Button>
            </Table.Cell>
        </Table.Row>
    )
}

运行效果如下图所示：

 

三、终结花费

（1）在interaction中定义终结方法，并导出。

// 终止申请
const finalizeRequest = (fundingAddress, index) => {
    return new Promise(async(resolve, reject) => {
        try {
            let accounts = await web3.eth.getAccounts()
            // 创建合约实例
            let fundingContractInstance = getFundingContractInstance()
            fundingContractInstance.options.address = fundingAddress
            // 调用合约的方法
            let res = await fundingContractInstance.methods.finalizeRequest(index).send({
                from : accounts[0]
            })
            resolve(res)
        } catch (e) {
            reject(e)
        }
    })
}

（2）在CreatorFunndingTab中引入该方法，然后定义一个实现了终结花费的业务逻辑方法，并把该方法传给RequestTable中。

import {..., finalizeRequest} from '../eth/interaction'

// 结束申请
handleFinalizeRequest = (index) => {
    try {
        let {fundingAddress} = this.state.currentFundingDetail
        finalizeRequest(fundingAddress, index)
    } catch (e) {
        console.log(e)
    }
}

render() {
        ...

        return (
            <div>
                ...
                {
                    <RequestTable requests={requests} tabNo={2}  handleFinalizeRequest={this.handleFinalizeRequest} />
                }
            </div>
        )
    }

tabNo代表了分页的索引值。程序需要根据不同tabNo的值显示不同按钮。如果tabNo等于2，那么就显示支付按钮。如果tabNo等于其他，就显示批准按钮。

同理，在SupportorFundingTab中也要把tabNo传递给RequestTable中。

render() {
        ...

        return (
            <div>
                ...
                {
                    <RequestTable requests={requests} tabNo={3} handleApprove={this.handleApprove} />
                }
            </div>
        )
    }

（3）在RequestTable中获取handleFinalizeRequest函数和tabNo，然后把函数传给RowInfo方法。

const RequestTable = (props) => {
    let {requests, handleApprove, handleFinalizeRequest, tabNo} = props
    let rows = requests.map((request, i) => {
        return <RowInfo key={i} request={request} handleApprove={handleApprove} index={i} tabNo={tabNo} handleFinalizeRequest={handleFinalizeRequest} />
    })
    ...
}

（4）在RowInfo方法中添加Button按钮，并在onClick事件中调用finalizeRequest函数。该函数接收一个参数，该参数指定花费申请的索引值。

let RowInfo = (props) => {
    let {request, handleApprove, index, tabNo, handleFinalizeRequest} = props
    ...
    return (
        <Table.Row>
            ...
            <Table.Cell>
                {
                    // 根据tabNo显示不同按钮
                    tabNo == 2 ?  <Button onClick={() => , handleFinalizeRequest(index)}>支付</Button> : <Button onClick={() => handleApprove(index)}>批准</Button>
                }
            </Table.Cell>
        </Table.Row>
    )
}

运行程序，效果如下图所示：

至此，众筹Dapp项目开发完成！！！