reactions: Implement local echo functionality.

Fixes #4291

frontend_tests/node_tests/dispatch.js

@@ -130,6 +130,9 @@ var event_fixtures = {
         op: 'add',
         message_id: 128,
         emoji_name: 'anguished_pig',
+        user: {
+            id: "1",
+        },
     },
 
     reaction__remove: {
@@ -137,6 +140,9 @@ var event_fixtures = {
         op: 'remove',
         message_id: 256,
         emoji_name: 'angery',
+        user: {
+            id: "1",
+        },
     },
 
     // Please keep this next section un-nested, as we want this to partly

frontend_tests/node_tests/reactions.js

@@ -201,6 +201,11 @@ set_global('current_msg_list', {
     var message_id = 1001; // see above for setup
     var emoji_name = 'smile'; // should be a current reaction
 
+    var orig_remove_reaction = reactions.remove_reaction;
+    var orig_add_reaction = reactions.add_reaction;
+    reactions.remove_reaction = function () {};
+    reactions.add_reaction = function () {};
+
     global.with_stub(function (stub) {
         global.channel.del = stub.f;
         reactions.toggle_emoji_reaction(message_id, emoji_name);
@@ -267,6 +272,8 @@ set_global('current_msg_list', {
     reactions.toggle_emoji_reaction(message_id, emoji_name);
     assert.equal(error_msg, 'Bad emoji name: ' + emoji_name);
     global.blueslip.warn = orig_func;
+    reactions.add_reaction = orig_add_reaction;
+    reactions.remove_reaction = orig_remove_reaction;
 }());
 
 (function test_set_reaction_count() {
@@ -335,10 +342,16 @@ set_global('current_msg_list', {
     };
 
     reactions.add_reaction(alice_event);
-
     assert(template_called);
     assert(insert_called);
 
+    // Running add_reaction again should not result in any changes
+    template_called = false;
+    insert_called = false;
+    reactions.add_reaction(alice_event);
+    assert(!template_called);
+    assert(!insert_called);
+
     // Now, have Bob react to the same emoji (update).
 
     var bob_event = {
@@ -400,6 +413,11 @@ set_global('current_msg_list', {
     reactions.remove_reaction(alice_event);
     assert(removed);
 
+    // Running remove_reaction again should not result in any changes
+    removed = false;
+    reactions.remove_reaction(alice_event);
+    assert(!removed);
+
     current_emojis = reactions.get_emojis_used_by_user_for_message_id(1001);
     assert.deepEqual(current_emojis, ['smile', 'inactive_realm_emoji']);
 

static/js/reactions.js

@@ -47,7 +47,21 @@ function get_message(message_id) {
     return message;
 }
 
-function send_reaction_ajax(message_id, reaction_info) {
+function create_reaction(message_id, reaction_info) {
+    return {
+        message_id: message_id,
+        user: {
+            user_id: page_params.user_id,
+            id: page_params.user_id,
+        },
+        local_id: exports.get_local_reaction_id(reaction_info),
+        reaction_type: reaction_info.reaction_type,
+        emoji_name: reaction_info.emoji_name,
+        emoji_code: reaction_info.emoji_code,
+    };
+}
+
+function update_ui_and_send_reaction_ajax(message_id, reaction_info) {
     var message = get_message(message_id);
     var has_reacted = exports.current_user_has_reacted_to_emoji(
         message,
@@ -55,6 +69,13 @@ function send_reaction_ajax(message_id, reaction_info) {
         reaction_info.reaction_type
     );
     var operation = has_reacted ? 'remove' : 'add';
+    var reaction = create_reaction(message_id, reaction_info);
+
+    if (operation === "add") {
+        exports.add_reaction(reaction);
+    } else {
+        exports.remove_reaction(reaction);
+    }
 
     var args = {
         url: '/json/messages/' + message_id + '/reactions',
@@ -107,7 +128,7 @@ exports.toggle_emoji_reaction = function (message_id, emoji_name) {
         return;
     }
 
-    send_reaction_ajax(message_id, reaction_info);
+    update_ui_and_send_reaction_ajax(message_id, reaction_info);
 
     // The next line isn't always necessary, but it is harmless/quick
     // when no popovers are there.
@@ -117,7 +138,7 @@ exports.toggle_emoji_reaction = function (message_id, emoji_name) {
 exports.process_reaction_click = function (message_id, local_id) {
     var reaction_info = exports.get_reaction_info(local_id);
 
-    send_reaction_ajax(message_id, reaction_info);
+    update_ui_and_send_reaction_ajax(message_id, reaction_info);
 };
 
 function full_name(user_id) {
@@ -176,6 +197,13 @@ exports.add_reaction = function (event) {
         return;
     }
 
+    var reacted = exports.current_user_has_reacted_to_emoji(message,
+                                                            event.emoji_code,
+                                                            event.reaction_type);
+    if (reacted && (event.user.user_id === page_params.user_id)) {
+        return;
+    }
+
     event.user.id = event.user.user_id;
     event.local_id = exports.get_local_reaction_id(event);
 
@@ -280,6 +308,13 @@ exports.remove_reaction = function (event) {
         return;
     }
 
+    var not_reacted = !exports.current_user_has_reacted_to_emoji(message,
+                                                                 emoji_code,
+                                                                 reaction_type);
+    if (not_reacted && (event.user.user_id === page_params.user_id)) {
+        return;
+    }
+
     // Do the data part first:
     // Remove reactions from our message object.
     _.each(message.reactions, function (reaction, index) {