Make sure that we update the room name

It turns out that RoomState.events is fired before Room.name is updated; make
sure that we pick up the latter and do the update.

src/components/views/rooms/RoomHeader.js

@@ -52,6 +52,13 @@ module.exports = React.createClass({
     componentDidMount: function() {
         var cli = MatrixClientPeg.get();
         cli.on("RoomState.events", this._onRoomStateEvents);
+
+        // When a room name occurs, RoomState.events is fired *before*
+        // room.name is updated. So we have to listen to Room.name as well as
+        // RoomState.events.
+        if (this.props.room) {
+            this.props.room.on("Room.name", this._onRoomNameChange);
+        }
     },
 
     componentDidUpdate: function() {
@@ -61,6 +68,9 @@ module.exports = React.createClass({
     },
 
     componentWillUnmount: function() {
+        if (this.props.room) {
+            this.props.room.removeListener("Room.name", this._onRoomNameChange);
+        }
         var cli = MatrixClientPeg.get();
         if (cli) {
             cli.removeListener("RoomState.events", this._onRoomStateEvents);
@@ -76,6 +86,10 @@ module.exports = React.createClass({
         this.forceUpdate();
     },
 
+    _onRoomNameChange: function(room) {
+        this.forceUpdate();
+    },
+
     onAvatarPickerClick: function(ev) {
         if (this.refs.file_label) {
             this.refs.file_label.click();
@@ -97,7 +111,7 @@ module.exports = React.createClass({
                 description: "Failed to set avatar. " + errMsg
             });
         }).done();
-    },    
+    },
 
     /**
      * After editing the settings, get the new name for the room
@@ -266,7 +280,7 @@ module.exports = React.createClass({
 
         var right_row;
         if (!this.props.editing) {
-            right_row = 
+            right_row =
                 <div className="mx_RoomHeader_rightRow">
                     { forget_button }
                     { leave_button }