From 9e010a79c2114c45c48a96710afb9916b9e0730b Mon Sep 17 00:00:00 2001
From: Barry Gitarts <bgitarts@gmail.com>
Date: Thu, 31 May 2018 09:53:26 -0400
Subject: [PATCH] add initial form scafold for proposal manager

---
 .babelrc                                      |   4 +
 .../proposal-manager/proposal-manager.js      | 244 ++++++++++--------
 app/components/standard/FieldGroup.js         |  20 ++
 package.json                                  |   3 +
 4 files changed, 158 insertions(+), 113 deletions(-)
 create mode 100644 .babelrc
 create mode 100644 app/components/standard/FieldGroup.js

diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..577b026
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,4 @@
+{
+  "plugins": ["transform-object-rest-spread"],
+  "presets": ["stage-2"]
+}
diff --git a/app/components/proposal-manager/proposal-manager.js b/app/components/proposal-manager/proposal-manager.js
index 36f4762..21a0615 100644
--- a/app/components/proposal-manager/proposal-manager.js
+++ b/app/components/proposal-manager/proposal-manager.js
@@ -4,137 +4,155 @@ import ProposalCuration from 'Embark/contracts/ProposalCuration';
 import SNT from 'Embark/contracts/SNT';
 import React, { Component, Fragment } from 'react';
 import { Form, FormGroup, FormControl, HelpBlock, Button, Alert } from 'react-bootstrap';
-import web3 from "Embark/web3"
+import web3 from "Embark/web3";
+import { withFormik } from 'formik';
+import FieldGroup from '../standard/FieldGroup';
 
-class ProposalManager extends Component {
+//TODO make innerform and wrap 
+class InnerForm extends Component {
 
-    constructor(props) {
-        super(props);
-        this.state = {
-            submitPrice: "Loading...",
-            url: "",
-            title: "",
-            description: "",
-            canSubmit: true
-        };
-    }
+  constructor(props) {
+    super(props);
+    this.state = {
+      submitPrice: "Loading...",
+      url: "",
+      title: "",
+      description: "",
+      canSubmit: true
+    };
+  }
 
-    componentDidMount(){
-        this.loadPrice();
-    }
+  componentDidMount(){
+    this.loadPrice();
+  }
 
-    componentWillReceiveProps(){
-        this.loadPrice();
-    }
+  componentWillReceiveProps(){
+    this.loadPrice();
+  }
 
-    async loadPrice(){
-        __embarkContext.execWhenReady(async () => {
-           try {
-                let _b = await ProposalCuration.methods.getSubmitPrice(web3.eth.defaultAccount).call();
-                this.setState({
-                    submitPrice: _b,
-                    canSubmit: true
-                });
-            } catch(err){
-                this.setState({
-                    canSubmit: false, 
-                    submitPrice: "-"
-                });
-            }
+  async loadPrice(){
+    __embarkContext.execWhenReady(async () => {
+      try {
+        let _b = await ProposalCuration.methods.getSubmitPrice(web3.eth.defaultAccount).call();
+        this.setState({
+          submitPrice: _b,
+          canSubmit: true
         });
-    }
+      } catch(err){
+        this.setState({
+          canSubmit: false,
+          submitPrice: "-"
+        });
+      }
+    });
+  }
 
-    async handleClick(){
-        let description = {
-            "url": this.state.url,
-            "title": this.state.title,
-            "description": this.state.description
-        };
+  async handleClick(){
+    let description = {
+      "url": this.state.url,
+      "title": this.state.title,
+      "description": this.state.description
+    };
 
-        EmbarkJS.Storage.saveText(JSON.stringify(description))
+    EmbarkJS.Storage.saveText(JSON.stringify(description))
             .then(async (hash) => {
-                let hexHash = web3.utils.toHex(hash);
+              let hexHash = web3.utils.toHex(hash);
 
-                let receipt = await SNT.methods.approve(
-                            ProposalCuration.options.address, 
-                            this.state.submitPrice)
-                        .send({from: web3.eth.defaultAccount, gasLimit: 1000000});
+              let receipt = await SNT.methods.approve(
+                ProposalCuration.options.address,
+                this.state.submitPrice)
+                                     .send({from: web3.eth.defaultAccount, gasLimit: 1000000});
 
-                console.log(receipt);
+              console.log(receipt);
 
-                receipt = await ProposalCuration.methods.submitProposal(
+              receipt = await ProposalCuration.methods.submitProposal(
+                "0x00",
+                "0x0000000000000000000000000000000000000000",
+                0,
                 "0x00",
-                "0x0000000000000000000000000000000000000000", 
-                0, 
-                "0x00", 
                 hexHash
-                )
-                .send({from: web3.eth.defaultAccount, gasLimit: 1000000});
+              )
+                                              .send({from: web3.eth.defaultAccount, gasLimit: 1000000});
 
-                console.log(receipt);
-                })
+              console.log(receipt);
+            })
             .catch((err) => {
-                if(err){
-                    // TODO show error
-                    console.log("Storage saveText Error => " + err.message);
-                }
+              if(err){
+                // TODO show error
+                console.log("Storage saveText Error => " + err.message);
+              }
             });
-    }
-    
+  }
 
-    render(){
-        return (
-            <Fragment>
-            {
-                !this.state.canSubmit ?
-                <Alert bsStyle="warning">
-                Account not allowed to submit proposals
-                </Alert>
-                : ''
-            }
-            <h2>Add proposal</h2>
-            <p>Execute this on the console if proposal submit is not allowed</p>
-            <code>await ProposalCuration.methods.setSubmitPrice(web3.eth.defaultAccount, true, 1).send();</code>
-            <h3>Price: {this.state.submitPrice}</h3>
-            <Form>
-                <FormGroup>
-                <label>
-                    Title:
-                    <FormControl
-                    type="text"
-                    defaultValue={this.state.title}
-                    onChange={(e) => this.setState({title: e.target.value }) } />
-                </label>
-                </FormGroup>
-                <FormGroup>
-                <label>
-                    Description:
-                    <FormControl
-                    type="text"
-                    defaultValue={this.state.description}
-                    onChange={(e) => this.setState({description: e.target.value }) } />
-                </label>
-                </FormGroup>
-                <FormGroup>
-                <label>
-                    URL:
-                    <FormControl
-                    type="text"
-                    defaultValue={this.state.url}
-                    onChange={(e) => this.setState({url: e.target.value }) } />
-                </label>
-                </FormGroup>
-                {
-                    this.state.canSubmit ?
-                    <FormGroup>
-                        <Button onClick={(e) => this.handleClick(e)}>Submit</Button>
-                    </FormGroup>
-                    : ''
-                }
-          </Form>
-        </Fragment>
-        )
-    }
+
+  render(){
+    const { values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting, setFieldValue } = this.props;
+    const { canSubmit } = this.state;
+    return (
+      <Fragment>
+      {canSubmit &&
+       <Alert bsStyle="warning">
+         Account not allowed to submit proposals
+       </Alert>
+      }
+      <h2>Add proposal</h2>
+      <p>Execute this on the console if proposal submit is not allowed</p>
+      <code>await ProposalCuration.methods.setSubmitPrice(web3.eth.defaultAccount, true, 1).send();</code>
+      <h3>Price: {this.state.submitPrice}</h3>
+      <Form>
+        <FormGroup>
+          <label>
+            Title:
+            <FormControl
+              type="text"
+              defaultValue={this.state.title}
+              onChange={(e) => this.setState({title: e.target.value }) } />
+          </label>
+        </FormGroup>
+        <FieldGroup
+          id="title"
+          name="title"
+          type="test"
+          label="Title"
+          onChange={handleChange}
+          onBlur={handleBlur}
+          value={values.title}
+        />
+        <FormGroup>
+          <label>
+            Description:
+            <FormControl
+              type="text"
+              defaultValue={this.state.description}
+              onChange={(e) => this.setState({description: e.target.value }) } />
+          </label>
+        </FormGroup>
+        <FormGroup>
+          <label>
+            URL:
+            <FormControl
+              type="text"
+              defaultValue={this.state.url}
+              onChange={(e) => this.setState({url: e.target.value }) } />
+          </label>
+        </FormGroup>
+        {
+          this.state.canSubmit ?
+          <FormGroup>
+            <Button onClick={(e) => this.handleClick(e)}>Submit</Button>
+          </FormGroup>
+          : ''
+        }
+      </Form>
+      </Fragment>
+    )
+  }
 }
 
+const ProposalManager = withFormik({
+  mapPropsToValues: props => ({ title: '' }),
+  validate(values) {},
+  handleSubmit(values, { setSubmitting}){}
+})(InnerForm)
+
 export default ProposalManager;
diff --git a/app/components/standard/FieldGroup.js b/app/components/standard/FieldGroup.js
new file mode 100644
index 0000000..61bb519
--- /dev/null
+++ b/app/components/standard/FieldGroup.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { FormGroup, FormControl, HelpBlock, ControlLabel, InputGroup } from 'react-bootstrap';
+
+const FieldGroup = ({ id, label, button, error, ...props }) => (
+  <FormGroup controlId={id} validationState={error ? 'error' : null}>
+    <ControlLabel>{label}</ControlLabel>
+    {button
+     ? <InputGroup>
+       <InputGroup.Button>
+         {button}
+       </InputGroup.Button>
+       <FormControl {...props} />
+     </InputGroup>
+     : <FormControl {...props} />
+    }
+    {error && <HelpBlock>{error}</HelpBlock>}
+  </FormGroup>
+)
+
+export default FieldGroup;
diff --git a/package.json b/package.json
index 560327f..f1cc579 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,9 @@
   },
   "homepage": "https://github.com/status-im/contracts#readme",
   "dependencies": {
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-stage-2": "^6.24.1",
+    "formik": "^0.11.11",
     "jquery": "^3.3.1",
     "react": "^16.3.2",
     "react-blockies": "^1.3.0",