Refactor add-contributor component to DDAU

app/components/add-contributor/component.js

@@ -1,81 +1,67 @@
-import Ember from 'ember';
-import Contributor from 'kredits-web/models/contributor';
+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';
 
-const {
-  Component,
-  isPresent,
-  inject: {
-    service
-  },
-  computed
-} = Ember;
 
 export default Component.extend({
+  kredits: injectService(),
 
-  kredits: service(),
+  // Default attributes used by reset
+  attributes: {
+    address: null,
+    name: null,
+    kind: 'person',
+    url: null,
+    github_username: null,
+    github_uid: null,
+    wiki_username: null,
+    profileHash: null,
+    isCore: false,
+  },
 
-  newContributor: null,
-  inProgress: false,
+  didInsertElement() {
+    this._super(...arguments);
+    this.reset();
+  },
 
-  isValidAddress: function() {
+  isValidAddress: computed('kredits.ethProvider', 'address', function() {
     // TODO: add proper address validation
-    return this.get('newContributor.address') !== '';
-  }.property('kredits.ethProvider', 'newContributor.address'),
-
-  isValidName: function() {
-    return isPresent(this.get('newContributor.name'));
-  }.property('newContributor.name'),
-
-  isValidURL: function() {
-    return isPresent(this.get('newContributor.url'));
-  }.property('newContributor.url'),
-
-  isValidGithubUID: function() {
-    return isPresent(this.get('newContributor.github_uid'));
-  }.property('newContributor.github_uid'),
-
-  isValidGithubUsername: function() {
-    return isPresent(this.get('newContributor.github_username'));
-  }.property('newContributor.github_username'),
-
-  isValidWikiUsername: function() {
-    return isPresent(this.get('newContributor.wiki_username'));
-  }.property('newContributor.wiki_username'),
-
-  isValid: computed.and(
+    return this.get('address') !== '';
+  }),
+  isValidName: isPresent('name'),
+  isValidURL: isPresent('url'),
+  isValidGithubUID: isPresent('github_uid'),
+  isValidGithubUsername: isPresent('github_username'),
+  isValidWikiUsername: isPresent('wiki_username'),
+  isValid: and(
     'isValidAddress',
     'isValidName',
     'isValidGithubUID'
   ),
 
   reset: function() {
-    this.setProperties({
-      newContributor: Contributor.create({ kind: 'person' }),
-      inProgress: false
-    });
+    this.setProperties(this.get('attributes'));
   },
 
   actions: {
-
-    save() {
-      if (!this.get('contractInteractionEnabled')) {
-        alert('Only core team members can add new contributors. Please ask someone to set you up.');
+    submit() {
+      if (!this.get('isValid')) {
+        alert('Invalid data. Please review and try again.');
         return;
       }
 
-      if (this.get('isValid')) {
-        this.set('inProgress', true);
+      let attributes = Object.keys(this.get('attributes'));
+      let contributor = this.getProperties(attributes);
+      let saved = this.save(contributor);
 
-        this.get('kredits').addContributor(this.get('newContributor')).then(contributor => {
-          this.reset();
-          this.get('contributors').pushObject(contributor);
-          window.scroll(0,0);
-        });
-      } else {
-        alert('Invalid data. Please review and try again.');
-      }
+      // The promise handles inProgress
+      this.set('inProgress', saved);
+
+      saved.then(() => {
+        this.reset();
+        window.scroll(0,0);
+      });
     }
-
   }
-
 });

app/components/add-contributor/template.hbs

@@ -1,6 +1,9 @@
-<form {{action "save" on="submit"}}>
+<form {{action "submit" on="submit"}}>
   <p>
-    {{input type="checkbox" name="is-core" id="is-core" checked=newContributor.isCore}}
+    {{input name="is-core"
+            type="checkbox"
+            id="is-core"
+            checked=isCore}}
     <label for="is-core" class="checkbox">
       Core team member (can add contributors)
     </label>
@@ -9,51 +12,53 @@
     {{input name="address"
             type="text"
             placeholder="0xF18E631Ea191aE4ebE70046Fcb01a436554421BA4"
-            value=newContributor.address
+            value=address
             class=(if isValidAddress 'valid' '')}}
   </p>
   <p>
-    <select required onchange={{action (mut newContributor.kind) value="target.value"}}>
-      <option value="person" selected={{eq newContributor.kind "person"}}>Person</option>
-      <option value="organization" selected={{eq newContributor.kind "organization"}}>Organization</option>
+    <select required onchange={{action (mut kind) value="target.value"}}>
+      <option value="person" selected={{eq kind "person"}}>Person</option>
+      <option value="organization" selected={{eq kind "organization"}}>Organization</option>
     </select>
   </p>
   <p>
     {{input name="name"
             type="text"
             placeholder="Name"
-            value=newContributor.name
+            value=name
             class=(if isValidName 'valid' '')}}
   </p>
   <p>
     {{input name="url"
             type="text"
             placeholder="URL"
-            value=newContributor.url
+            value=url
             class=(if isValidURL 'valid' '')}}
   </p>
   <p>
     {{input name="github_uid"
             type="text"
             placeholder="GitHub UID (123)"
-            value=newContributor.github_uid
+            value=github_uid
             class=(if isValidGithubUID 'valid' '')}}
   </p>
   <p>
     {{input name="github_username"
             type="text"
             placeholder="GitHub username"
-            value=newContributor.github_username
+            value=github_username
             class=(if isValidGithubUsername 'valid' '')}}
   </p>
   <p>
     {{input name="wiki_username"
             type="text"
             placeholder="Wiki Username"
-            value=newContributor.wiki_username
+            value=wiki_username
             class=(if isValidWikiUsername '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')}}
   </p>
 </form>

app/controllers/index.js

@@ -116,13 +116,18 @@ export default Ember.Controller.extend({
 
 
   actions: {
-
     confirmProposal(proposalId) {
       this.get('kredits').vote(proposalId).then(transaction => {
         window.confirm('Vote submitted to Ethereum blockhain: '+transaction.hash);
       });
+    },
+
+    save(contributor) {
+      return this.get('kredits').addContributor(contributor)
+        .then((contributor) => {
+          this.get('model.contributors').pushObject(contributor);
+          return contributor;
+        });
     }
-
   }
-
 });

app/templates/index.hbs

@@ -65,8 +65,11 @@
   </header>
 
   <div class="content">
-    {{add-contributor contributors=model.contributors
-                      newContributor=model.newContributor
-                      contractInteractionEnabled=contractInteractionEnabled}}
+    {{!--
+      TODO:
+      only show the form if currentUser.isCore else show:
+      Only core team members can add new contributors. Please ask someone to set you up.
+    --}}
+    {{add-contributor contributors=model.contributors save=(action 'save')}}
   </div>
 </section>

app/utils/cps/is-present.js

@@ -0,0 +1,8 @@
+import computed from 'ember-computed';
+import { isPresent } from 'ember-utils';
+
+export default function(key) {
+  return computed(key, function() {
+    return isPresent(this.get(key));
+  });
+}