From 2aeabf24a666f3b9c86985260b3a6c4578c7f044 Mon Sep 17 00:00:00 2001
From: Joshua Pan <joshuapan8@gmail.com>
Date: Thu, 16 Aug 2018 18:46:32 -0700
Subject: [PATCH] frontend: Create data structure for starred messages.

---
 .eslintrc.json                             |  1 +
 frontend_tests/node_tests/dispatch.js      |  4 ++
 frontend_tests/node_tests/message_flags.js |  4 ++
 static/js/bundles/app.js                   |  1 +
 static/js/message_flags.js                 |  2 +
 static/js/server_events_dispatch.js        |  5 +++
 static/js/starred_messages.js              | 48 ++++++++++++++++++++++
 static/js/ui_init.js                       |  1 +
 templates/zerver/app/left_sidebar.html     |  3 ++
 9 files changed, 69 insertions(+)
 create mode 100644 static/js/starred_messages.js

diff --git a/.eslintrc.json b/.eslintrc.json
index 4aaf93f316..03bacc0839 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -153,6 +153,7 @@
         "settings_ui": false,
         "settings_user_groups": false,
         "settings_users": false,
+        "starred_messages": false,
         "stream_color": false,
         "stream_create": false,
         "stream_data": false,
diff --git a/frontend_tests/node_tests/dispatch.js b/frontend_tests/node_tests/dispatch.js
index 9bacbc9f98..e3a48cf60e 100644
--- a/frontend_tests/node_tests/dispatch.js
+++ b/frontend_tests/node_tests/dispatch.js
@@ -80,6 +80,10 @@ set_global('blueslip', {
     },
 });
 
+set_global('starred_messages', {
+    add: noop,
+});
+
 zrequire('server_events_dispatch');
 var sed = server_events_dispatch;
 
diff --git a/frontend_tests/node_tests/message_flags.js b/frontend_tests/node_tests/message_flags.js
index d9ee0f7fe6..7eb87df405 100644
--- a/frontend_tests/node_tests/message_flags.js
+++ b/frontend_tests/node_tests/message_flags.js
@@ -4,6 +4,10 @@ zrequire('message_flags');
 
 set_global('ui', {});
 set_global('channel', {});
+set_global('starred_messages', {
+    add: () => {},
+    remove: () => {},
+});
 
 run_test('starred', () => {
     const message = {
diff --git a/static/js/bundles/app.js b/static/js/bundles/app.js
index 4a58949716..f87269688b 100644
--- a/static/js/bundles/app.js
+++ b/static/js/bundles/app.js
@@ -136,6 +136,7 @@ import "js/hash_util.js";
 import "js/hashchange.js";
 import "js/invite.js";
 import "js/message_flags.js";
+import "js/starred_messages.js";
 import "js/alert_words.js";
 import "js/alert_words_ui.js";
 import "js/attachments_ui.js";
diff --git a/static/js/message_flags.js b/static/js/message_flags.js
index 85820f3a94..7c0eccf49e 100644
--- a/static/js/message_flags.js
+++ b/static/js/message_flags.js
@@ -101,8 +101,10 @@ exports.toggle_starred_and_update_server = function (message) {
 
     if (message.starred) {
         send_flag_update(message, 'starred', 'add');
+        starred_messages.add([message.id]);
     } else {
         send_flag_update(message, 'starred', 'remove');
+        starred_messages.remove([message.id]);
     }
 };
 
diff --git a/static/js/server_events_dispatch.js b/static/js/server_events_dispatch.js
index d74d3a1083..a55f745f95 100644
--- a/static/js/server_events_dispatch.js
+++ b/static/js/server_events_dispatch.js
@@ -406,6 +406,11 @@ exports.dispatch_normal_event = function dispatch_normal_event(event) {
             _.each(event.messages, function (message_id) {
                 message_flags.update_starred_flag(message_id, new_value);
             });
+            if (event.operation === "add") {
+                starred_messages.add(event.messages);
+            } else {
+                starred_messages.remove(event.messages);
+            }
             break;
         case 'read':
             unread_ops.process_read_messages_event(event.messages);
diff --git a/static/js/starred_messages.js b/static/js/starred_messages.js
new file mode 100644
index 0000000000..1679b6aec6
--- /dev/null
+++ b/static/js/starred_messages.js
@@ -0,0 +1,48 @@
+var starred_messages = (function () {
+
+var exports = {};
+
+exports.ids = new Dict();
+
+exports.initialize = function () {
+    exports.ids = new Dict();
+    _.each(page_params.starred_messages, function (id) {
+        exports.ids.set(id, true);
+    });
+    exports.rerender_ui();
+};
+
+exports.add = function (ids) {
+    _.each(ids, function (id) {
+        exports.ids.set(id, true);
+    });
+    exports.rerender_ui();
+};
+
+exports.remove = function (ids) {
+    _.each(ids, function (id) {
+        if (exports.ids.has(id)) {
+            exports.ids.del(id);
+        }
+    });
+    exports.rerender_ui();
+};
+
+exports.count = function () {
+    return exports.ids.num_items();
+};
+
+exports.rerender_ui = function () {
+    var starred_li = top_left_corner.get_global_filter_li('starred');
+    top_left_corner.update_count_in_dom(starred_li, exports.count());
+};
+
+return exports;
+
+}());
+
+if (typeof module !== 'undefined') {
+    module.exports = starred_messages;
+}
+
+window.starred_messages = starred_messages;
diff --git a/static/js/ui_init.js b/static/js/ui_init.js
index 46facc96c4..32a5cfc350 100644
--- a/static/js/ui_init.js
+++ b/static/js/ui_init.js
@@ -324,6 +324,7 @@ $(function () {
     ui.initialize();
     panels.initialize();
     typing.initialize();
+    starred_messages.initialize();
 });
 
 
diff --git a/templates/zerver/app/left_sidebar.html b/templates/zerver/app/left_sidebar.html
index 9e9641b2b9..1a9da5d438 100644
--- a/templates/zerver/app/left_sidebar.html
+++ b/templates/zerver/app/left_sidebar.html
@@ -31,6 +31,9 @@
                         <i class="fa fa-star" aria-hidden="true"></i>
                     </span>
                     <span class="hover-underline">{{ _('Starred messages') }}</span>
+                    <span class="count">
+                        <span class="value"></span>
+                    </span>
                 </a>
             </li>
             <li data-name="mentioned" class="global-filter">