Merge pull request #1648 from code-corps/add-message-sounds

Adds message sounds and handle errors of sending

Author: joshsmith

app/components/conversations/conversation-composer.js

@@ -1,10 +1,24 @@
 import Component from '@ember/component';
+import { get, set } from '@ember/object';
 import { empty } from '@ember/object/computed';
 
 export default Component.extend({
   classNames: ['conversation-composer'],
 
   body: null,
 
-  submitDisabled: empty('body')
+  submitDisabled: empty('body'),
+
+  send(body) {
+    this._unsetBody();
+    return get(this, 'onSend')(body).catch(() => this._resetBody(body));
+  },
+
+  _resetBody(body) {
+    set(this, 'body', body);
+  },
+
+  _unsetBody() {
+    set(this, 'body', null);
+  }
 });

app/components/signup-form.js

@@ -1,9 +1,14 @@
+import Ember from 'ember';
 import Component from '@ember/component';
 import { gte, and, alias } from '@ember/object/computed';
 import { later } from '@ember/runloop';
 import { set, get, computed } from '@ember/object';
 import { task } from 'ember-concurrency';
 
+const { testing } = Ember;
+
+const SHAKE_DELAY = testing ? 0 : 1000;
+
 export default Component.extend({
   classNames: ['form--centered', 'signup-form'],
   emailValid: false,
@@ -45,7 +50,7 @@ export default Component.extend({
       set(this, 'hasError', true);
       later(this, function() {
         set(this, 'hasError', false);
-      }, 1000);
+      }, SHAKE_DELAY);
     }
   },
 

app/controllers/conversations/conversation.js

@@ -2,6 +2,7 @@ import Controller from '@ember/controller';
 import { get } from '@ember/object';
 import { alias } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
+import { reject } from 'rsvp';
 
 export default Controller.extend({
   currentUser: service(),
@@ -15,6 +16,13 @@ export default Controller.extend({
     let user = get(this, 'user');
 
     let params = { author: user, body, conversation };
-    return store.createRecord('conversation-part', params).save();
+    let part = store.createRecord('conversation-part', params);
+
+    let onFailedSave = (reason) => {
+      part.deleteRecord();
+      return reject(reason);
+    };
+
+    return part.save().catch(onFailedSave);
   }
 });

app/controllers/project/conversations/conversation.js

@@ -2,6 +2,7 @@ import Controller from '@ember/controller';
 import { get } from '@ember/object';
 import { alias } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
+import { reject } from 'rsvp';
 
 export default Controller.extend({
   currentUser: service(),
@@ -15,6 +16,13 @@ export default Controller.extend({
     let user = get(this, 'user');
 
     let params = { author: user, body, conversation };
-    return store.createRecord('conversation-part', params).save();
+    let part = store.createRecord('conversation-part', params);
+
+    let onFailedSave = (reason) => {
+      part.deleteRecord();
+      return reject(reason);
+    };
+
+    return part.save().catch(onFailedSave);
   }
 });

app/services/conversation-channel.js

@@ -1,29 +1,40 @@
 import { get } from '@ember/object';
+import { alias } from '@ember/object/computed';
 import Service, { inject as service } from '@ember/service';
 
 export default Service.extend({
+  currentUser: service(),
   socket: service(),
+  sounds: service(),
   store: service(),
 
+  user: alias('currentUser.user'),
+
   async join(conversation) {
     let socket = get(this, 'socket');
 
-    await socket.connect();
-
     let id = get(conversation, 'id');
     let channel = socket.joinChannel(`conversation:${id}`);
 
-    channel.on('new:conversation-part', () => this._onNewMessage(conversation));
+    channel.on('new:conversation-part', (conversationPart) =>
+      this._onNewPart(conversation, conversationPart));
   },
 
   leave(conversation) {
     let id = get(conversation, 'id');
     return get(this, 'socket').leaveChannel(`conversation:${id}`);
   },
 
-  _onNewMessage(conversation) {
+  _onNewPart(conversation, conversationPart) {
     let store = get(this, 'store');
     let id = get(conversation, 'id');
-    return store.findRecord('conversation', id);
+
+    return store.findRecord('conversation', id).then((result) => {
+      if (conversationPart.author_id != get(this, 'user.id')) {
+        get(this, 'sounds').popup();
+      }
+
+      return result;
+    });
   }
 });

app/services/sounds.js

@@ -0,0 +1,21 @@
+import Ember from 'ember';
+import { get } from '@ember/object';
+import Service from '@ember/service';
+import { task, timeout } from 'ember-concurrency';
+
+const { testing } = Ember;
+
+const POPUP_URL = 'https://d3pgew4wbk2vb1.cloudfront.net/sounds/pop-up.ogg';
+const TIME_BETWEEN_SOUNDS = testing ? 0 : 10000;
+
+export default Service.extend({
+  popup() {
+    return get(this, '_play').perform(POPUP_URL);
+  },
+
+  _play: task(function* (url) {
+    let audio = get(this, 'audio') || new Audio(url);
+    audio.play();
+    yield timeout(TIME_BETWEEN_SOUNDS);
+  }).drop()
+});

app/templates/components/conversations/conversation-composer.hbs

@@ -4,13 +4,13 @@
     autoresize=true
     classNameBindings="textareaFocused:focused"
     max-height=350
-    modifiedSubmit=(action (pipe (action send body) (action (mut body) null)))
+    modifiedSubmit=(action send body)
     name="markdown"
     onBlur="blurTextarea"
     placeholder=placeholder
     tabindex=tabindex
     value=body}}
 </div>
 <div class="conversation-composer__footer">
-  <button {{action (pipe (action send body) (action (mut body) null))}} disabled={{submitDisabled}} class="button default {{if submitDisabled "disabled"}}" data-test-submit-button>{{fa-icon "paper-plane"}} Send</button>
+  <button {{action send body}} disabled={{submitDisabled}} class="button default {{if submitDisabled "disabled"}}" data-test-submit-button>{{fa-icon "paper-plane"}} Send</button>
 </div>

app/templates/components/conversations/conversation-thread.hbs

@@ -21,7 +21,7 @@
   </div>
   <div class="conversation-thread__composer">
     {{conversations/conversation-composer
-      send=(pipe (action send) (action scrollBottom))
+      onSend=(pipe (action send) (action scrollBottom))
     }}
   </div>
 </div>

tests/integration/components/conversations/conversation-composer-test.js

@@ -4,20 +4,23 @@ import { run } from '@ember/runloop';
 import hbs from 'htmlbars-inline-precompile';
 import PageObject from 'ember-cli-page-object';
 import component from 'code-corps-ember/tests/pages/components/conversations/conversation-composer';
+import { reject, resolve } from 'rsvp';
 
 let page = PageObject.create(component);
 
 function renderPage() {
   page.render(hbs`
-    {{conversations/conversation-composer body=body send=onSend}}
+    {{conversations/conversation-composer body=body onSend=onSend}}
   `);
 }
 
 moduleForComponent('conversations/conversation-composer', 'Integration | Component | conversations/conversation composer', {
   integration: true,
   beforeEach() {
     page.setContext(this);
-    set(this, 'onSend', () => {});
+    set(this, 'onSend', () => {
+      return resolve();
+    });
   },
   afterEach() {
     page.removeContext();
@@ -43,6 +46,7 @@ test('sends out action and blanks out body when clicking submit', function(asser
   set(this, 'body', 'foo');
   set(this, 'onSend', (body) => {
     assert.equal(body, 'foo', 'Correct value was sent with action.');
+    return resolve();
   });
 
   renderPage();
@@ -51,12 +55,28 @@ test('sends out action and blanks out body when clicking submit', function(asser
   assert.equal(page.submittableTextarea.value, '', 'Body was blanked out.');
 });
 
+test('resets the body when promise rejects on clicking submit', async function(assert) {
+  assert.expect(3);
+
+  set(this, 'body', 'foo');
+  set(this, 'onSend', (body) => {
+    assert.equal(body, 'foo', 'Correct value was sent with action.');
+    return reject({ body });
+  });
+
+  renderPage();
+  assert.equal(page.submittableTextarea.value, 'foo', 'Body is rendered correctly.');
+  await page.submitButton.click();
+  assert.equal(page.submittableTextarea.value, 'foo', 'Body was reset.');
+});
+
 test('sends out action and blanks out body when hitting enter key', function(assert) {
   assert.expect(3);
 
   set(this, 'body', 'foo');
   set(this, 'onSend', (body) => {
     assert.equal(body, 'foo', 'Correct value was sent with action.');
+    return resolve();
   });
 
   renderPage();

tests/integration/components/conversations/conversation-thread-test.js

@@ -3,14 +3,15 @@ import { set } from '@ember/object';
 import hbs from 'htmlbars-inline-precompile';
 import PageObject from 'ember-cli-page-object';
 import component from 'code-corps-ember/tests/pages/components/conversations/conversation-thread';
+import { resolve } from 'rsvp';
 
 let page = PageObject.create(component);
 
 function renderPage() {
   page.render(hbs`
     {{conversations/conversation-thread
       conversation=conversation
-      send=onSend
+      send=send
     }}
   `);
 }
@@ -19,7 +20,9 @@ moduleForComponent('conversations/conversation-thread', 'Integration | Component
   integration: true,
   beforeEach() {
     page.setContext(this);
-    set(this, 'onSend', () => {});
+    set(this, 'send', () => {
+      return resolve();
+    });
   },
   afterEach() {
     page.removeContext();
@@ -91,8 +94,9 @@ test('it delays rendering conversation parts not yet loaded', function(assert) {
 test('it delegates send action from composer', function(assert) {
   assert.expect(1);
 
-  set(this, 'onSend', (body) => {
+  set(this, 'send', (body) => {
     assert.equal(body, 'foo', 'Correct value was send with action.');
+    return resolve();
   });
 
   renderPage();