//tips
//smart contract
少しUiの部分を調整。グリッドをsemantic reactで実装する。
Show.jsのcampaignshowコンポーネントに組み込む。import後にGridを追加してやれば良い。10や6はページの表示領域を示すもののよう。ここはsemantic UI reactのページを参照。
render(){
return(
<Layout>
<h3>CampaignShow</h3>
<Grid>
<Grid.Column width={10}>
{this.renderCards()}
</Grid.Column>
</Grid>
<Grid.Column width={6}>
<ContributeForm />
</Grid.Column>
</Layout>
);
}
これだけで左にcard、右にformという形でページを表示することができるようになった。
Formでの送信をeventで取り扱えるように変更する。この流れは以前にもやったようにstateが絡むもの。
import React, {Component} from 'react';
import {Button, Form,Input,Message} from 'semantic-ui-react';
import Campaign from '../ethereum/campaign';
import web3 from '../ethereum/web3';
import {Router} from '../routes';
class ContributeForm extends Component{
state={
value:'',
errorMessage:'',
loading:false
};
//onSubmitはレンダリングの時ではなくイベントのタイミングのみで呼び出したい
onSubmit=async event =>{
event.preventDefault();
//<ContributeForm address={this.props.address}/>を追加したので
//webインスタンスを取得することができる
const campaign =Campaign(this.props.address);
this.setState({loading:true,errorMessage:''});
//getlistfuncを実行してcontributefuncを.solから呼べるようにする
try{
const accounts=await web3.eth.getAccounts();
await campaign.methods.contribute().sende({
from:accounts[0],
value:web3.utils.toWei(this.state.value,'ether')
});
//さらに変更したらページを更新したい
//その場合はrouterにも関係するので再度同じページを読み込ませrefresh
//addressは変更されないが記載内容は変更されるdonateが一人加算など
Router.replaceRoute(`/campaigns/${this.props.address}`)
}catch(err){
this.setState({errorMessage:err.message});
}
//スピニングのストップ
this.setState({loading:false,value:''});
};
//donateボタンコンポーネントの部品化
render(){
return(
<Form onSubmit={this.onSubmit} error={!!this.state.errorMessage} >
<Form.Field>
<label>Amount to contribute</label>
<Input
value={this.state.value}
onChange={event=>this.setState({value:event.target.value})}
label="ether"
labelPosition="right"
/>
</Form.Field>
<Message error header="Oops!" content={this.state.errorMessage}/>
<Button primary loading={this.state.loading}>
Contribute!
</Button>
</Form>
);
}
}
export default ContributeForm;
このような形にContributeFormを更新できた。
ここからもう少し詳細な内容も実装していく。
まずはview requestsリンクを作成し、request用のrequestsフォルダも追加する。
requestsフォルダの中にindex.jsを作成。
import React,{Component} from 'react';
class RequestIndex extends Component{
render(){
return(
<h3>Request List</h3>
);
};
}
export default RequestIndex;
各Campaignsのrequests詳細をみれるページを作成したので、そちらのrouteを通す。
routes
.add('/campaigns/new','/campaigns/new')
.add('/campaigns/:address','/campaigns/show')
.add('/campaigns/:address/requests','campaigns/requests/index');
これでひとまずページ遷移の土台は整った。
