Don't forceUpdate the whole roomview on typing notifs

updating the roomview is expensive, so we shouldn't do it every time we get a
typing notification (which may or may not correspond to a user in this
room). Push it down to RoomStatusBar, and use a state var to keep track of it.

src/components/structures/RoomStatusBar.js

@@ -61,11 +61,13 @@ module.exports = React.createClass({
     getInitialState: function() {
         return {
             syncState: MatrixClientPeg.get().getSyncState(),
+            whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room),
         };
     },
 
     componentWillMount: function() {
         MatrixClientPeg.get().on("sync", this.onSyncStateChange);
+        MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
     },
 
     componentDidUpdate: function(prevProps, prevState) {
@@ -76,8 +78,10 @@ module.exports = React.createClass({
 
     componentWillUnmount: function() {
         // we may have entirely lost our client as we're logging out before clicking login on the guest bar...
-        if (MatrixClientPeg.get()) {
+        var client = MatrixClientPeg.get();
-            MatrixClientPeg.get().removeListener("sync", this.onSyncStateChange);
+        if (client) {
+            client.removeListener("sync", this.onSyncStateChange);
+            client.removeListener("RoomMember.typing", this.onRoomMemberTyping);
         }
     },
 
@@ -90,6 +94,12 @@ module.exports = React.createClass({
         });
     },
 
+    onRoomMemberTyping: function(ev, member) {
+        this.setState({
+            whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room),
+        });
+    },
+
     // determine if we need to call onResize
     _checkForResize: function(prevProps, prevState) {
         // figure out the old height and the new height of the status bar. We
@@ -235,7 +245,7 @@ module.exports = React.createClass({
             );
         }
 
-        var typingString = WhoIsTyping.whoIsTypingString(this.props.room);
+        var typingString = this.state.whoisTypingString;
         if (typingString) {
             return (
                 <div className="mx_RoomStatusBar_typingBar">

src/components/structures/RoomView.js

@@ -99,7 +99,6 @@ module.exports = React.createClass({
         MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
         MatrixClientPeg.get().on("Room.name", this.onRoomName);
         MatrixClientPeg.get().on("Room.accountData", this.onRoomAccountData);
-        MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
         MatrixClientPeg.get().on("RoomState.members", this.onRoomStateMember);
         // xchat-style tab complete, add a colon if tab
         // completing at the start of the text
@@ -171,7 +170,6 @@ module.exports = React.createClass({
             MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
             MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
             MatrixClientPeg.get().removeListener("Room.accountData", this.onRoomAccountData);
-            MatrixClientPeg.get().removeListener("RoomMember.typing", this.onRoomMemberTyping);
             MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
         }
 
@@ -340,10 +338,6 @@ module.exports = React.createClass({
         }
     },
 
-    onRoomMemberTyping: function(ev, member) {
-        this.forceUpdate();
-    },
-
     onRoomStateMember: function(ev, state, member) {
         if (member.roomId === this.props.roomId) {
             // a member state changed in this room, refresh the tab complete list