fix bugs, and handle shortcircuit react when updating roomtile

src/components/structures/TimelinePanel.js

@@ -523,9 +523,7 @@ var TimelinePanel = React.createClass({
                 this.props.timelineSet.room.setUnreadNotificationCount('highlight', 0);
                 dis.dispatch({
                     action: 'on_room_read',
-                    payload: {
-                        room: this.props.timelineSet.room
-                    }
+                    room: this.props.timelineSet.room,
                 });
             }
         }

src/components/views/rooms/RoomList.js

@@ -21,7 +21,6 @@ var GeminiScrollbar = require('react-gemini-scrollbar');
 var MatrixClientPeg = require("../../../MatrixClientPeg");
 var CallHandler = require('../../../CallHandler');
 var RoomListSorter = require("../../../RoomListSorter");
-var Unread = require('../../../Unread');
 var dis = require("../../../dispatcher");
 var sdk = require('../../../index');
 var rate_limited_func = require('../../../ratelimitedfunc');
@@ -38,7 +37,7 @@ module.exports = React.createClass({
     propTypes: {
         ConferenceHandler: React.PropTypes.any,
         collapsed: React.PropTypes.bool.isRequired,
-        currentRoom: React.PropTypes.string,
+        selectedRoom: React.PropTypes.string,
         searchFilter: React.PropTypes.string,
     },
 
@@ -57,17 +56,16 @@ module.exports = React.createClass({
         cli.on("Room.timeline", this.onRoomTimeline);
         cli.on("Room.name", this.onRoomName);
         cli.on("Room.tags", this.onRoomTags);
-        cli.on("Room.receipt", this.onRoomReceipt);
         // cli.on("RoomState.events", this.onRoomStateEvents);
         cli.on("RoomMember.name", this.onRoomMemberName);
         cli.on("accountData", this.onAccountData);
 
-        var s = this.getRoomLists();
-        this.setState(s);
-
         // lookup for which lists a given roomId is currently in.
         this.listsForRoomId = {};
 
+        var s = this.getRoomLists();
+        this.setState(s);
+
         // order of the sublists
         this.listOrder = [];
     },
@@ -78,6 +76,21 @@ module.exports = React.createClass({
         this._updateStickyHeaders(true);
     },
 
+    componentWillReceiveProps: function(nextProps) {
+        // short-circuit react when the room changes
+        // to avoid rerendering all the sublists everywhere
+        if (nextProps.selectedRoom !== this.props.selectedRoom) {
+            if (this.props.selectedRoom) {
+                constantTimeDispatcher.dispatch(
+                    "RoomTile.select", this.props.selectedRoom, {}
+                );            
+            }
+            constantTimeDispatcher.dispatch(
+                "RoomTile.select", nextProps.selectedRoom, { selected: true }
+            );
+        }
+    },
+
     componentDidUpdate: function() {
         // Reinitialise the stickyHeaders when the component is updated
         this._updateStickyHeaders(true);
@@ -111,6 +124,17 @@ module.exports = React.createClass({
                 constantTimeDispatcher.dispatch(
                     "RoomTile.refresh", payload.room.roomId, {}
                 );
+
+                // also have to poke the right list(s)
+                var lists = this.listsForRoomId[payload.room.roomId];
+                if (lists) {
+                    lists.forEach(list=>{
+                        constantTimeDispatcher.dispatch(
+                            "RoomSubList.refreshHeader", list, { room: payload.room }
+                        );
+                    });
+                }
+
                 break;
         }
     },
@@ -123,7 +147,6 @@ module.exports = React.createClass({
             MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
             MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
             MatrixClientPeg.get().removeListener("Room.tags", this.onRoomTags);
-            MatrixClientPeg.get().removeListener("Room.receipt", this.onRoomReceipt);
             // MatrixClientPeg.get().removeListener("RoomState.events", this.onRoomStateEvents);
             MatrixClientPeg.get().removeListener("RoomMember.name", this.onRoomMemberName);
             MatrixClientPeg.get().removeListener("accountData", this.onAccountData);
@@ -556,7 +579,6 @@ module.exports = React.createClass({
                              label="Invites"
                              editable={ false }
                              order="recent"
-                             selectedRoom={ self.props.selectedRoom }
                              incomingCall={ self.state.incomingCall }
                              collapsed={ self.props.collapsed }
                              searchFilter={ self.props.searchFilter }
@@ -570,7 +592,6 @@ module.exports = React.createClass({
                              verb="favourite"
                              editable={ true }
                              order="manual"
-                             selectedRoom={ self.props.selectedRoom }
                              incomingCall={ self.state.incomingCall }
                              collapsed={ self.props.collapsed }
                              searchFilter={ self.props.searchFilter }
@@ -584,7 +605,6 @@ module.exports = React.createClass({
                              verb="tag direct chat"
                              editable={ true }
                              order="recent"
-                             selectedRoom={ self.props.selectedRoom }
                              incomingCall={ self.state.incomingCall }
                              collapsed={ self.props.collapsed }
                              alwaysShowHeader={ true }
@@ -598,7 +618,6 @@ module.exports = React.createClass({
                              editable={ true }
                              verb="restore"
                              order="recent"
-                             selectedRoom={ self.props.selectedRoom }
                              incomingCall={ self.state.incomingCall }
                              collapsed={ self.props.collapsed }
                              searchFilter={ self.props.searchFilter }
@@ -615,7 +634,6 @@ module.exports = React.createClass({
                              verb={ "tag as " + tagName }
                              editable={ true }
                              order="manual"
-                             selectedRoom={ self.props.selectedRoom }
                              incomingCall={ self.state.incomingCall }
                              collapsed={ self.props.collapsed }
                              searchFilter={ self.props.searchFilter }
@@ -632,7 +650,6 @@ module.exports = React.createClass({
                              verb="demote"
                              editable={ true }
                              order="recent"
-                             selectedRoom={ self.props.selectedRoom }
                              incomingCall={ self.state.incomingCall }
                              collapsed={ self.props.collapsed }
                              searchFilter={ self.props.searchFilter }
@@ -644,7 +661,6 @@ module.exports = React.createClass({
                              label="Historical"
                              editable={ false }
                              order="recent"
-                             selectedRoom={ self.props.selectedRoom }
                              collapsed={ self.props.collapsed }
                              alwaysShowHeader={ true }
                              startAsHidden={ true }

src/components/views/rooms/RoomTile.js

@@ -28,6 +28,7 @@ var FormattingUtils = require('../../../utils/FormattingUtils');
 import AccessibleButton from '../elements/AccessibleButton';
 var UserSettingsStore = require('../../../UserSettingsStore');
 var constantTimeDispatcher = require('../../../ConstantTimeDispatcher');
+var Unread = require('../../../Unread');
 
 module.exports = React.createClass({
     displayName: 'RoomTile',
@@ -41,9 +42,6 @@ module.exports = React.createClass({
 
         room: React.PropTypes.object.isRequired,
         collapsed: React.PropTypes.bool.isRequired,
-        selected: React.PropTypes.bool.isRequired,
-        unread: React.PropTypes.bool.isRequired,
-        highlight: React.PropTypes.bool.isRequired,
         isInvite: React.PropTypes.bool.isRequired,
         incomingCall: React.PropTypes.object,
     },
@@ -91,19 +89,30 @@ module.exports = React.createClass({
 
     componentWillMount: function() {
         constantTimeDispatcher.register("RoomTile.refresh", this.props.room.roomId, this.onRefresh);
+        constantTimeDispatcher.register("RoomTile.select", this.props.room.roomId, this.onSelect);
         MatrixClientPeg.get().on("accountData", this.onAccountData);
     },
 
     componentWillUnmount: function() {
         constantTimeDispatcher.unregister("RoomTile.refresh", this.props.room.roomId, this.onRefresh);
+        constantTimeDispatcher.unregister("RoomTile.select", this.props.room.roomId, this.onSelect);
         var cli = MatrixClientPeg.get();
         if (cli) {
             MatrixClientPeg.get().removeListener("accountData", this.onAccountData);
         }
     },
 
-    onRefresh: function() {
-        this.forceUpdate();
+    onRefresh: function(params) {
+        this.setState({
+            unread: Unread.doesRoomHaveUnreadMessages(this.props.room),
+            highlight: this.props.room.getUnreadNotificationCount('highlight') > 0 || this.props.label === 'Invites',
+        });
+    },
+
+    onSelect: function(params) {
+        this.setState({
+            selected: params.selected,
+        });
     },
 
     onClick: function() {
@@ -183,13 +192,13 @@ module.exports = React.createClass({
         // var highlightCount = this.props.room.getUnreadNotificationCount("highlight");
 
         const notifBadges = notificationCount > 0 && this._shouldShowNotifBadge();
-        const mentionBadges = this.props.highlight && this._shouldShowMentionBadge();
+        const mentionBadges = this.state.highlight && this._shouldShowMentionBadge();
         const badges = notifBadges || mentionBadges;
 
         var classes = classNames({
             'mx_RoomTile': true,
-            'mx_RoomTile_selected': this.props.selected,
-            'mx_RoomTile_unread': this.props.unread,
+            'mx_RoomTile_selected': this.state.selected,
+            'mx_RoomTile_unread': this.state.unread,
             'mx_RoomTile_unreadNotify': notifBadges,
             'mx_RoomTile_highlight': mentionBadges,
             'mx_RoomTile_invited': (me && me.membership == 'invite'),
@@ -235,7 +244,7 @@ module.exports = React.createClass({
                 'mx_RoomTile_badgeShown': badges || this.state.badgeHover || this.state.menuDisplayed,
             });
 
-            if (this.props.selected) {
+            if (this.state.selected) {
                 let nameSelected = <EmojiText>{name}</EmojiText>;
 
                 label = <div title={ name } className={ nameClasses }>{ nameSelected }</div>;