Discriminate between which unread messages to indicate per tab

.eslintrc.json

@@ -14,7 +14,7 @@
     "rules": {
         "lodash/prefer-lodash-method": [2, {
             "ignoreMethods": [
-                "find", "endsWith", "startsWith", "filter",
+                "find", "endsWith", "startsWith", "filter", "reduce",
                 "map", "replace", "toLower", "split", "trim"
             ]
         }],

package.json

@@ -56,7 +56,7 @@
     "jquery-easing": "0.0.1",
     "jquery.browser": ">=0.1.0",
     "jshint": "^2.9.4",
-    "lodash": "^4.17.4",
+    "lodash": "4.17.4",
     "lodash-template-loader": "^2.0.0",
     "moment": "~2.18.1",
     "npm": "^4.1.1",

spec/chatroom.js

@@ -2135,6 +2135,8 @@
                     _converse, 'kitchen', 'conference.shakespeare.lit', 'fires');
                 test_utils.openContactsPanel(_converse);
                 var roomspanel = _converse.chatboxviews.get('controlbox').roomspanel;
+                expect(_.isNull(roomspanel.tab_el.querySelector('.msgs-indicator'))).toBeTruthy();
+
                 var view = _converse.chatboxviews.get(room_jid);
                 view.model.set({'minimized': true});
 
@@ -2161,8 +2163,12 @@
                 view.handleMUCMessage(msg);
                 expect(roomspanel.tab_el.querySelector('.msgs-indicator').textContent).toBe('2');
 
+                var contacts_panel = _converse.chatboxviews.get('controlbox').contactspanel;
+                expect(_.isNull(contacts_panel.tab_el.querySelector('.msgs-indicator'))).toBeTruthy();
+
                 view.model.set({'minimized': false});
                 expect(_.includes(roomspanel.tab_el.firstChild.classList, 'unread-msgs')).toBeFalsy();
+                expect(_.isNull(roomspanel.tab_el.querySelector('.msgs-indicator'))).toBeTruthy();
             }));
         });
     });

spec/controlbox.js

@@ -1134,6 +1134,9 @@
                 test_utils.createContacts(_converse, 'all').openControlBox();
                 test_utils.openContactsPanel(_converse);
 
+                var contacts_panel = _converse.chatboxviews.get('controlbox').contactspanel;
+                expect(_.isNull(contacts_panel.tab_el.querySelector('.msgs-indicator'))).toBeTruthy();
+
                 var sender_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@localhost';
                 test_utils.openChatBoxFor(_converse, sender_jid);
                 var chatview = _converse.chatboxviews.get(sender_jid);
@@ -1147,7 +1150,6 @@
                     }).c('body').t('hello').up()
                     .c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree();
                 _converse.chatboxes.onMessage(msg);
-                var contacts_panel = _converse.chatboxviews.get('controlbox').contactspanel;
                 expect(contacts_panel.tab_el.querySelector('.msgs-indicator').textContent).toBe('1');
 
                 msg = $msg({
@@ -1160,8 +1162,12 @@
                 _converse.chatboxes.onMessage(msg);
                 expect(contacts_panel.tab_el.querySelector('.msgs-indicator').textContent).toBe('2');
 
+                var roomspanel = _converse.chatboxviews.get('controlbox').roomspanel;
+                expect(_.isNull(roomspanel.tab_el.querySelector('.msgs-indicator'))).toBeTruthy();
+
                 chatview.model.set({'minimized': false});
                 expect(_.includes(contacts_panel.tab_el.firstChild.classList, 'unread-msgs')).toBeFalsy();
+                expect(_.isNull(contacts_panel.tab_el.querySelector('.msgs-indicator'))).toBeTruthy();
             }));
 
         });

src/converse-controlbox.js

@@ -21,6 +21,7 @@
             "tpl!login_tab",
             "tpl!search_contact",
             "tpl!status_option",
+            "lodash.fp",
             "converse-chatview",
             "converse-rosterview"
     ], factory);
@@ -38,7 +39,8 @@
             tpl_login_panel,
             tpl_login_tab,
             tpl_search_contact,
-            tpl_status_option
+            tpl_status_option,
+            fp
         ) {
     "use strict";
 
@@ -590,10 +592,16 @@
                 render: function () {
                     var controlbox = _converse.chatboxes.get('controlbox');
                     var is_current = controlbox.get('active-panel') === USERS_PANEL_ID;
+
+                    var isChatBox = function (item) {
+                        return item.get('type') == 'chatbox';
+                    }
+                    var chatrooms = fp.filter(isChatBox, _converse.chatboxes.models);
+
                     this.tab_el.innerHTML = tpl_contacts_tab({
                         'label_contacts': LABEL_CONTACTS,
                         'is_current': is_current,
-                        'num_unread': _.sum(_converse.chatboxes.pluck('num_unread'))
+                        'num_unread': fp.sum(fp.map(fp.curry(utils.getAttribute)('num_unread'), chatrooms))
                     });
 
                     var widgets = tpl_contacts_panel({

src/converse-core.js

@@ -1352,6 +1352,7 @@
         this.ChatBox = Backbone.Model.extend({
 
             defaults: {
+                'type': 'chatbox',
                 'bookmarked': false,
                 'chat_state': undefined,
                 'num_unread': 0,

src/converse-muc.js

@@ -29,6 +29,7 @@
             "tpl!room_description",
             "tpl!room_item",
             "tpl!room_panel",
+            "lodash.fp",
             "awesomplete",
             "converse-chatview"
     ], factory);
@@ -51,10 +52,13 @@
             tpl_room_description,
             tpl_room_item,
             tpl_room_panel,
+            fp,
             Awesomplete
     ) {
+
     "use strict";
     var ROOMS_PANEL_ID = 'chatrooms';
+    var CHATROOMS_TYPE = 'chatroom';
 
     // Strophe methods for building stanzas
     var Strophe = converse.env.Strophe,
@@ -145,7 +149,7 @@
             ChatBoxes: {
                 model: function (attrs, options) {
                     var _converse = this.__super__._converse;
-                    if (attrs.type == 'chatroom') {
+                    if (attrs.type == CHATROOMS_TYPE) {
                         return new _converse.ChatRoom(attrs, options);
                     } else {
                         return this.__super__.model.apply(this, arguments);
@@ -223,7 +227,7 @@
                 onChatBoxAdded: function (item) {
                     var _converse = this.__super__._converse;
                     var view = this.get(item.get('id'));
-                    if (!view && item.get('type') === 'chatroom') {
+                    if (!view && item.get('type') === CHATROOMS_TYPE) {
                         view = new _converse.ChatRoomView({'model': item});
                         return this.add(item.get('id'), view);
                     } else {
@@ -355,7 +359,7 @@
                         'description': '',
                         'features_fetched': false,
                         'roomconfig': {},
-                        'type': 'chatroom',
+                        'type': CHATROOMS_TYPE,
                     }, settings)
                 );
             };
@@ -371,6 +375,7 @@
                     // _converse.ChatBox to indicate unread messages which
                     // mention the user and `num_unread_general` to indicate
                     // generally unread messages (which *includes* mentions!).
+                    'type': CHATROOMS_TYPE,
                     'num_unread_general': 0
                 }),
 
@@ -2394,10 +2399,12 @@
                     });
                     var controlbox = _converse.chatboxes.get('controlbox');
                     var is_current = controlbox.get('active-panel') === ROOMS_PANEL_ID;
+                    var isChatroom = fp.curry(utils.isInstance)(_converse.ChatRoom)
+                    var chatrooms = fp.filter(isChatroom, _converse.chatboxes.models);
                     this.tab_el.innerHTML = tpl_chatrooms_tab({
                         'label_rooms': __('Rooms'),
                         'is_current': is_current,
-                        'num_unread': _.sum(_converse.chatboxes.pluck('num_unread'))
+                        'num_unread': fp.sum(fp.map(fp.curry(utils.getAttribute)('num_unread'), chatrooms))
                     });
                     if (!is_current) {
                         this.el.classList.add('hidden');
@@ -2584,7 +2591,7 @@
                         'id': jid,
                         'jid': jid,
                         'name': name || Strophe.unescapeNode(Strophe.getNodeFromJid(jid)),
-                        'type': 'chatroom',
+                        'type': CHATROOMS_TYPE,
                         'box_id': b64_sha1(jid)
                     });
                 },
@@ -2638,7 +2645,7 @@
                         'id': room_jid,
                         'jid': room_jid,
                         'name': Strophe.unescapeNode(Strophe.getNodeFromJid(room_jid)),
-                        'type': 'chatroom',
+                        'type': CHATROOMS_TYPE,
                         'box_id': b64_sha1(room_jid),
                         'password': $x.attr('password')
                     });
@@ -2684,7 +2691,7 @@
                     'id': jid,
                     'jid': jid,
                     'name': Strophe.unescapeNode(Strophe.getNodeFromJid(jid)),
-                    'type': 'chatroom',
+                    'type': CHATROOMS_TYPE,
                     'box_id': b64_sha1(jid)
                 }, attrs)));
             };
@@ -2739,7 +2746,7 @@
                         if (_.isUndefined(jids)) {
                             var result = [];
                             _converse.chatboxes.each(function (chatbox) {
-                                if (chatbox.get('type') === 'chatroom') {
+                                if (chatbox.get('type') === CHATROOMS_TYPE) {
                                     result.push(_converse.getViewForChatBox(chatbox));
                                 }
                             });
@@ -2762,7 +2769,7 @@
                  * all the open chat rooms.
                  */
                 _converse.chatboxviews.each(function (view) {
-                    if (view.model.get('type') === 'chatroom') {
+                    if (view.model.get('type') === CHATROOMS_TYPE) {
                         view.model.save('connection_status', ROOMSTATUS.DISCONNECTED);
                         view.join();
                     }
@@ -2776,7 +2783,7 @@
                  * when fetched from session storage.
                  */
                 _converse.chatboxes.each(function (model) {
-                    if (model.get('type') === 'chatroom') {
+                    if (model.get('type') === CHATROOMS_TYPE) {
                         model.save('connection_status', ROOMSTATUS.DISCONNECTED);
                     }
                 });

src/templates/chatrooms_tab.html

-<a class="s
+<a class="s rooms-tab
    {[ if (is_current) { ]} current {[ } ]}
    {[ if (num_unread) { ]} unread-msgs {[ } ]}"
        data-id="chatrooms" href="#chatrooms">

src/templates/contacts_tab.html

-<a class="s
+<a class="s contacts-tab
    {[ if (is_current) { ]} current {[ } ]}
    {[ if (num_unread) { ]} unread-msgs {[ } ]}"
        data-id="users" href="#users">

src/utils.js

@@ -471,6 +471,14 @@
         return utils.detectLocale(isSupportedByLibrary) || 'en';
     };
 
+    utils.isInstance = function (type, item) {
+        return item instanceof type;
+    };
+
+    utils.getAttribute = function (key, item) {
+        return item.get(key);
+    };
+
     utils.contains.not = function (attr, query) {
         return function (item) {
             return !(utils.contains(attr, query)(item));