diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index 4539df1ffa..1988dc5ef9 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -30,13 +30,14 @@ 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,
},
getInitialState: function() {
return {
- showCallElement: null,
searchFilter: '',
};
},
@@ -45,26 +46,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 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.
+ // 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 +152,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 (