Merge branch 'feature/campaign-new' into develop

Author: DevDHera

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "test": "mocha",
-    "dev": "next dev"
+    "dev": "node server.js"
   },
   "author": "Devin Herath",
   "license": "MIT",
@@ -14,6 +14,7 @@
     "ganache-cli": "^6.4.3",
     "mocha": "^6.1.4",
     "next": "^4.1.4",
+    "next-routes": "^1.4.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "semantic-ui-css": "^2.4.1",
@@ -22,4 +23,4 @@
     "truffle-hdwallet-provider": "0.0.3",
     "web3": "^1.0.0-beta.37"
   }
-}
+}

pages/campaigns/new.js

@@ -1,11 +1,59 @@
 import React, { Component } from 'react';
+import { Form, Button, Input, Message } from 'semantic-ui-react';
 import Layout from '../../components/Layout';
+import factory from '../../ethereum/factory';
+import web3 from '../../ethereum/web3';
+import { Router } from '../../routes';
 
 class CampaignNew extends Component {
+    state = {
+        minimumContribution: '',
+        errorMessage: '',
+        loading: false
+    };
+
+    onSubmit = async (event) => {
+        event.preventDefault();
+
+        this.setState({ loading: true, errorMessage: '' });
+
+        try {
+            const accounts = await web3.eth.getAccounts();
+            await factory.methods
+                .createCampaign(this.state.minimumContribution)
+                .send({
+                    from: accounts[0]
+                });
+
+            Router.pushRoute('/');
+        } catch (err) {
+            this.setState({ errorMessage: err.message });
+        }
+
+        this.setState({ loading: false });
+    }
+
     render() {
         return (
             <Layout>
-                <h1>New Campaign!</h1>
+                <h3>Create a Campaign</h3>
+
+                <Form onSubmit={this.onSubmit} error={!!this.state.errorMessage}>
+                    <Form.Field>
+                        <label>Minimum Contribution</label>
+                        <Input
+                            label="wei"
+                            labelPosition="right"
+                            value={this.state.minimumContribution}
+                            onChange={event => this.setState({ minimumContribution: event.target.value })}
+                        />
+                    </Form.Field>
+
+                    <Message error header="Oops!" content={this.state.errorMessage} />
+                    <Button loading={this.state.loading} primary>
+                        Create!
+                    </Button>
+                </Form>
             </Layout>
         )
     }

routes.js

@@ -0,0 +1,3 @@
+const routes = require('next-routes')();
+
+module.exports = routes;

server.js

@@ -0,0 +1,18 @@
+const { createServer } = require('http');
+const next = require('next');
+
+const app = next({
+    dev: process.env.NODE_ENV !== 'production'
+});
+
+const routes = require('./routes');
+const handler = routes.getRequestHandler(app);
+
+const port = process.env.PORT || 3000;
+
+app.prepare().then(() => {
+    createServer(handler).listen(port, (err) => {
+        if (err) throw err;
+        console.log(`Server started on port ${port}`);
+    });
+});