renaming service to simply 'notifications'

addon/components/notification-container.js

@@ -1,11 +1,14 @@
 import Component from '@ember/component';
 import { computed } from '@ember/object';
 import { htmlSafe } from '@ember/string';
+import { inject as service } from '@ember/service';
+
 import layout from '../templates/components/notification-container';
 
 export default Component.extend({
-  position: 'top',
   layout,
+  position: 'top',
+  notifications: service(),
 
   classNameBindings: ['computedPosition', ':ember-cli-notifications-notification__container'],
   attributeBindings: ['computedStyle:style', 'position:data-test-notification-container'],

addon/components/notification-message.js

@@ -1,12 +1,17 @@
-import { htmlSafe } from '@ember/string';
 import Component from '@ember/component';
-import { computed } from '@ember/object';
 import Ember from 'ember';
+
+import { htmlSafe } from '@ember/string';
+import { computed } from '@ember/object';
+import { inject as service } from '@ember/service';
+
 import layout from '../templates/components/notification-message';
 
 export default Component.extend({
   layout,
 
+  notifications: service(),
+
   classNameBindings: [
     'dismissClass',
     'clickableClass',

addon/services/notification-messages-service.js → addon/services/notifications.js

@@ -1,15 +1,16 @@
+import Service from '@ember/service';
 import { assign, merge } from '@ember/polyfills';
-import ArrayProxy from '@ember/array/proxy';
 import { A } from '@ember/array';
 import { isEmpty } from '@ember/utils';
 import EmberObject, { getWithDefault, set } from '@ember/object';
 import { run } from '@ember/runloop';
 import config from 'ember-get-config';
 
 const notificationAssign = assign || merge;
+
 const globals = config['ember-cli-notifications'] || {}; // Import app config object
 
-const NotificationMessagesService = ArrayProxy.extend({
+export default Service.extend({
   content: A(),
 
   // Method for adding a notification
@@ -29,7 +30,7 @@ const NotificationMessagesService = ArrayProxy.extend({
       cssClasses: options.cssClasses
     });
 
-    this.pushObject(notification);
+    this.content.pushObject(notification);
 
     if (notification.autoClear) {
       notification.set('remaining', notification.get('clearDuration'));
@@ -78,7 +79,7 @@ const NotificationMessagesService = ArrayProxy.extend({
 
     // Delay removal from DOM for dismissal animation
     run.later(this, () => {
-      this.removeObject(notification);
+      this.content.removeObject(notification);
     }, 500);
   },
 
@@ -120,9 +121,3 @@ const NotificationMessagesService = ArrayProxy.extend({
     set(globals, 'clearDuration', clearDuration);
   }
 });
-
-NotificationMessagesService.reopenClass({
-  isServiceFactory: true
-});
-
-export default NotificationMessagesService;

addon/templates/components/notification-container.hbs

@@ -1,3 +1,3 @@
-{{#each notifications as |notification|}}
+{{#each notifications.content as |notification|}}
   {{notification-message notification=notification}}
-{{/each}}
+{{/each}}

app/services/notification-messages-service.js → app/services/notifications.js

@@ -1 +1 @@
-export { default } from 'ember-cli-notifications/services/notification-messages-service';
+export { default } from 'ember-cli-notifications/services/notifications';

tests/dummy/app/controllers/application.js

@@ -15,7 +15,7 @@ export default Controller.extend({
   clearAll: true,
   cssClasses: 'profile-saved-success-notification',
 
-  notifications: service('notification-messages'),
+  notifications: service(),
 
   disableTimeoutInput: not('autoClear'),
 

tests/dummy/app/templates/application.hbs

@@ -30,7 +30,12 @@
     <CodeBlock @language="handlebars">&#123;&#123;notification-container position="top-right" zindex="9999"&#125;&#125;</CodeBlock>
 
     <p>Inject the notifications service where required.</p>
-    <CodeBlock @language="js" @code="notifications: Ember.inject.service('notification-messages')" />
+    <CodeBlock @language="js">import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default Controller.extend({
+  notifications: service(),
+});</CodeBlock>
 
     <p>Or inject it everywhere with an initializer.</p>
 <CodeBlock @language="js">// app/initializers/inject-notifications.js
@@ -49,22 +54,22 @@ export default {
     <p>There are four styles of notification available.</p>
     <p class="h5"><i>Default value is info</i></p>
     <CodeBlock @language="js">// Info
-this.get('notifications').info('You have one unread message');
+this.notifications.info('You have one unread message');
 
 // Error
-this.get('notifications').error('Something went wrong');
+this.notifications.error('Something went wrong');
 
 // Success
-this.get('notifications').success('Saved successfully!');
+this.notifications.success('Saved successfully!');
 
 // Warning
-this.get('notifications').warning('You have unsaved changes');
+this.notifications.warning('You have unsaved changes');
 </CodeBlock>
 
     <h3>htmlContent</h3>
     <p>You can enable basic HTML markup for notification messages.</p>
     <p><b>Warning:</b> This introduces a potential security risk since the notification message will no longer be escaped by Ember.</p>
-<CodeBlock @language="js">this.get('notifications').info('You have &lt;b&gt;one&lt;/b&gt; unread message', {
+<CodeBlock @language="js">this.notifications.info('You have &lt;b&gt;one&lt;/b&gt; unread message', {
   htmlContent: true
 });
 </CodeBlock>
@@ -140,23 +145,23 @@ this.get('notifications').warning('You have unsaved changes');
     <p>Set a notification to automatically clear. This will take precedence over the global default value.</p>
     <p>If true, inherits the default <b>clearDuration</b> value unless specified.</p>
     <p class="h5"><i>Default value is false</i></p>
-<CodeBlock @language="js">this.get('notifications').success('Saved successfully!', {
+<CodeBlock @language="js">this.notifications.success('Saved successfully!', {
   autoClear: true
 });
 </CodeBlock>
 
     <h3>clearDuration</h3>
     <p>Specify a duration (ms) before the notification clears. This will take precedence over the global default value.</p>
     <p class="h5"><i>Default value is 3200</i></p>
-<CodeBlock @language="js">this.get('notifications').success('Saved successfully!', {
+<CodeBlock @language="js">this.notifications.success('Saved successfully!', {
   autoClear: true,
   clearDuration: 1200
 });
 </CodeBlock>
 
     <h3>clearAll</h3>
     <p>You can remove all present notifications before adding a new one.</p>
-<CodeBlock @language="js">this.get('notifications').clearAll().success('Saved successfully!', {
+<CodeBlock @language="js">this.notifications.clearAll().success('Saved successfully!', {
   autoClear: true
 });
 </CodeBlock>
@@ -185,7 +190,7 @@ this.get('notifications').warning('You have unsaved changes');
     <h2>Notification with custom CSS</h2>
     <hr>
     <p>Pass a string of CSS classes to the notification component.</p>
-<CodeBlock @language="js">this.get('notifications').success('Saved successfully!', {
+<CodeBlock @language="js">this.notifications.success('Saved successfully!', {
   autoClear: true,
   cssClasses: 'profile-saved-success-notification'
 });
@@ -195,7 +200,7 @@ this.get('notifications').warning('You have unsaved changes');
     <h2>Notification with callback</h2>
     <hr>
     <p>Add the ability to click the notification for a callback.</p>
-<CodeBlock @language="js">this.get('notifications').error('Something went wrong. Click to try again', {
+<CodeBlock @language="js">this.notifications.error('Something went wrong. Click to try again', {
   onClick: (notification) => {
     this.get('model').save();
   }
@@ -220,9 +225,9 @@ var ENV = {
   <div class="py2">
     <h2>Extend</h2>
     <hr>
-    <p>The <b>notification-messages-service</b> service can be imported into the consuming app and extended.</p>
+    <p>The <b>notifications</b> service can be imported into the consuming app and extended.</p>
     <CodeBlock @language="js">// app/services/notifications.js
-import NotificationsService from 'ember-cli-notifications/services/notification-messages-service';
+import NotificationsService from 'ember-cli-notifications/services/notifications';
 
 export default NotificationsService.extend({
   // Extend the imported service

tests/integration/components/notification-container-test.js

@@ -7,7 +7,7 @@ module('Integration | Component | notification container', function(hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function(assert) {
-    let notificationMessages = this.owner.lookup('service:notification-messages-service');
+    let notificationMessages = this.owner.lookup('service:notifications');
 
     // fix strange setup bug
     notificationMessages.clearAll();

tests/unit/services/notifications-test.js

@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Service | notifications', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let service = this.owner.lookup('service:notifications');
+    assert.ok(service);
+  });
+});