From 82f2e476671374c435f0d6bb276e2010f801b253 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 11 Sep 2017 17:06:40 +0100
Subject: [PATCH 1/3] Avoid re-rendering RoomList on room switch

See https://github.com/matrix-org/matrix-react-sdk/pull/1375
---
 src/components/structures/LeftPanel.js   | 89 +++++++-----------------
 src/components/structures/RoomSubList.js |  5 --
 2 files changed, 27 insertions(+), 67 deletions(-)

diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index 4539df1ffa..8acb852697 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -36,7 +36,6 @@ var LeftPanel = React.createClass({
 
     getInitialState: function() {
         return {
-            showCallElement: null,
             searchFilter: '',
         };
     },
@@ -45,26 +44,25 @@ var LeftPanel = React.createClass({
         this.focusedElement = null;
     },
 
-    componentDidMount: function() {
-        this.dispatcherRef = dis.register(this.onAction);
-    },
-
-    componentWillReceiveProps: function(newProps) {
-        this._recheckCallElement(newProps.selectedRoom);
-    },
-
-    componentWillUnmount: function() {
-        dis.unregister(this.dispatcherRef);
-    },
-
-    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;
+    shouldComponentUpdate: function(nextProps, nextState) {
+        // MatrixChat will update whenever the user switches
+        // rooms, but propagating this chnage all the way down
+        // the react tree is quite slow, so we cut this off
+        // here. The RoomTiles listen for the room change
+        // events themselves to know when to update.
+        // We just need to update if any of these things change.
+        if (
+            this.props.collapsed !== nextProps.collapsed ||
+            this.props.opacity !== nextProps.opacity
+        ) {
+            return true;
         }
+
+        if (this.state.searchFilter !== nextState.searchFilter) {
+            return true;
+        }
+
+        return false;
     },
 
     _onFocus: function(ev) {
@@ -152,74 +150,41 @@ var LeftPanel = React.createClass({
         }
     },
 
-    _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 && activeCall.call_state === 'connected' && !callForRoom);
-        this.setState({
-            showCallElement: showCall
-        });
-    },
-
     onHideClick: function() {
         dis.dispatch({
             action: 'hide_left_panel',
         });
     },
 
-    onCallViewClick: function() {
-        var call = CallHandler.getAnyActiveCall();
-        if (call) {
-            dis.dispatch({
-                action: 'view_room',
-                room_id: call.groupRoomId || call.roomId,
-            });
-        }
-    },
-
     onSearch: function(term) {
         this.setState({ searchFilter: term });
     },
 
     render: function() {
-        var RoomList = sdk.getComponent('rooms.RoomList');
-        var BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu');
+        const RoomList = sdk.getComponent('rooms.RoomList');
+        const BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu');
+        const CallPreview = sdk.getComponent('voip.CallPreview');
 
-        var topBox;
+        let topBox;
         if (MatrixClientPeg.get().isGuest()) {
-            var LoginBox = sdk.getComponent('structures.LoginBox');
+            const LoginBox = sdk.getComponent('structures.LoginBox');
             topBox = <LoginBox collapsed={ this.props.collapsed }/>;
-        }
-        else {
-            var SearchBox = sdk.getComponent('structures.SearchBox');
+        } else {
+            const SearchBox = sdk.getComponent('structures.SearchBox');
             topBox = <SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />;
         }
 
-        var classes = "mx_LeftPanel mx_fadable";
+        let classes = "mx_LeftPanel mx_fadable";
         if (this.props.collapsed) {
             classes += " collapsed";
         }
 
-        var callPreview;
-        if (this.state.showCallElement && !this.props.collapsed) {
-            var CallView = sdk.getComponent('voip.CallView');
-            callPreview = (
-                <CallView
-                    className="mx_LeftPanel_callView" showVoice={true} onClick={this.onCallViewClick}
-                    ConferenceHandler={VectorConferenceHandler} />
-            );
-        }
-
         return (
             <aside className={classes} style={{ opacity: this.props.opacity }}
                    onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
                 { topBox }
-                { callPreview }
+                <CallPreview ConferenceHandler={VectorConferenceHandler} />
                 <RoomList
-                    selectedRoom={this.props.selectedRoom}
                     collapsed={this.props.collapsed}
                     searchFilter={this.state.searchFilter}
                     ConferenceHandler={VectorConferenceHandler} />
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 8eb37aa6b7..9e10c01284 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -75,9 +75,6 @@ var RoomSubList = React.createClass({
 
         order: React.PropTypes.string.isRequired,
 
-        // undefined if no room is selected (eg we are showing settings)
-        selectedRoom: React.PropTypes.string,
-
         // passed through to RoomTile and used to highlight room with `!` regardless of notifications count
         isInvite: React.PropTypes.bool,
 
@@ -370,7 +367,6 @@ var RoomSubList = React.createClass({
         var self = this;
         var DNDRoomTile = sdk.getComponent("rooms.DNDRoomTile");
         return this.state.sortedList.map(function(room) {
-            var selected = room.roomId == self.props.selectedRoom;
             // XXX: is it evil to pass in self as a prop to RoomTile?
             return (
                 <DNDRoomTile
@@ -378,7 +374,6 @@ var RoomSubList = React.createClass({
                     roomSubList={ self }
                     key={ room.roomId }
                     collapsed={ self.props.collapsed || false}
-                    selected={ selected }
                     unread={ Unread.doesRoomHaveUnreadMessages(room) }
                     highlight={ room.getUnreadNotificationCount('highlight') > 0 || self.props.isInvite }
                     isInvite={ self.props.isInvite }

From 47ddc6dedfd2e2144a96d7da2935e1d1acb2b028 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 11 Sep 2017 18:29:20 +0100
Subject: [PATCH 2/3] Comment typo

---
 src/components/structures/LeftPanel.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index 8acb852697..23dba3dbb5 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -46,7 +46,7 @@ var LeftPanel = React.createClass({
 
     shouldComponentUpdate: function(nextProps, nextState) {
         // MatrixChat will update whenever the user switches
-        // rooms, but propagating this chnage all the way down
+        // rooms, but propagating this change all the way down
         // the react tree is quite slow, so we cut this off
         // here. The RoomTiles listen for the room change
         // events themselves to know when to update.

From 3ac154b7da0dfaefeffe1ea2570c378a86581e8d Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 11 Sep 2017 18:30:43 +0100
Subject: [PATCH 3/3] Add comment to update shouldComponentUpdate

if adding new props
---
 src/components/structures/LeftPanel.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index 23dba3dbb5..1988dc5ef9 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -30,6 +30,8 @@ import VectorConferenceHandler from '../../VectorConferenceHandler';
 var LeftPanel = React.createClass({
     displayName: 'LeftPanel',
 
+    // NB. If you add props, don't forget to update
+    // shouldComponentUpdate!
     propTypes: {
         collapsed: React.PropTypes.bool.isRequired,
     },