From 82f2e476671374c435f0d6bb276e2010f801b253 Mon Sep 17 00:00:00 2001 From: David Baker 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 = ; - } - else { - var SearchBox = sdk.getComponent('structures.SearchBox'); + } else { + const SearchBox = sdk.getComponent('structures.SearchBox'); topBox = ; } - 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 = ( - - ); - } - return (