subs: Add subscriber counts to the /#subscriptions page.

This borrows some work from krtkmj in #525.

Fixes #483.

frontend_tests/node_tests/stream_data.js

@@ -106,18 +106,30 @@ var stream_data = require('js/stream_data.js');
     // add
     stream_data.add_subscriber('Rome', email);
     assert(stream_data.user_is_subscribed('Rome', email));
+    sub = stream_data.get_sub('Rome');
+    stream_data.update_subscribers_count(sub);
+    assert.equal(sub.subscriber_count, 1);
 
     // verify that adding an already-added subscriber is a noop
     stream_data.add_subscriber('Rome', email);
     assert(stream_data.user_is_subscribed('Rome', email));
+    sub = stream_data.get_sub('Rome');
+    stream_data.update_subscribers_count(sub);
+    assert.equal(sub.subscriber_count, 1);
 
     // remove
     stream_data.remove_subscriber('Rome', email);
     assert(!stream_data.user_is_subscribed('Rome', email));
+    sub = stream_data.get_sub('Rome');
+    stream_data.update_subscribers_count(sub);
+    assert.equal(sub.subscriber_count, 0);
 
     // verify that removing an already-removed subscriber is a noop
     stream_data.remove_subscriber('Rome', email);
     assert(!stream_data.user_is_subscribed('Rome', email));
+    sub = stream_data.get_sub('Rome');
+    stream_data.update_subscribers_count(sub);
+    assert.equal(sub.subscriber_count, 0);
 
     // Verify defensive code in set_subscribers, where the second parameter
     // can be undefined.

static/js/stream_data.js

@@ -18,6 +18,10 @@ exports.clear_subscriptions();
 
 
 exports.add_sub = function (stream_name, sub) {
+    if (!_.has(sub, 'subscribers')) {
+        sub.subscribers = Dict.from_array([], {fold_case: true});
+    }
+
     stream_info.set(stream_name, sub);
     subs_by_stream_id.set(sub.stream_id, sub);
 };
@@ -46,6 +50,11 @@ exports.get_colors = function () {
     return _.pluck(exports.subscribed_subs(), 'color');
 };
 
+exports.update_subscribers_count = function (sub) {
+    var count = sub.subscribers.num_items();
+    sub.subscriber_count = count;
+};
+
 exports.all_subscribed_streams_are_in_home_view = function () {
     return _.every(exports.subscribed_subs(), function (sub) {
         return sub.in_home_view; }
@@ -250,10 +259,11 @@ exports.get_streams_for_settings_page = function (public_streams) {
     unsubscribed_rows.sort(by_name);
     var all_subs = subscribed_rows.concat(unsubscribed_rows);
 
-    // Add in admin options.
+    // Add in admin options and stream counts.
     var sub_rows = [];
     _.each(all_subs, function (sub) {
         sub = exports.add_admin_options(sub);
+        exports.update_subscribers_count(sub);
         sub_rows.push(sub);
     });
 

static/js/subs.js

@@ -223,6 +223,12 @@ function settings_for_sub(sub) {
     return $("#subscription_settings_" + id);
 }
 
+exports.rerender_subscribers_count = function (sub) {
+    var id = parseInt(sub.stream_id, 10);
+    stream_data.update_subscribers_count(sub);
+    $("#subscription_" + id + " .subscriber_count").text(sub.subscriber_count);
+};
+
 exports.show_settings_for = function (stream_name) {
     settings_for_sub(stream_data.get_sub(stream_name)).collapse('show');
 };
@@ -248,6 +254,7 @@ function add_email_hint(row, email_address_hint_content) {
 
 function add_sub_to_table(sub) {
     sub = stream_data.add_admin_options(sub);
+    stream_data.update_subscribers_count(sub);
     var html = templates.render('subscription', sub);
     $('#create_or_filter_stream_row').after(html);
     settings_for_sub(sub).collapse('show');
@@ -285,6 +292,8 @@ exports.mark_subscribed = function (stream_name, attrs) {
         var settings = settings_for_sub(sub);
         var button = button_for_sub(sub);
         if (button.length !== 0) {
+            exports.rerender_subscribers_count(sub);
+
             button.text(i18n.t("Subscribed")).addClass("subscribed-button").addClass("btn-success");
             button.parent().children(".preview-stream").text(i18n.t("Narrow"));
             // Add the user to the member list if they're currently
@@ -342,6 +351,8 @@ exports.mark_sub_unsubscribed = function (sub) {
             settings.collapse('hide');
         }
 
+        exports.rerender_subscribers_count(sub);
+
         // Hide the swatch and subscription settings
         var sub_row = settings.closest('.subscription_row');
         sub_row.find(".color_swatch").removeClass('in');
@@ -903,6 +914,8 @@ $(function () {
                     exports.mark_subscribed(stream);
                 } else {
                     add_to_member_list(list, people.get_by_email(principal).full_name, principal);
+                    var sub = stream_data.get_sub(stream);
+                    exports.rerender_subscribers_count(sub);
                 }
             } else {
                 error_elem.addClass("hide");
@@ -940,6 +953,9 @@ $(function () {
                     // If you're unsubscribing yourself, mark whole
                     // stream entry as you being unsubscribed.
                     exports.mark_unsubscribed(stream_name);
+                } else {
+                    var sub = stream_data.get_sub(stream_name);
+                    exports.rerender_subscribers_count(sub);
                 }
             } else {
                 error_elem.addClass("hide");

static/templates/subscription.handlebars

@@ -8,6 +8,7 @@
         </span>
         <div class="subscription-info">
           <span class="subscription_name subscription-name-row">{{name}}</span>
+          <span class="subscriber_icon">(<span class="subscriber_count subscriber-count-row">{{subscriber_count}}</span> <i class="icon-vector-user"></i>)</span>
           <span class="subscription_description subscription-description-row light">{{description}}</span>
         </div>
       </div>