Allow toggling reactions

Author: zcbenz

lib/model/message-list.js

@@ -213,6 +213,10 @@ class MessageList {
     throw new Error('Should be implemented by subclasses')
   }
 
+  async setMessageReaction(id, timestamp, name, reacted) {
+    throw new Error('Should be implemented by subclasses')
+  }
+
   updateMessageStar(id, timestamp, hasStar) {
     const message = this.findMessage(id, timestamp)
     if (message && message.hasStar !== hasStar) {
@@ -229,10 +233,13 @@ class MessageList {
     if (!message)
       return
     const existing = message.reactions.find((r) => r.name === reaction.name)
-    if (existing)
+    if (existing) {
       ++existing.count;
-    else
+      if (reaction.reacted)
+        existing.reacted = true
+    } else {
       message.reactions.push(reaction)
+    }
     this.onModifyMessage.dispatch(id, message)
     return message
   }
@@ -246,10 +253,12 @@ class MessageList {
     const i = message.reactions.findIndex((r) => r.name === reaction.name)
     if (i === -1)
       return
-    if (--message.reactions[i].count === 0) {
+    const existing = message.reactions[i]
+    if (reaction.reacted)
+      existing.reacted = false
+    if (--existing.count === 0)
       message.reactions.splice(i, 1)
-      this.onModifyMessage.dispatch(id, message)
-    }
+    this.onModifyMessage.dispatch(id, message)
     return message
   }
 

lib/service/slack/slack-account.js

@@ -74,8 +74,8 @@ class SlackAccount extends Account {
     this.rtm.on('reconnecting', this.handleConnecting.bind(this))
 
     this.rtm.on('message', this.dispatchMessage.bind(this))
-    this.rtm.on('reaction_added', this.reactionAdded.bind(this))
-    this.rtm.on('reaction_removed', this.reactionRemoved.bind(this))
+    this.rtm.on('reaction_added', this.setReaction.bind(this, true))
+    this.rtm.on('reaction_removed', this.setReaction.bind(this, false))
     this.rtm.on('star_added', this.setStar.bind(this, true))
     this.rtm.on('star_removed', this.setStar.bind(this, false))
 
@@ -276,20 +276,15 @@ class SlackAccount extends Account {
     }
   }
 
-  reactionAdded(event) {
+  setReaction(add, event) {
     const channel = this.findChannelById(event.item.channel)
     if (!channel)
       return
-    const reaction = new SlackReaction(this, event.reaction, 1)
-    channel.reactionAdded(event.item.ts, event.item.ts, reaction)
-  }
-
-  reactionRemoved(event) {
-    const channel = this.findChannelById(event.item.channel)
-    if (!channel)
-      return
-    const reaction = new SlackReaction(this, event.reaction, -1)
-    channel.reactionRemoved(event.item.ts, event.item.ts, reaction)
+    const reaction = new SlackReaction(this, event.reaction, 1, [event.user])
+    if (add)
+      channel.reactionAdded(event.item.ts, event.item.ts, reaction)
+    else
+      channel.reactionRemoved(event.item.ts, event.item.ts, reaction)
   }
 
   setStar(hasStar, event) {

lib/service/slack/slack-channel.js

@@ -1,5 +1,6 @@
 const Channel = require('../../model/channel')
 const SlackMessage = require('./slack-message')
+const SlackReaction = require('./slack-reaction')
 const SlackThread = require('./slack-thread')
 
 class SlackChannel extends Channel {
@@ -27,20 +28,31 @@ class SlackChannel extends Channel {
     return new SlackThread(this, id)
   }
 
-  async setMessageStar(id, timestamp, hasStar) {
+  async setMessageStar(id, timestamp, hasStar, channelId = this.id) {
     const message = this.findMessage(id, timestamp)
     if (message) {
-      // Slack does not send event after adding star.
+      // Slack quirk: setting stars does not emit server event.
       this.updateMessageStar(id, timestamp, hasStar)
-      // Send message after we update the message.
-      const options = {channel: this.id, timestamp: id}
+      // Send to server after updated locally.
+      const options = {channel: channelId, timestamp: id}
       if (hasStar)
         await this.account.rtm.webClient.stars.add(options)
       else
         await this.account.rtm.webClient.stars.remove(options)
     }
   }
 
+  async setMessageReaction(id, timestamp, name, reacted, channelId = this.id) {
+    const message = this.findMessage(id, timestamp)
+    if (message) {
+      const options = {channel: channelId, timestamp: id, name}
+      if (reacted)
+        await this.account.rtm.webClient.reactions.add(options)
+      else
+        await this.account.rtm.webClient.reactions.remove(options)
+    }
+  }
+
   async readMessagesImpl() {
     // Read messages.
     const options = {channel: this.id}

lib/service/slack/slack-direct-messsage.js

@@ -32,6 +32,10 @@ class SlackDirectMessage extends DirectMessage {
     return SlackChannel.prototype.setMessageStar.apply(this, arguments)
   }
 
+  setMessageReaction() {
+    return SlackChannel.prototype.setMessageReaction.apply(this, arguments)
+  }
+
   readMessagesImpl() {
     return SlackChannel.prototype.readMessagesImpl.apply(this, arguments)
   }

lib/service/slack/slack-thread.js

@@ -6,19 +6,12 @@ class SlackThread extends Thread {
     super(channel, id)
   }
 
-  // Like the implementaion in SlackChannel, but use parent channel's id.
   async setMessageStar(id, timestamp, hasStar) {
-    const message = this.findMessage(id, timestamp)
-    if (message) {
-      // Slack does not send event after adding star.
-      this.updateMessageStar(id, timestamp, hasStar)
-      // Send message after we update the message.
-      const options = {channel: this.channel.id, timestamp: id}
-      if (hasStar)
-        await this.account.rtm.webClient.stars.add(options)
-      else
-        await this.account.rtm.webClient.stars.remove(options)
-    }
+    super.setMessageStar(id, timestamp, hasStar, this.channel.id)
+  }
+
+  async setMessageReaction(id, timestamp, name, reacted) {
+    super.setMessageReaction(id, timestamp, name, reacted, this.channel.id)
   }
 
   async readMessagesImpl() {

lib/view/chat-box.js

@@ -36,6 +36,10 @@ handlebars.registerHelper('normalizeId', function(id) {
   return 'msg' + id.replace('.', '_')
 })
 
+handlebars.registerHelper('revert', function(boolean) {
+  return boolean ? 'false' : 'true'
+})
+
 const fontStyle = fs.readFileSync(path.join(__dirname, 'chat', 'font.css')).toString()
 handlebars.registerHelper('fontStyle', function() {
   return fontStyle
@@ -79,6 +83,7 @@ class ChatBox {
     this.browser.addBinding('openChannel', this.openChannel.bind(this))
     this.browser.addBinding('openThread', this.openThread.bind(this))
     this.browser.addBinding('setMessageStar', this.setMessageStar.bind(this))
+    this.browser.addBinding('setMessageReaction', this.setMessageReaction.bind(this))
     this.browser.addBinding('notifyDisplaying', this.notifyDisplaying.bind(this))
     this.browser.addBinding('notifyNotDisplaying', this.notifyNotDisplaying.bind(this))
     this.view.addChildView(this.browser)
@@ -254,6 +259,10 @@ class ChatBox {
     this.messageList.setMessageStar(id, timestamp, hasStar)
   }
 
+  setMessageReaction(id, timestamp, name, reacted) {
+    this.messageList.setMessageReaction(id, timestamp, name, reacted)
+  }
+
   notifyDisplaying() {
     if (this.messagesLoaded && !this.isDisplaying) {
       this.isDisplaying = true

lib/view/chat/message.html

@@ -26,7 +26,7 @@
     <div class="action-menu">
       {{~#canStartThread messageList message~}}
       <a href="#" onclick="wey.openThread('{{message.id}}'); return false" title="Start thread"><i class="icon-comment"></i></a>
-      {{~/canStartThread~}}<a class="toggle-star" href="#" onclick="wey.setMessageStar('{{message.id}}', {{message.timestamp}}, {{#if message.hasStar}}false{{else}}true{{/if}}); return false" title="Star message"><i class="{{#if message.hasStar}}icon-star{{else}}icon-star-empty{{/if}}"></i></a>
+      {{~/canStartThread~}}<a class="toggle-star" href="#" onclick="wey.setMessageStar('{{message.id}}', {{message.timestamp}}, {{revert message.hasStar}}); return false" title="Star message"><i class="{{#if message.hasStar}}icon-star{{else}}icon-star-empty{{/if}}"></i></a>
     </div>
     {{#unless message.isFolded}}
     <div class="sender">
@@ -75,7 +75,7 @@
     {{#if message.reactions}}
     <div class="reactions">
     {{#each message.reactions}}
-    <button{{#if reacted}} class="reacted"{{/if}}>{{{content}}}<span class="count">{{count}}</span></button>
+    <button onclick="wey.setMessageReaction('{{../message.id}}', {{../message.timestamp}}, '{{name}}', {{revert reacted}}); return false" {{#if reacted}}class="reacted"{{/if}}>{{{content}}}<span class="count">{{count}}</span></button>
     {{/each}}
     </div>
     {{/if}}