PBL Ⅲ/Ethereum and Solidity

Section7 : Advanced Multi-Page Front-Ends (3)

myejinni 2022. 10. 2. 13:30

197. Routing to Campaigns 

 

[index.js]

import React, {Component} from 'react';
import factory from '../ethereum/factory';
import { Card, Button } from 'semantic-ui-react';
import Layout from '../components/Layout';
impor{Link} from '../routes';

class CampaignIndex extends Component{

  static async getInitialProps(){
      const campaigns = await factory.methods.getDeployedCampaigns().call();
      return { campaigns };
  }

renderCampaigns(){
    const items=this.props.campaigns.map( address => {
      return {
        header: address,
        description: (
          <Link route={`/campaigns/${address}`}>
            <a>View Campaign</a>
          </Link>
        ),
        fluid: true
      };
    });

    return < Card.Group items={items} />;
}

  render(){
    return (
      <Layout>
    <div>
    <h3>Open Campaigns</h3>

  <Link route="/campaigns/new">
    <a>
    <Button
      floated="right"
      content="Create Campaign"
      icon="add circle"
      primary />
    </a>
    </Link>

        {this.renderCampaigns()}
      </div>
    </Layout>
    );
  }}

//export default CampaignIndex;

 

199. Route Mappings

 

[routes.js]

const routes = require("next-routes")();

routes
  .add('/campaigns/new', '/campaigns/new')
  .add('/campaigns/:address', '/campaigns/show');

module.exports = routes;

 

200. Planning CampaignShow

 

[show.js]

 

201. Redeploying CampaignFactory

 

define function getSummary()

 

define function getRequestCount()

 

208. Grid Layouts -215. Grid vs Columns

 

[ContributeForm.js]

import React, { Component } from "react";
import { Form, Input, Message, Button } from "semantic-ui-react";

class ContributeForm extends Component {
  render() {
    return (
      <Form>
        <Form.Field>
          <label>Amount to Contribute</label>
          <Input label="ether" labelPosition="right" />
        </Form.Field>
        <Button primary>Contribute!</Button>
      </Form>
    );
  }
}

export default ContributeForm;

[Layout.js]

import React from "react";
import { Container } from "semantic-ui-react";
import Head from "next/head";
import Header from "./Header";

const Layout = (props) => {
  return (
    <div>
      <Container>
        <Head>
          <link
            rel="stylesheet"
            href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css"
          ></link>
        </Head>
        <Header />
        {props.children}
      </Container>
    </div>
  );
};
export default Layout;

[index.js]

import React, { Component } from "react";
import { Card, Grid, Button } from "semantic-ui-react";
import Layout from "../../components/Layout";
import Campaign from "../../ethereum/campaign";
import web3 from "../../ethereum/web3";
import ContributeForm from "../../components/ContributeForm";
import { Link } from "../../routes";

class CampaignShow extends Component {
  static async getInitialProps(props) {
    const campaign = Campaign(props.query.address);

    const summary = await campaign.methods.getSummary().call();

    return {
      address: props.query.address,
      minimumContribution: summary[0],
      balance: summary[1],
      requestsCount: summary[2],
      approversCount: summary[3],
      manager: summary[4],
    };
  }

  renderCards() {
    const {
      balance,
      manager,
      minimumContribution,
      requestsCount,
      approversCount,
    } = this.props;

    const items = [
      {
        header: manager,
        meta: "Address of Manager",
        description:
          "The manager created this campaign and can create requests to withdraw money",
        style: { overflowWrap: "break-word" },
      },
      {
        header: minimumContribution,
        meta: "Minimum Contribution (wei)",
        description:
          "You must contribute at least this much wei to become an approver",
      },
      {
        header: requestsCount,
        meta: "Number of Requests",
        description:
          "A request tries to withdraw money from the contract. Requests must be approved by approvers",
      },
      {
        header: approversCount,
        meta: "Number of Approvers",
        description:
          "Number of people who have already donated to this campaign",
      },
      {
        header: web3.utils.fromWei(balance, "ether"),
        meta: "Campaign Balance (ether)",
        description:
          "The balance is how much money this campaign has left to spend.",
      },
    ];

    return <Card.Group items={items} />;
  }

  render() {
    return (
      <Layout>
        <h3>Campaign Show</h3>
        <Grid>
          <Grid.Row>
            <Grid.Column width={10}>{this.renderCards()}</Grid.Column>
            <Grid.Column width={6}>
              <ContributeForm address={this.props.address} />
            </Grid.Column>
          </Grid.Row>

          <Grid.Row>
            <Grid.Column>
              <Link route={`/campaigns/${this.props.address}/requests`}>
                <a>
                  <Button primary>View Requests</Button>
                </a>
              </Link>
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </Layout>
    );
  }
}

export default CampaignShow;

'PBL Ⅲ > Ethereum and Solidity' 카테고리의 다른 글

Section7 : Advanced Multi-Page Front-Ends (2)  (0) 2022.09.23
Section7 : Advanced Multi-Page Front-Ends (1)  (0) 2022.09.14
Section6 : Ethereum Project Infrastructure  (0) 2022.09.09
Section5 : Real Projects with Ethereum  (0) 2022.09.09
Section4 : Building Interative Front-Ends  (0) 2022.08.28

'PBL Ⅲ/Ethereum and Solidity'의 다른글

  • 현재글Section7 : Advanced Multi-Page Front-Ends (3)

관련글

티스토리툴바