{"size": 4453, "ext": "js", "max_stars_repo_path": "client/src/components/application/Create-Election.js", "max_stars_repo_name": "schadokar/election-ethereum-react-dapp", "max_stars_repo_stars_event_min_datetime": "2019-07-21T14:51:28.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-29T17:41:24.000Z", "max_issues_repo_path": "client/src/components/application/Create-Election.js", "max_issues_repo_name": "schadokar/election-ethereum-react-dapp", "max_issues_repo_issues_event_min_datetime": "2021-10-29T22:27:30.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-19T17:01:06.000Z", "max_forks_repo_path": "client/src/components/application/Create-Election.js", "max_forks_repo_name": "schadokar/election-ethereum-react-dapp", "max_forks_repo_forks_event_min_datetime": "2020-02-17T01:40:42.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-19T19:12:58.000Z"}
{"max_stars_count": 6, "max_issues_count": 5, "max_forks_count": 7, "avg_line_length": 26.6646706587, "max_line_length": 81, "alphanum_fraction": 0.5016842578}
import React, { Component } from "react";
import { Divider, Form, Button, Message, Card, Input } from "semantic-ui-react";
import axios from "axios";

const endpoint = "http://localhost:4000";
console.log(endpoint);

class CreateElection extends Component {
  constructor(props) {
    super(props);
    this.state = {
      accountIndex: 0,
      duration: "",
      electionName: "",
      message: "",
      electionList: [],
      items: [],
      loading: false,
      loadingDeploy: false,
      loadingCompile: false
    };

    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
    this.compile = this.compile.bind(this);
    this.deploy = this.deploy.bind(this);
  }

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

  onSubmit(event) {
    this.setState({ loading: true });

    try {
      axios
        .post(endpoint + "/api/v1/newElection", {
          account: this.state.accountIndex,
          duration: parseInt(this.state.duration),
          electionName: this.state.electionName
        })
        .then(res => {
          console.log("------------", res);
          this.setState({
            message: `Transaction Hash: ${res.data.transactionHash}`,
            loading: false
          });
          this.getElectionList();
        })
        .catch(err => {
          console.error(err);
        });
    } catch (error) {
      console.log(error);
    }
  }

  compile() {
    this.setState({ loadingCompile: true });
    axios.post(endpoint + "/contract/compile").then(res => {
      console.log(res.data);
      this.setState({
        message: res.data,
        loadingCompile: false
      });
    });
  }

  deploy() {
    this.setState({ loadingDeploy: true });
    axios.post(endpoint + "/contract/deploy").then(res => {
      console.log(res.data);
      this.setState({
        message: `Contract deployed Successfully! Address: ${res.data.address}`,
        loadingDeploy: false,
        electionList: []
      });
    });
  }

  message() {
    if (this.state.message.length) {
      return <Message info>{this.state.message}</Message>;
    }
  }
  componentDidMount() {
    this.getElectionList();
  }

  getElectionList() {
    axios.get(endpoint + "/api/v1/getElections").then(res => {
      console.log(res.data);
      this.setState({
        electionList: res.data,
        items: res.data.reverse().map(election => {
          // console.log("--->", election);
          let card = {
            header: election.electionName,
            description: (
              <a href={`/Election/${election.electionAddress}`}>
                View Election
              </a>
            ),
            meta: `Election Address: ${election.electionAddress}`,
            fluid: true
          };
          return card;
        })
      });
    });
  }

  render() {
    return (
      <div>
        <div style={{ paddingBottom: "10px" }}>
          <Button
            loading={this.state.loadingCompile}
            onClick={this.compile}
            primary
          >
            Compile Contract
          </Button>
          <Button
            loading={this.state.loadingDeploy}
            onClick={this.deploy}
            primary
          >
            Deploy Election Factory Contract
          </Button>
        </div>
        <Form onSubmit={this.onSubmit}>
          <Form.Field>
            <Input
              label="minutes"
              labelPosition="right"
              type="text"
              name="duration"
              value={this.state.duration}
              onChange={this.onChange}
              placeholder="Duration of Election in minutes"
            />
          </Form.Field>
          <Form.Field>
            <Input
              type="text"
              name="electionName"
              value={this.state.electionName}
              onChange={this.onChange}
              placeholder="Election Name"
            />
          </Form.Field>
          <Button loading={this.state.loading} primary>
            Create
          </Button>
          {this.message()}
        </Form>
        <Divider horizontal>Elections</Divider>
        <Card.Group items={this.state.items} />
      </div>
    );
  }
}

export default CreateElection;
