Update room header when room name changes

skins/base/views/molecules/RoomHeader.js

@@ -59,7 +59,7 @@ module.exports = React.createClass({
                         </div>
                         <div className="mx_RoomHeader_info">
                             <div className="mx_RoomHeader_name">
-                                <EditableText initalValue={this.props.room.name} onValueChanged={this.onNameChange} />
+                                <EditableText initialValue={this.props.room.name} onValueChanged={this.onNameChange} />
                             </div>
                             { topic }
                         </div>

skins/base/views/organisms/UserSettings.js

@@ -64,7 +64,7 @@ module.exports = React.createClass({
                                 </div>
 
                                 <div className="mx_UserSettings_DisplayName">
-                                    <EditableText ref="displayname" initalValue={this.state.displayName} placeHolder="Click to set display name." onValueChanged={this.changeDisplayname}/>
+                                    <EditableText ref="displayname" initialValue={this.state.displayName} placeHolder="Click to set display name." onValueChanged={this.changeDisplayname}/>
                                     <div className="mx_UserSettings_DisplayName_Edit" onClick={this.editDisplayName}>Edit</div>
                                 </div>
 

src/controllers/atoms/EditableText.js

@@ -21,7 +21,7 @@ var React = require('react');
 module.exports = {
     propTypes: {
         onValueChanged: React.PropTypes.func,
-        initalValue: React.PropTypes.string,
+        initialValue: React.PropTypes.string,
         placeHolder: React.PropTypes.string,
     },
 
@@ -33,18 +33,24 @@ module.exports = {
     getDefaultProps: function() {
         return {
             onValueChanged: function() {},
-            initalValue: '',
+            initialValue: '',
             placeHolder: 'Click to set',
         };
     },
 
     getInitialState: function() {
         return {
-            value: this.props.initalValue,
+            value: this.props.initialValue,
             phase: this.Phases.Display,
         }
     },
 
+    componentWillReceiveProps: function(nextProps) {
+        this.setState({
+            value: nextProps.initialValue
+        });
+    },
+
     getValue: function() {
         return this.state.value;
     },

src/controllers/organisms/RoomView.js

@@ -49,6 +49,7 @@ module.exports = {
     componentWillMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
         MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
+        MatrixClientPeg.get().on("Room.name", this.onRoomName);
         this.atBottom = true;
     },
 
@@ -60,6 +61,7 @@ module.exports = {
         dis.unregister(this.dispatcherRef);
         if (MatrixClientPeg.get()) {
             MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
+            MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
         }
     },
 
@@ -106,6 +108,14 @@ module.exports = {
         }
     },
 
+    onRoomName: function(room) {
+        if (room.roomId == this.props.roomId) {
+            this.setState({
+                room: room
+            });
+        }
+    },
+
     componentDidMount: function() {
         if (this.refs.messageWrapper) {
             var messageWrapper = this.refs.messageWrapper.getDOMNode();