Refactor proposal form

app/components/add-proposal/component.js

@@ -1,67 +1,60 @@
-import Ember from 'ember';
-
-const {
-  Component,
-  isPresent,
-  inject: {
-    service
-  },
-  computed
-} = Ember;
+import Component from 'ember-component';
+import computed, { and } from 'ember-computed';
+import injectService from 'ember-service/inject';
+import isPresent from 'kredits-web/utils/cps/is-present';
 
 export default Component.extend({
+  kredits: injectService(),
 
-  kredits: service(),
+  // Default attributes used by reset
+  attributes: {
+    recipientId: null,
+    kind: 'community',
+    amount: null,
+    description: null,
+    url: null,
+  },
 
-  proposal: null,
-  contributors: null,
-  inProgress: false,
+  didInsertElement() {
+    this._super(...arguments);
+    this.reset();
+  },
 
-  isValidRecipient: computed('proposal.recipientAddress', function() {
-    // TODO: add proper address validation
-    return this.get('proposal.recipientAddress') !== '';
+  contributors: [],
+
+  isValidRecipient: isPresent('recipientId'),
+  isValidAmount: computed('amount', function() {
+    return parseInt(this.get('amount'), 10) > 0;
   }),
+  isValidDescription: isPresent('description'),
+  isValidUrl: isPresent('url'),
+  isValid: and('isValidRecipient',
+               'isValidAmount',
+               'isValidDescription'),
 
-  isValidAmount: computed('proposal.amount', function() {
-    return parseInt(this.get('proposal.amount'), 10) > 0;
-  }),
-
-  isValidUrl: computed('proposal.url', function() {
-    return isPresent(this.get('proposal.url'));
-  }),
-
-  isValidDescription: computed('proposal.description', function() {
-    return isPresent(this.get('proposal.description'));
-  }),
-
-  isValid: computed.and('isValidRecipient',
-                        'isValidAmount',
-                        'isValidDescription'),
+  reset: function() {
+    this.setProperties(this.get('attributes'));
+  },
 
   actions: {
-    save() {
-      if (! this.get('isValid')) {
+    submit() {
+      if (!this.get('isValid')) {
         alert('Invalid data. Please review and try again.');
-        return false;
+        return;
       }
-      this.set('inProgress', true);
-      let proposal = this.get('proposal');
 
-      // Set the recipient's IPFS profile hash so it can be used in the
-      // contribution object (which is to be stored in IPFS as well)
-      let contributor = this.get('contributors').findBy('address', proposal.get('recipientAddress'));
-      proposal.set('recipientProfile', contributor.get('ipfsHash'));
+      let attributes = Object.keys(this.get('attributes'));
+      let proposal = this.getProperties(attributes);
+      let saved = this.save(proposal);
 
-      this.get('kredits').addProposal(proposal)
-        .then(() => {
-          this.attrs.onSave();
-        }).catch((error) => {
-          Ember.Logger.error('[add-proposal] error creating the proposal', error);
-          alert('Something went wrong.');
-        }).finally(() => {
-          this.set('inProgress', false);
-        });
+      // The promise handles inProgress
+      this.set('inProgress', saved);
+
+      saved.then(() => {
+        this.reset();
+        window.scroll(0,0);
+        window.alert('Contributor added.');
+      });
     }
   }
-
 });

app/components/add-proposal/template.hbs

@@ -1,41 +1,43 @@
-<form {{action "save" on="submit"}}>
+<form {{action "submit" on="submit"}}>
   <p>
-    <select required onchange={{action (mut proposal.recipientAddress) value="target.value"}}>
+    <select required onchange={{action (mut recipientId) value="target.value"}}>
       <option value="" selected disabled hidden>Contributor</option>
       {{#each contributors as |contributor|}}
-        <option value={{contributor.address}} selected={{eq proposal.recipientAddress contributor.address}}>{{contributor.github_username}}</option>
+        <option value={{contributor.id}} selected={{eq recipientId contributor.id}}>{{contributor.github_username}}</option>
       {{/each}}
     </select>
   </p>
   <p>
-    <select required onchange={{action (mut proposal.kind) value="target.value"}}>
-      <option value="community" selected={{eq proposal.kind "community"}}>Community</option>
-      <option value="design" selected={{eq proposal.kind "design"}}>Design</option>
-      <option value="dev" selected={{eq proposal.kind "dev"}}>Development</option>
-      <option value="docs" selected={{eq proposal.kind "docs"}}>Documentation</option>
-      <option value="ops" selected={{eq proposal.kind "ops"}}>IT Operations</option>
+    <select required onchange={{action (mut kind) value="target.value"}}>
+      <option value="community" selected={{eq kind "community"}}>Community</option>
+      <option value="design" selected={{eq kind "design"}}>Design</option>
+      <option value="dev" selected={{eq kind "dev"}}>Development</option>
+      <option value="docs" selected={{eq kind "docs"}}>Documentation</option>
+      <option value="ops" selected={{eq kind "ops"}}>IT Operations</option>
     </select>
   </p>
   <p>
     {{input type="text"
             placeholder="100"
-            value=proposal.amount
+            value=amount
             class=(if isValidAmount 'valid' '')}}
   </p>
   <p>
     {{input type="text"
             placeholder="Description"
-            value=proposal.description
+            value=description
             class=(if isValidDescription 'valid' '')}}
   </p>
   <p>
     {{input type="text"
             placeholder="URL (optional)"
-            value=proposal.url
+            value=url
             class=(if isValidUrl 'valid' '')}}
   </p>
   <p class="actions">
-    {{input type="submit" value=(if inProgress 'Processing' 'Save') disabled=inProgress}}
+    {{input type="submit"
+            disabled=(is-pending inProgress)
+            value=(if (is-pending inProgress) 'Processing' 'Save')}}
     {{#link-to 'index'}}Back{{/link-to}}
   </p>
 </form>