refactor out the sections of the RoomList into RoomSubLists. Start wiring up tags

src/controllers/organisms/RoomList.js

@@ -23,7 +23,6 @@ var dis = require("matrix-react-sdk/lib/dispatcher");
 
 var sdk = require('matrix-react-sdk');
 var VectorConferenceHandler = require("../../modules/VectorConferenceHandler");
-var CallHandler = require("matrix-react-sdk/lib/CallHandler");
 
 var HIDE_CONFERENCE_CHANS = true;
 
@@ -31,8 +30,7 @@ module.exports = {
     getInitialState: function() {
         return {
             activityMap: null,
-            inviteList: [],
-            roomList: [],
+            lists: {},
         }
     },
 
@@ -41,6 +39,7 @@ module.exports = {
         cli.on("Room", this.onRoom);
         cli.on("Room.timeline", this.onRoomTimeline);
         cli.on("Room.name", this.onRoomName);
+        cli.on("Room.tags", this.onRoomTags);
         cli.on("RoomState.events", this.onRoomStateEvents);
         cli.on("RoomMember.name", this.onRoomMemberName);
 
@@ -55,11 +54,6 @@ module.exports = {
 
     onAction: function(payload) {
         switch (payload.action) {
-            // listen for call state changes to prod the render method, which
-            // may hide the global CallView if the call it is tracking is dead
-            case 'call_state':
-                this._recheckCallElement(this.props.selectedRoom);
-                break;
             case 'view_tooltip':
                 this.tooltip = payload.tooltip;
                 this._repositionTooltip();
@@ -80,7 +74,6 @@ module.exports = {
 
     componentWillReceiveProps: function(newProps) {
         this.state.activityMap[newProps.selectedRoom] = undefined;
-        this._recheckCallElement(newProps.selectedRoom);
         this.setState({
             activityMap: this.state.activityMap
         });
@@ -117,6 +110,10 @@ module.exports = {
         this.refreshRoomList();
     },
 
+    onRoomTags: function(room) {
+        this.refreshRoomList();        
+    },
+
     onRoomStateEvents: function(ev, state) {
         setTimeout(this.refreshRoomList, 0);
     },
@@ -125,26 +122,31 @@ module.exports = {
         setTimeout(this.refreshRoomList, 0);
     },
 
-
     refreshRoomList: function() {
+        // TODO: rather than bluntly regenerating and re-sorting everything
+        // every time we see any kind of room change from the JS SDK
+        // we could do incremental updates on our copy of the state
+        // based on the room which has actually changed.  This would stop
+        // us re-rendering all the sublists every time anything changes anywhere
+        // in the state of the client.
         this.setState(this.getRoomLists());
     },
 
     getRoomLists: function() {
-        var s = {};
-        var inviteList = [];
-        s.roomList = RoomListSorter.mostRecentActivityFirst(
-            MatrixClientPeg.get().getRooms().filter(function(room) {
-                var me = room.getMember(MatrixClientPeg.get().credentials.userId);
+        var s = { lists: {} };
 
-                if (me && me.membership == "invite") {
-                    inviteList.push(room);
-                    return false;
-                }
+        MatrixClientPeg.get().getRooms().forEach(function(room) {
+            var me = room.getMember(MatrixClientPeg.get().credentials.userId);
 
+            if (me && me.membership == "invite") {
+                s.lists["invites"] = s.lists["invites"] || [];
+                s.lists["invites"].push(room);
+            }
+            else {
                 var shouldShowRoom =  (
                     me && (me.membership == "join")
                 );
+
                 // hiding conf rooms only ever toggles shouldShowRoom to false
                 if (shouldShowRoom && HIDE_CONFERENCE_CHANS) {
                     // we want to hide the 1:1 conf<->user room and not the group chat
@@ -159,23 +161,27 @@ module.exports = {
                         }
                     }
                 }
-                return shouldShowRoom;
-            })
-        );
-        s.inviteList = RoomListSorter.mostRecentActivityFirst(inviteList);
-        return s;
-    },
 
-    _recheckCallElement: function(selectedRoomId) {
-        // if we aren't viewing a room with an ongoing call, but there is an
-        // active call, show the call element - we need to do this to make
-        // audio/video not crap out
-        var activeCall = CallHandler.getAnyActiveCall();
-        var callForRoom = CallHandler.getCallForRoom(selectedRoomId);
-        var showCall = (activeCall && !callForRoom);
-        this.setState({
-            show_call_element: showCall
+                if (shouldShowRoom) {
+                    var tagNames = Object.keys(room.tags);
+                    if (tagNames.length) {
+                        for (var i = 0; i < tagNames.length; i++) {
+                            var tagName = tagNames[i];
+                            s.lists[tagName] = s.lists[tagName] || [];
+                            s.lists[tagNames[i]].push(room);
+                        }
+                    }
+                    else {
+                        s.lists["recents"] = s.lists["recents"] || [];
+                        s.lists["recents"].push(room); 
+                    }
+                }
+            }
         });
+
+        // we actually apply the sorting to this when receiving the prop in RoomSubLists.
+
+        return s;
     },
 
     _repositionTooltip: function(e) {
@@ -184,23 +190,4 @@ module.exports = {
             this.tooltip.style.top = (scroll.parentElement.offsetTop + this.tooltip.parentElement.offsetTop - scroll.scrollTop) + "px"; 
         }
     },
-
-    makeRoomTiles: function(list, isInvite) {
-        var self = this;
-        var RoomTile = sdk.getComponent("molecules.RoomTile");
-        return list.map(function(room) {
-            var selected = room.roomId == self.props.selectedRoom;
-            return (
-                <RoomTile
-                    room={room}
-                    key={room.roomId}
-                    collapsed={self.props.collapsed}
-                    selected={selected}
-                    unread={self.state.activityMap[room.roomId] === 1}
-                    highlight={self.state.activityMap[room.roomId] === 2}
-                    isInvite={isInvite}
-                />
-            );
-        });
-    }
 };