switch all modals over to ember-concurrency and gh-task-button

TryGhost · Jan 20, 2017 · 6139731 · 6139731
1 parent 0aa8b81
commit 6139731
Show file tree

Hide file tree

Showing 22 changed files with 195 additions and 164 deletions.
diff --git a/app/components/modals/delete-all.js b/app/components/modals/delete-all.js
@@ -1,10 +1,9 @@
 import injectService from 'ember-service/inject';
 import ModalComponent from 'ghost-admin/components/modals/base';
+import {task} from 'ember-concurrency';
 
 export default ModalComponent.extend({
 
-    submitting: false,
-
     ghostPaths: injectService(),
     notifications: injectService(),
     store: injectService(),
@@ -28,18 +27,21 @@ export default ModalComponent.extend({
         this.get('notifications').showAPIError(error, {key: 'all-content.delete'});
     },
 
+    deleteAll: task(function* () {
+        try {
+            yield this._deleteAll();
+            this._unloadData();
+            this._showSuccess();
+        } catch (error) {
+            this._showFailure(error);
+        } finally {
+            this.send('closeModal');
+        }
+    }).drop(),
+
     actions: {
         confirm() {
-            this.set('submitting', true);
-
-            this._deleteAll().then(() => {
-                this._unloadData();
-                this._showSuccess();
-            }).catch((error) => {
-                this._showFailure(error);
-            }).finally(() => {
-                this.send('closeModal');
-            });
+            this.get('deleteAll').perform();
         }
     }
 });
diff --git a/app/components/modals/delete-post.js b/app/components/modals/delete-post.js
@@ -1,11 +1,10 @@
 import {alias} from 'ember-computed';
 import injectService from 'ember-service/inject';
 import ModalComponent from 'ghost-admin/components/modals/base';
+import {task} from 'ember-concurrency';
 
 export default ModalComponent.extend({
 
-    submitting: false,
-
     post: alias('model'),
 
     notifications: injectService(),
@@ -33,17 +32,20 @@ export default ModalComponent.extend({
         this.get('notifications').showAPIError(error, {key: 'post.delete.failed'});
     },
 
+    deletePost: task(function* () {
+        try {
+            yield this._deletePost();
+            this._success();
+        } catch (e) {
+            this._failure(e);
+        } finally {
+            this.send('closeModal');
+        }
+    }).drop(),
+
     actions: {
         confirm() {
-            this.set('submitting', true);
-
-            this._deletePost().then(() => {
-                this._success();
-            }, (error) => {
-                this._failure(error);
-            }).finally(() => {
-                this.send('closeModal');
-            });
+            this.get('deletePost').perform();
         }
     }
 });
diff --git a/app/components/modals/delete-subscriber.js b/app/components/modals/delete-subscriber.js
@@ -1,20 +1,19 @@
 import {alias} from 'ember-computed';
 import ModalComponent from 'ghost-admin/components/modals/base';
 import {invokeAction} from 'ember-invoke-action';
+import {task} from 'ember-concurrency';
 
 export default ModalComponent.extend({
 
-    submitting: false,
-
     subscriber: alias('model'),
 
+    deleteSubscriber: task(function* () {
+        yield invokeAction(this, 'confirm');
+    }).drop(),
+
     actions: {
         confirm() {
-            this.set('submitting', true);
-
-            invokeAction(this, 'confirm').finally(() => {
-                this.set('submitting', false);
-            });
+            this.get('deleteSubscriber').perform();
         }
     }
 });
diff --git a/app/components/modals/delete-tag.js b/app/components/modals/delete-tag.js
@@ -1,24 +1,27 @@
 import computed, {alias} from 'ember-computed';
 import ModalComponent from 'ghost-admin/components/modals/base';
 import {invokeAction} from 'ember-invoke-action';
+import {task} from 'ember-concurrency';
 
 export default ModalComponent.extend({
 
-    submitting: false,
-
     tag: alias('model'),
 
     postInflection: computed('tag.count.posts', function () {
         return this.get('tag.count.posts') > 1 ? 'posts' : 'post';
     }),
 
+    deleteTag: task(function* () {
+        try {
+            yield invokeAction(this, 'confirm');
+        } finally {
+            this.send('closeModal');
+        }
+    }).drop(),
+
     actions: {
         confirm() {
-            this.set('submitting', true);
-
-            invokeAction(this, 'confirm').finally(() => {
-                this.send('closeModal');
-            });
+            this.get('deleteTag').perform();
         }
     }
 });
diff --git a/app/components/modals/delete-theme.js b/app/components/modals/delete-theme.js
@@ -1,21 +1,24 @@
 import ModalComponent from 'ghost-admin/components/modals/base';
 import {alias} from 'ember-computed';
 import {invokeAction} from 'ember-invoke-action';
+import {task} from 'ember-concurrency';
 
 export default ModalComponent.extend({
 
-    submitting: false,
-
     theme: alias('model.theme'),
     download: alias('model.download'),
 
+    deleteTheme: task(function* () {
+        try {
+            yield invokeAction(this, 'confirm');
+        } finally {
+            this.send('closeModal');
+        }
+    }).drop(),
+
     actions: {
         confirm() {
-            this.set('submitting', true);
-
-            invokeAction(this, 'confirm').finally(() => {
-                this.send('closeModal');
-            });
+            this.get('deleteTheme').perform();
         }
     }
 });
diff --git a/app/components/modals/delete-user.js b/app/components/modals/delete-user.js
@@ -1,20 +1,23 @@
 import ModalComponent from 'ghost-admin/components/modals/base';
 import {invokeAction} from 'ember-invoke-action';
 import {alias} from 'ember-computed';
+import {task} from 'ember-concurrency';
 
 export default ModalComponent.extend({
 
-    submitting: false,
-
     user: alias('model'),
 
+    deleteUser: task(function* () {
+        try {
+            yield invokeAction(this, 'confirm');
+        } finally {
+            this.send('closeModal');
+        }
+    }).drop(),
+
     actions: {
         confirm() {
-            this.set('submitting', true);
-
-            invokeAction(this, 'confirm').finally(() => {
-                this.send('closeModal');
-            });
+            this.get('deleteUser').perform();
         }
     }
 });
diff --git a/app/components/modals/invite-new-user.js b/app/components/modals/invite-new-user.js
@@ -4,6 +4,7 @@ import {A as emberA} from 'ember-array/utils';
 import run from 'ember-runloop';
 import ModalComponent from 'ghost-admin/components/modals/base';
 import ValidationEngine from 'ghost-admin/mixins/validation-engine';
+import {task} from 'ember-concurrency';
 
 const {Promise} = RSVP;
 
@@ -13,7 +14,6 @@ export default ModalComponent.extend(ValidationEngine, {
     role: null,
     roles: null,
     authorRole: null,
-    submitting: false,
 
     validationType: 'inviteUser',
 
@@ -85,42 +85,49 @@ export default ModalComponent.extend(ValidationEngine, {
         });
     },
 
+    sendInvitation: task(function* () {
+        let email = this.get('email');
+        let role = this.get('role');
+        let notifications = this.get('notifications');
+        let notificationText = `Invitation sent! (${email})`;
+        let invite;
+
+        try {
+            yield this.validate();
+
+            invite = this.get('store').createRecord('invite', {
+                email,
+                role
+            });
+
+            yield invite.save();
+
+            // If sending the invitation email fails, the API will still return a status of 201
+            // but the invite's status in the response object will be 'invited-pending'.
+            if (invite.get('status') === 'pending') {
+                notifications.showAlert('Invitation email was not sent.  Please try resending.', {type: 'error', key: 'invite.send.failed'});
+            } else {
+                notifications.showNotification(notificationText, {key: 'invite.send.success'});
+            }
+
+            this.send('closeModal');
+        } catch (error) {
+            // validation will reject and cause this to be called with no error
+            if (error) {
+                invite.deleteRecord();
+                notifications.showAPIError(error, {key: 'invite.send'});
+                this.send('closeModal');
+            }
+        }
+    }).drop(),
+
     actions: {
         setRole(role) {
             this.set('role', role);
         },
 
         confirm() {
-            let email = this.get('email');
-            let role = this.get('role');
-            let notifications = this.get('notifications');
-            let invite;
-
-            this.validate().then(() => {
-                this.set('submitting', true);
-
-                invite = this.get('store').createRecord('invite', {
-                    email,
-                    role
-                });
-
-                invite.save().then(() => {
-                    let notificationText = `Invitation sent! (${email})`;
-
-                    // If sending the invitation email fails, the API will still return a status of 201
-                    // but the invite's status in the response object will be 'invited-pending'.
-                    if (invite.get('status') === 'pending') {
-                        notifications.showAlert('Invitation email was not sent.  Please try resending.', {type: 'error', key: 'invite.send.failed'});
-                    } else {
-                        notifications.showNotification(notificationText, {key: 'invite.send.success'});
-                    }
-                }).catch((error) => {
-                    invite.deleteRecord();
-                    notifications.showAPIError(error, {key: 'invite.send'});
-                }).finally(() => {
-                    this.send('closeModal');
-                });
-            });
+            this.get('sendInvitation').perform();
         }
     }
 });
diff --git a/app/components/modals/new-subscriber.js b/app/components/modals/new-subscriber.js
@@ -1,8 +1,35 @@
 import {A as emberA} from 'ember-array/utils';
 import ModalComponent from 'ghost-admin/components/modals/base';
 import {isInvalidError} from 'ember-ajax/errors';
+import {task} from 'ember-concurrency';
 
 export default ModalComponent.extend({
+
+    addSubscriber: task(function* () {
+        try {
+            yield this.get('confirm')();
+            this.send('closeModal');
+        } catch (error) {
+            // TODO: server-side validation errors should be serialized
+            // properly so that errors are added to the model's errors
+            // property
+            if (error && isInvalidError(error)) {
+                let [firstError] = error.errors;
+                let {message} = firstError;
+
+                if (message && message.match(/email/i)) {
+                    this.get('model.errors').add('email', message);
+                    this.get('model.hasValidated').pushObject('email');
+                    return;
+                }
+            }
+
+            // this is a route action so it should bubble up to the global
+            // error handler
+            throw error;
+        }
+    }).drop(),
+
     actions: {
         updateEmail(newEmail) {
             this.set('model.email', newEmail);
@@ -11,35 +38,7 @@ export default ModalComponent.extend({
         },
 
         confirm() {
-            let confirmAction = this.get('confirm');
-
-            this.set('submitting', true);
-
-            confirmAction().then(() => {
-                this.send('closeModal');
-            }).catch((error) => {
-                // TODO: server-side validation errors should be serialized
-                // properly so that errors are added to the model's errors
-                // property
-                if (error && isInvalidError(error)) {
-                    let [firstError] = error.errors;
-                    let {message} = firstError;
-
-                    if (message && message.match(/email/i)) {
-                        this.get('model.errors').add('email', message);
-                        this.get('model.hasValidated').pushObject('email');
-                        return;
-                    }
-                }
-
-                // this is a route action so it should bubble up to the global
-                // error handler
-                throw error;
-            }).finally(() => {
-                if (!this.get('isDestroying') && !this.get('isDestroyed')) {
-                    this.set('submitting', false);
-                }
-            });
+            this.get('addSubscriber').perform();
         }
     }
 });