Hidden Proposal Form auto-complete (#53)

frontend/client/components/CreateProposal/exampleProposal.json

@@ -0,0 +1,27 @@
+{
+  "title": "An example proposal",
+  "proposalBody":
+    "## Hey\n\n### This is an example proposal\n\nIt even has some code!\n\n`print(\"Hello World!\")`",
+  "amountToRaise": "5.5",
+  "payOutAddress": "0x7ae4faf987a9316a03a44ad180b6679ac9df5400",
+  "trustees": [],
+  "deadline": 60,
+  "milestoneDeadline": 60,
+  "milestones": [
+    {
+      "title": "First Milestone",
+      "description": "This is where I get some money",
+      "date": "October 2018",
+      "payoutPercent": 75,
+      "immediatePayout": true
+    },
+    {
+      "title": "Second Milestone",
+      "description": "This is where I get more money",
+      "date": "December 2018",
+      "payoutPercent": 25,
+      "immediatePayout": false
+    }
+  ],
+  "category": "ACCESSIBILITY"
+}

frontend/client/components/CreateProposal/index.tsx

@@ -16,7 +16,9 @@ import { getAmountError } from 'utils/validators';
 import MarkdownEditor from 'components/MarkdownEditor';
 import * as Styled from './styled';
 import { Wei, toWei } from 'utils/units';
+import exampleProposal from './exampleProposal.json';
 import BN from 'bn.js';
+
 interface StateProps {
   crowdFundLoading: AppState['web3']['crowdFundLoading'];
   crowdFundError: AppState['web3']['crowdFundError'];
@@ -90,6 +92,12 @@ class CreateProposal extends React.Component<Props, State> {
     }
   }
 
+  setExampleProposal() {
+    if (process.env.NODE_ENV !== 'production') {
+      this.setState(exampleProposal);
+    }
+  }
+
   handleInputChange = (
     event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
@@ -171,7 +179,6 @@ class CreateProposal extends React.Component<Props, State> {
       milestones,
       category,
     } = this.state;
-
     const backendData = { content: proposalBody, title, category };
     const targetInWei = toWei(amountToRaise, 'ether');
     const milestoneAmounts = milestones.map(milestone =>
@@ -304,7 +311,9 @@ class CreateProposal extends React.Component<Props, State> {
 
     return (
       <Form layout="vertical">
-        <Styled.Title>Create a proposal</Styled.Title>
+        <Styled.Title onClick={() => this.setExampleProposal()}>
+          Create a proposal
+        </Styled.Title>
         <Styled.HelpText>All fields are required</Styled.HelpText>
 
         <Form.Item
@@ -434,6 +443,11 @@ class CreateProposal extends React.Component<Props, State> {
             size="large"
             style={{ display: 'flex', textAlign: 'center' }}
           >
+            {deadline === 60 && (
+              <Radio.Button style={{ flex: 1 }} value={60}>
+                60 Seconds
+              </Radio.Button>
+            )}
             <Radio.Button style={{ flex: 1 }} value={60 * 60 * 24 * 30}>
               30 Days
             </Radio.Button>
@@ -454,6 +468,11 @@ class CreateProposal extends React.Component<Props, State> {
             size="large"
             style={{ display: 'flex', textAlign: 'center' }}
           >
+            {milestoneDeadline === 60 && (
+              <Radio.Button style={{ flex: 1 }} value={60}>
+                60 Seconds
+              </Radio.Button>
+            )}
             <Radio.Button style={{ flex: 1 }} value={60 * 60 * 24 * 3}>
               3 Days
             </Radio.Button>