Move flash errors to service

Dependencies between controllers should be avoided and moved to services instead.
This is because the lifecycle of controllers is slightly unpredictable, as its tied to routes and if for example a controller is used by multiple routes, you might get funky behaviour.
With services, the expectation is different, so one tends to use it according to said expectations.

For the flash messages services I thought I would encapsulate the behaviour and expose what I hope are meaningful methods, `show` for immediately displaying the error, `queue` for displaying it on the next transition, and `step` to actually cycle the errors on transition.

I also abstracted the rendering of the flash error message into a component, injecting the flash messages service to display the error and control visibility.

Author: locks

app/components/flash-message.js

@@ -0,0 +1,10 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+    flashMessages: Ember.inject.service(),
+    message: Ember.computed.readOnly('flashMessages.message'),
+
+    elementId: 'flash',
+    tagName: 'p',
+    classNameBindings: ['message:shown']
+});

app/controllers/application.js

@@ -2,9 +2,6 @@ import Ember from 'ember';
 
 export default Ember.Controller.extend({
     searchController: Ember.inject.controller('search'),
-
-    flashError: null,
-    nextFlashError: null,
     search: Ember.computed.oneWay('searchController.q'),
 
     init() {
@@ -54,11 +51,6 @@ export default Ember.Controller.extend({
         Ember.$(document).off('keydown');
     },
 
-    stepFlash() {
-        this.set('flashError', this.get('nextFlashError'));
-        this.set('nextFlashError', null);
-    },
-
     actions: {
         search() {
             this.transitionToRoute('search', {

app/controllers/me/index.js

@@ -2,6 +2,8 @@ import Ember from 'ember';
 import ajax from 'ic-ajax';
 
 export default Ember.Controller.extend({
+    flashMessages: Ember.inject.service(),
+
     isResetting: false,
 
     actions: {
@@ -21,7 +23,7 @@ export default Ember.Controller.extend({
                 } else {
                     msg = 'An unknown error occurred';
                 }
-                this.controllerFor('application').set('nextFlashError', msg);
+                this.get('flashMessages').queue(msg);
                 // TODO: this should be an action, the route state machine
                 // should recieve signals not external transitions
                 this.transitionToRoute('index');

app/mixins/authenticated-route.js

@@ -1,6 +1,8 @@
 import Ember from 'ember';
 
 export default Ember.Mixin.create({
+    flashMessages: Ember.inject.service(),
+
     beforeModel(transition) {
         let user = this.session.get('currentUser');
         if (user !== null) {
@@ -19,8 +21,7 @@ export default Ember.Mixin.create({
             });
         } else {
             this.session.set('savedTransition', transition);
-            this.controllerFor('application')
-                .set('nextFlashError', 'Please log in to proceed');
+            this.get('flashMessages').queue('Please log in to proceed');
             return this.transitionTo('index');
         }
     },

app/routes/application.js

@@ -2,6 +2,8 @@ import Ember from 'ember';
 import ajax from 'ic-ajax';
 
 export default Ember.Route.extend({
+    flashMessages: Ember.inject.service(),
+
     beforeModel() {
         if (this.session.get('isLoggedIn') &&
             this.session.get('currentUser') === null) {
@@ -20,7 +22,7 @@ export default Ember.Route.extend({
 
     actions: {
         didTransition() {
-            this.controllerFor('application').stepFlash();
+            this.get('flashMessages').step();
         },
     },
 });

app/routes/category.js

@@ -1,10 +1,12 @@
 import Ember from 'ember';
 
 export default Ember.Route.extend({
+    flashMessages: Ember.inject.service(),
+
     model(params) {
         return this.store.find('category', params.category_id).catch(e => {
             if (e.errors.any(e => e.detail === 'Not Found')) {
-                this.controllerFor('application').set('flashError', `Category '${params.category_id}' does not exist`);
+                this.get('flashMessages').show(`Category '${params.category_id}' does not exist`);
             }
         });
     }

app/routes/crate.js

@@ -1,10 +1,13 @@
 import Ember from 'ember';
 
 export default Ember.Route.extend({
+    flashMessages: Ember.inject.service(),
+
     model(params) {
         return this.store.find('crate', params.crate_id).catch(e => {
             if (e.errors.any(e => e.detail === 'Not Found')) {
-                return this.controllerFor('application').set('flashError', `Crate '${params.crate_id}' does not exist`);
+                this.get('flashMessages').show(`Crate '${params.crate_id}' does not exist`);
+                return;
             }
         });
     },

app/routes/crate/docs.js

@@ -1,6 +1,8 @@
 import Ember from 'ember';
 
 export default Ember.Route.extend({
+    flashMessages: Ember.inject.service(),
+
     redirect() {
         let crate = this.modelFor('crate');
 
@@ -11,7 +13,7 @@ export default Ember.Route.extend({
             // Redirect to the crate's main page and show a flash error if
             // no documentation is found
             let message = 'Crate does not supply a documentation URL';
-            this.controllerFor('application').set('nextFlashError', message);
+            this.get('flashMessages').queue(message);
             this.replaceWith('crate', crate);
         }
     },

app/routes/crate/repo.js

@@ -1,6 +1,8 @@
 import Ember from 'ember';
 
 export default Ember.Route.extend({
+    flashMessages: Ember.inject.service(),
+
     redirect() {
         let crate = this.modelFor('crate');
 
@@ -11,7 +13,7 @@ export default Ember.Route.extend({
             // Redirect to the crate's main page and show a flash error if
             // no repository is found
             let message = 'Crate does not supply a repository URL';
-            this.controllerFor('application').set('nextFlashError', message);
+            this.get('flashMessages').queue(message);
             this.replaceWith('crate', crate);
         }
     },

app/routes/crate/version.js

@@ -2,6 +2,8 @@ import Ember from 'ember';
 import ajax from 'ic-ajax';
 
 export default Ember.Route.extend({
+    flashMessages: Ember.inject.service(),
+
     refreshAfterLogin: Ember.observer('session.isLoggedIn', function() {
         this.refresh();
     }),
@@ -89,7 +91,7 @@ export default Ember.Route.extend({
             .then(versions => {
                 const version = versions.find(version => version.get('num') === params.version_num);
                 if (params.version_num && !version) {
-                    this.controllerFor('application').set('nextFlashError',
+                    this.get('flashMessages').queue(
                         `Version '${params.version_num}' of crate '${crate.get('name')}' does not exist`);
                 }