//tips
//smart contract
ヘッダー部分の改変まで完了できたので、create campaignボタンを作成していく。
まずはindex.jsファイルにいき、routesの仕組みを取り込むところから始めていく。
import {Link} from '../routes';
<Link route="/campaigns/new">
<a>
<Button floated="right"
content="Create Campaign"
icon="add"
primary
/>
</a>
</Link>
<a>は右クリック機能を与え、<Link>はナビゲーション機能をになっている。
さらに、下記のようにすることでリンク先URLを設定することができるようになった。
renderCampaigns(){
const items = this.props.campaigns.map(address=>{
return {//カード機能への紐付け
//campaignsごとに異なるリンクに飛ばす
header:address,
description:(
<Link route={`/campaigns/${address}`}>
ただ、こちらではページはまだないので遷移ができない。
ここで新しい仕組みが必要。pagesフォルダのcampaignsの中にshow.jsを作成した後にroutes.jsを修正する。
import React,{Component} from 'react';
class CampaignShow extends Component{
render(){
return <h3>CampaignShow</h3>;
}
}
export default CampaignShow;
これをroutesの方に設定していく。
const { route } = require('next/dist/server/router');
const routes=require('next-routes')();
//オフィシャルドキュメント通り()をつける
//require()で関数を返すので
routes
.add('/campaigns/new','/campaigns/new')
.add('/campaigns/:address','/campaigns/show');
//第一引数のURLルートの場合第二引数のページを表示する仕組み
//:をつけることで何にでも対応できるようになる
//実際の入力はindex.jsで対応
//第二引数は表示したいページ内容
module.exports=routes;
また、show.jsの方も若干追加。
import React,{Component} from 'react';
import Layout from '../../components/Layout';
class CampaignShow extends Component{
render(){
return(
<Layout>
<h3>CampaignShow</h3>
</Layout>
);
}
}
export default CampaignShow;
ブラウザへの表示内容により具体的なコントラクトの内容を記載したいのでそれらの情報を引き出せるように設計する。
Campaign.solの内容を下記に追加。
function getSummary() public view returns (
uint,uint,uint,uint,address
){
return(
minimumContribution,
this.balance,
requests.length,
approversCount,
manager
);
}
function getRequestsCount() public view returns(uint){
return requests.length;
}
このため再度デプロイし直さないといけない。
Kickstartからethereumへ行き、node compile.jsを行う形となる。
