Merge pull request #167 from LiskHQ/refactor-dialogs

Refactor use of alert dialogs and toasts

src/app/components/delegates/delegates.js

@@ -10,14 +10,14 @@ app.component('delegates', {
   },
   controller: class delegates {
     constructor($scope, $rootScope, $peers, $mdDialog, $mdMedia,
-      $mdToast, $timeout, delegateService, Account) {
+      dialog, $timeout, delegateService, Account) {
       this.$scope = $scope;
       this.$rootScope = $rootScope;
       this.$peers = $peers;
       this.delegateService = delegateService;
       this.$mdDialog = $mdDialog;
       this.$mdMedia = $mdMedia;
-      this.$mdToast = $mdToast;
+      this.dialog = dialog;
       this.$timeout = $timeout;
       this.account = Account;
 
@@ -208,10 +208,7 @@ app.component('delegates', {
         this.usernameInput = '';
         this.openVoteDialog();
       } else {
-        const toast = this.$mdToast.simple();
-        toast.toastClass('lsk-toast-error');
-        toast.textContent('No delegate usernames could be parsed from the input');
-        this.$mdToast.show(toast);
+        this.dialog.errorToast('No delegate usernames could be parsed from the input');
       }
     }
 
@@ -250,24 +247,19 @@ app.component('delegates', {
       this.$mdDialog.show({
         controllerAs: '$ctrl',
         controller: class voteDialog {
-          constructor($scope, account, passphrase, voteList, unvoteList) {
+          constructor($scope, voteList, unvoteList) {
             this.$scope = $scope;
-            this.$scope.account = account;
-            this.$scope.passphrase = passphrase;
             this.$scope.voteList = voteList;
             this.$scope.unvoteList = unvoteList;
           }
         },
         template:
           '<md-dialog flex="80">' +
-            '<vote account="account" passphrase="passphrase" ' +
-              'vote-list="voteList" unvote-list="unvoteList">' +
+            '<vote vote-list="voteList" unvote-list="unvoteList">' +
             '</vote>' +
           '</md-dialog>',
         fullscreen: (this.$mdMedia('sm') || this.$mdMedia('xs')) && this.$scope.customFullscreen,
         locals: {
-          account: this.account.get(),
-          passphrase: this.account.get().passphrase,
           voteList: this.voteList,
           unvoteList: this.unvoteList,
         },

src/app/components/delegates/delegates.pug

@@ -10,7 +10,7 @@ div.offline-hide
         span.pull-right
           md-button(ng-click='$ctrl.parseVoteListFromInput("voteList")', ng-disabled='$ctrl.pendingRequests || !$ctrl.usernameInput')
             span Add to vote list
-          md-button(ng-click='$ctrl.parseUnvoteListFromInput(")', ng-disabled='$ctrl.pendingRequests || !$ctrl.usernameInput')
+          md-button(ng-click='$ctrl.parseUnvoteListFromInput("unvoteList")', ng-disabled='$ctrl.pendingRequests || !$ctrl.usernameInput')
             span Add to unvote list
     md-progress-linear(md-mode='indeterminate', ng-show='$ctrl.pendingRequests')
   md-card(flex-gt-xs=100)

src/app/components/delegates/vote.js

@@ -7,9 +7,9 @@ app.component('vote', {
     unvoteList: '=',
   },
   controller: class vote {
-    constructor($scope, $mdDialog, $mdToast, delegateService, $rootScope, Account) {
+    constructor($scope, $mdDialog, dialog, delegateService, $rootScope, Account) {
       this.$mdDialog = $mdDialog;
-      this.$mdToast = $mdToast;
+      this.dialog = dialog;
       this.delegateService = delegateService;
       this.$rootScope = $rootScope;
       this.account = Account;
@@ -18,7 +18,7 @@ app.component('vote', {
       this.votedList = [];
 
       this.delegateService.listAccountDelegates({
-        address: this.account.address,
+        address: this.account.get().address,
       }).then((data) => {
         this.votedList = data.delegates || [];
         this.votedList.forEach((delegate) => {
@@ -37,15 +37,9 @@ app.component('vote', {
         unvoteList: this.unvoteList,
       }).then(() => {
         this.$mdDialog.hide(this.voteList, this.unvoteList);
-        const toast = this.$mdToast.simple();
-        toast.toastClass('lsk-toast-success');
-        toast.textContent('Voting succesfull');
-        this.$mdToast.show(toast);
+        this.dialog.successToast('Voting successful');
       }).catch((response) => {
-        const toast = this.$mdToast.simple();
-        toast.toastClass('lsk-toast-error');
-        toast.textContent(response.message || 'Voting failed');
-        this.$mdToast.show(toast);
+        this.dialog.errorToast(response.message || 'Voting failed');
       }).finally(() => {
         this.votingInProgress = false;
       });

src/app/components/main/main.js

@@ -7,13 +7,13 @@ app.component('main', {
   controllerAs: '$ctrl',
   controller: class main {
     constructor($scope, $rootScope, $timeout, $q, $state, $peers,
-      error, SendModal, Account) {
+      dialog, SendModal, Account) {
       this.$scope = $scope;
       this.$rootScope = $rootScope;
       this.$timeout = $timeout;
       this.$q = $q;
       this.$peers = $peers;
-      this.error = error;
+      this.dialog = dialog;
       this.sendModal = SendModal;
       this.$state = $state;
       this.account = Account;
@@ -43,7 +43,7 @@ app.component('main', {
           if (attempts < 10) {
             this.$timeout(() => this.init(attempts + 1), 1000);
           } else {
-            this.error.dialog({ text: 'No peer connection' });
+            this.dialog.errorAlert({ text: 'No peer connection' });
             this.$rootScope.logout();
           }
         });

src/app/components/main/setSecondPassDirective.js

@@ -1,6 +1,6 @@
 import './secondPass.less';
 
-app.directive('setSecondPass', (setSecondPass, $peers, $rootScope, success, error) => {
+app.directive('setSecondPass', (setSecondPass, $peers, $rootScope, dialog) => {
   /* eslint no-param-reassign: ["error", { "props": false }] */
   const SetSecondPassLink = function (scope, element, attrs) {
     element.bind('click', () => {
@@ -10,7 +10,7 @@ app.directive('setSecondPass', (setSecondPass, $peers, $rootScope, success, erro
     scope.passConfirmSubmit = (secondsecret) => {
       $peers.active.setSignature(secondsecret, attrs.publicKey, attrs.passphrase)
         .then(() => {
-          success.dialog('Your second passphrase was successfully registered.');
+          dialog.successAlert('Your second passphrase was successfully registered.');
         })
         .catch((err) => {
           let text = '';
@@ -21,7 +21,7 @@ app.directive('setSecondPass', (setSecondPass, $peers, $rootScope, success, erro
           } else {
             text = 'An error occurred while registering your second passphrase. Please try again.';
           }
-          error.dialog({ text });
+          dialog.errorAlert({ text });
         });
     };
 

src/app/components/send/send.js

@@ -10,11 +10,10 @@ app.component('send', {
     transferAmount: '<',
   },
   controller: class send {
-    constructor($scope, $peers, lsk, success, error, $mdDialog, $q, $rootScope, Account) {
+    constructor($scope, $peers, lsk, dialog, $mdDialog, $q, $rootScope, Account) {
       this.$scope = $scope;
       this.$peers = $peers;
-      this.success = success;
-      this.error = error;
+      this.dialog = dialog;
       this.$mdDialog = $mdDialog;
       this.$q = $q;
       this.$rootScope = $rootScope;
@@ -97,13 +96,13 @@ app.component('send', {
                 fee: 10000000,
               };
               this.$rootScope.$broadcast('transaction-sent', transaction);
-              return this.success.dialog({ text: `${this.amount.value} sent to ${this.recipient.value}` })
+              return this.dialog.successAlert({ text: `${this.amount.value} sent to ${this.recipient.value}` })
                 .then(() => {
                   this.reset();
                 });
             },
             (res) => {
-              this.error.dialog({ text: res && res.message ? res.message : 'An error occurred while sending the transaction.' });
+              this.dialog.errorAlert({ text: res && res.message ? res.message : 'An error occurred while sending the transaction.' });
             },
           )
           .finally(() => {

src/app/lisk-nano.js

@@ -23,8 +23,7 @@ import './components/sign-verify/verify-message';
 
 import './services/peers/peers';
 import './services/lsk';
-import './services/success';
-import './services/error';
+import './services/dialog';
 import './services/passphrase';
 import './services/sign-verify';
 import './services/account';

src/app/services/dialog.js

@@ -0,0 +1,50 @@
+app.factory('dialog', ($mdDialog, $mdToast, $mdMedia) => ({
+
+  errorToast(text) {
+    return this.toast({ success: false, text });
+  },
+
+  successToast(text) {
+    return this.toast({ success: true, text });
+  },
+
+  toast({ success = false, text, toastClass }) {
+    toastClass = toastClass || (success ? 'lsk-toast-success' : 'lsk-toast-error');
+    $mdToast.show(
+      $mdToast.simple()
+        .textContent(text)
+        .toastClass(toastClass)
+        .position('bottom right'),
+    );
+  },
+
+  errorAlert({ title, text, button }) {
+    return this.alert({ success: false, title, text, button });
+  },
+
+  successAlert({ title, text, button }) {
+    return this.alert({ success: true, title, text, button });
+  },
+
+  alert({ title = '', success = false, text, button = 'OK' }) {
+    title = title || (success ? 'Success' : 'Error');
+    return $mdDialog.show(
+      $mdDialog.alert()
+        .title(title)
+        .textContent(text)
+        .ok(button),
+    );
+  },
+
+  modal(options) {
+    options.fullscreen = ($mdMedia('sm') || $mdMedia('xs'));
+    if (options.template) {
+      options.template =
+          `<md-dialog flex="80" >${
+            options.template
+          }</md-dialog>`;
+    }
+    return $mdDialog.show(options);
+  },
+}));
+

src/test/components/delegates/delegates.spec.js

@@ -291,7 +291,7 @@ describe('delegates component controller', () => {
       const username = 'invalid_name';
       const deffered = $q.defer();
       delegateServiceMock.expects('getDelegate').withArgs(username).returns(deffered.promise);
-      const toastSpy = sinon.spy(controller.$mdToast, 'show');
+      const toastSpy = sinon.spy(controller.dialog, 'errorToast');
       const dialogSpy = sinon.spy(controller, 'openVoteDialog');
       controller.usernameInput = username;
       controller.voteList = [];

src/test/components/delegates/vote.spec.js

@@ -97,27 +97,28 @@ describe('Vote component controller', () => {
 
   describe('vote()', () => {
     let deffered;
-    let mdToastMock;
+    let dilaogServiceMock;
 
     beforeEach(() => {
       deffered = $q.defer();
       delegateServiceMock.expects('vote').returns(deffered.promise);
-      mdToastMock = sinon.mock(controller.$mdToast);
-      mdToastMock.expects('show');
+      dilaogServiceMock = sinon.mock(controller.dialog);
     });
 
     afterEach(() => {
-      mdToastMock.verify();
+      dilaogServiceMock.verify();
       delegateServiceMock.verify();
     });
 
-    it('shows an error $mdToast if request fails', () => {
+    it('shows an error toast if request fails', () => {
+      dilaogServiceMock.expects('errorToast');
       controller.vote();
       deffered.reject({ success: false });
       $scope.$apply();
     });
 
-    it('shows a success $mdToast if request succeeds', () => {
+    it('shows a success toast if request succeeds', () => {
+      dilaogServiceMock.expects('successToast');
       controller.vote();
       deffered.resolve({ success: true });
       $scope.$apply();

src/test/components/main/main.spec.js

@@ -87,8 +87,8 @@ describe('main component controller', () => {
       expect(spy).to.have.been.calledWith();
     });
 
-    it('calls this.update() and if that fails and attempts >= 10, then show error dialog', () => {
-      const spy = sinon.spy(controller.error, 'dialog');
+    it('calls this.update() and if that fails and attempts >= 10, then show error alert dialog', () => {
+      const spy = sinon.spy(controller.dialog, 'errorAlert');
 
       controller.init(10);
       deffered.reject();