Merge pull request #252 from matrix-org/rav/RoomHeader

Refactor RoomHeader, and fix topic updates

src/component-index.js

@@ -85,11 +85,14 @@ module.exports.components['views.rooms.MessageComposerInput'] = require('./compo
 module.exports.components['views.rooms.PresenceLabel'] = require('./components/views/rooms/PresenceLabel');
 module.exports.components['views.rooms.RoomHeader'] = require('./components/views/rooms/RoomHeader');
 module.exports.components['views.rooms.RoomList'] = require('./components/views/rooms/RoomList');
+module.exports.components['views.rooms.RoomNameEditor'] = require('./components/views/rooms/RoomNameEditor');
 module.exports.components['views.rooms.RoomPreviewBar'] = require('./components/views/rooms/RoomPreviewBar');
 module.exports.components['views.rooms.RoomSettings'] = require('./components/views/rooms/RoomSettings');
 module.exports.components['views.rooms.RoomTile'] = require('./components/views/rooms/RoomTile');
+module.exports.components['views.rooms.RoomTopicEditor'] = require('./components/views/rooms/RoomTopicEditor');
 module.exports.components['views.rooms.SearchableEntityList'] = require('./components/views/rooms/SearchableEntityList');
 module.exports.components['views.rooms.SearchResultTile'] = require('./components/views/rooms/SearchResultTile');
+module.exports.components['views.rooms.SimpleRoomHeader'] = require('./components/views/rooms/SimpleRoomHeader');
 module.exports.components['views.rooms.TabCompleteBar'] = require('./components/views/rooms/TabCompleteBar');
 module.exports.components['views.rooms.TopUnreadMessagesBar'] = require('./components/views/rooms/TopUnreadMessagesBar');
 module.exports.components['views.rooms.UserTile'] = require('./components/views/rooms/UserTile');

src/components/structures/CreateRoom.js

@@ -249,13 +249,13 @@ module.exports = React.createClass({
             var RoomAlias = sdk.getComponent("create_room.RoomAlias");
             var Presets = sdk.getComponent("create_room.Presets");
             var UserSelector = sdk.getComponent("elements.UserSelector");
-            var RoomHeader = sdk.getComponent("rooms.RoomHeader");
+            var SimpleRoomHeader = sdk.getComponent("rooms.SimpleRoomHeader");
 
             var domain = MatrixClientPeg.get().getDomain();
 
             return (
             <div className="mx_CreateRoom">
-                <RoomHeader simpleHeader="Create room" />
+                <SimpleRoomHeader title="CreateRoom" />
                 <div className="mx_CreateRoom_body">
                     <input type="text" ref="room_name" value={this.state.room_name} onChange={this.onNameChange} placeholder="Name"/> <br />
                     <textarea className="mx_CreateRoom_description" ref="topic" value={this.state.topic} onChange={this.onTopicChange} placeholder="Topic"/> <br />

src/components/structures/RoomView.js

@@ -858,8 +858,14 @@ module.exports = React.createClass({
             uploadingRoomSettings: true,
         });
         
-        this.refs.room_settings.setName(this.refs.header.getRoomName());
+        var newName = this.refs.header.getEditedName();
-        this.refs.room_settings.setTopic(this.refs.header.getTopic());
+        if (newName !== undefined) {
+            this.refs.room_settings.setName(newName);
+        }
+        var newTopic = this.refs.header.getEditedTopic();
+        if (newTopic !== undefined) {
+            this.refs.room_settings.setTopic(newTopic);
+        }
         
         this.refs.room_settings.save().then((results) => {
             var fails = results.filter(function(result) { return result.state !== "fulfilled" });

src/components/structures/UserSettings.js

@@ -249,7 +249,7 @@ module.exports = React.createClass({
                 throw new Error("Unknown state.phase => " + this.state.phase);
         }
         // can only get here if phase is UserSettings.DISPLAY
-        var RoomHeader = sdk.getComponent('rooms.RoomHeader');
+        var SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
         var ChangeDisplayName = sdk.getComponent("views.settings.ChangeDisplayName");
         var ChangePassword = sdk.getComponent("views.settings.ChangePassword");
         var ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
@@ -331,7 +331,7 @@ module.exports = React.createClass({
 
         return (
             <div className="mx_UserSettings">
-                <RoomHeader simpleHeader="Settings" />
+                <SimpleRoomHeader title="Settings"/>
 
                 <GeminiScrollbar className="mx_UserSettings_body" autoshow={true}>
 

src/components/views/rooms/RoomHeader.js

@@ -18,7 +18,6 @@ limitations under the License.
 
 var React = require('react');
 var sdk = require('../../../index');
-var dis = require("../../../dispatcher");
 var MatrixClientPeg = require('../../../MatrixClientPeg');
 var Modal = require("../../../Modal");
 
@@ -49,31 +48,9 @@ module.exports = React.createClass({
         };
     },
 
-    getInitialState: function() {
+    componentDidMount: function() {
-        return {};
+        var cli = MatrixClientPeg.get();
-    },
+        cli.on("RoomState.events", this._onRoomStateEvents);
-
-    componentWillMount: function() {
-        this._recalculateState();
-    },
-
-    componentWillReceiveProps: function(newProps) {
-        if (this.props.room !== newProps.room) {
-            this._recalculateState();
-        }
-    },
-
-    _recalculateState: function() {
-        if (!this.props.room) return;
-        
-        var topic = this.props.room.currentState.getStateEvents('m.room.topic', '');
-        var name = this.props.room.currentState.getStateEvents('m.room.name', '');
-
-        this.setState({
-            name: name ? name.getContent().name : '',
-            defaultName: this.props.room.getDefaultRoomName(MatrixClientPeg.get().credentials.userId),
-            topic: topic ? topic.getContent().topic : '',
-        });        
     },
 
     componentDidUpdate: function() {
@@ -82,12 +59,20 @@ module.exports = React.createClass({
         }
     },
 
-    onNameChanged: function(value) {
+    componentWillUnmount: function() {
-        this.setState({ name : value });
+        var cli = MatrixClientPeg.get();
+        if (cli) {
+            cli.removeListener("RoomState.events", this._onRoomStateEvents);
+        }
     },
 
-    onTopicChanged: function(value) {
+    _onRoomStateEvents: function(event, state) {
-        this.setState({ topic : value });
+        if (!this.props.room || event.getRoomId() != this.props.room.roomId) {
+            return;
+        }
+
+        // redisplay the room name, topic, etc.
+        this.forceUpdate();
     },
 
     onAvatarPickerClick: function(ev) {
@@ -113,35 +98,38 @@ module.exports = React.createClass({
         }).done();
     },    
 
-    getRoomName: function() {
+    /**
-        return this.state.name;
+     * After editing the settings, get the new name for the room
+     *
+     * Returns undefined if we didn't let the user edit the room name
+     */
+    getEditedName: function() {
+        var newName;
+        if (this.refs.nameEditor) {
+            newName = this.refs.nameEditor.getRoomName();
+        }
+        return newName;
     },
 
-    getTopic: function() {
+    /**
-        return this.state.topic;
+     * After editing the settings, get the new topic for the room
+     *
+     * Returns undefined if we didn't let the user edit the room topic
+     */
+    getEditedTopic: function() {
+        var newTopic;
+        if (this.refs.topicEditor) {
+            newTopic = this.refs.topicEditor.getTopic();
+        }
+        return newTopic;
     },
 
     render: function() {
-        var EditableText = sdk.getComponent("elements.EditableText");
         var RoomAvatar = sdk.getComponent("avatars.RoomAvatar");
         var ChangeAvatar = sdk.getComponent("settings.ChangeAvatar");
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
 
         var header;
-        if (this.props.simpleHeader) {
-            var cancel;
-            if (this.props.onCancelClick) {
-                cancel = <img className="mx_RoomHeader_simpleHeaderCancel" src="img/cancel.svg" onClick={ this.props.onCancelClick } alt="Close" width="18" height="18"/>
-            }
-            header =
-                <div className="mx_RoomHeader_wrapper">
-                    <div className="mx_RoomHeader_simpleHeader">
-                        { this.props.simpleHeader }
-                        { cancel }
-                    </div>
-                </div>
-        }
-        else {
         var name = null;
         var searchStatus = null;
         var topic_el = null;
@@ -166,26 +154,13 @@ module.exports = React.createClass({
                 'm.room.name', user_id
             );
 
-                var placeholderName = "Unnamed Room";
-                if (this.state.defaultName && this.state.defaultName !== 'Empty room') {
-                    placeholderName += " (" + this.state.defaultName + ")";
-                }
-
             save_button = <div className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>Save</div>
             cancel_button = <div className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </div>
         }
 
         if (can_set_room_name) {
-                name =
+            var RoomNameEditor = sdk.getComponent("rooms.RoomNameEditor");
-                    <div className="mx_RoomHeader_name">
+            name = <RoomNameEditor ref="nameEditor" room={this.props.room} />
-                        <EditableText
-                             className="mx_RoomHeader_nametext mx_RoomHeader_editable"
-                             placeholderClassName="mx_RoomHeader_placeholder"
-                             placeholder={ placeholderName }
-                             blurToCancel={ false }
-                             onValueChanged={ this.onNameChanged }
-                             initialValue={ this.state.name }/>
-                    </div>
         }
         else {
             var searchStatus;
@@ -225,17 +200,19 @@ module.exports = React.createClass({
         }
 
         if (can_set_room_topic) {
-                topic_el =
+            var RoomTopicEditor = sdk.getComponent("rooms.RoomTopicEditor");
-                    <EditableText 
+            topic_el = <RoomTopicEditor ref="topicEditor" room={this.props.room} />
-                         className="mx_RoomHeader_topic mx_RoomHeader_editable"
-                         placeholderClassName="mx_RoomHeader_placeholder"
-                         placeholder="Add a topic"
-                         blurToCancel={ false }
-                         onValueChanged={ this.onTopicChanged }
-                         initialValue={ this.state.topic }/>
         } else {
-                if (this.state.topic)
+            var topic;
-                    topic_el = <div className="mx_RoomHeader_topic" ref="topic" title={ this.state.topic }>{ this.state.topic }</div>;
+            if (this.props.room) {
+                var ev = this.props.room.currentState.getStateEvents('m.room.topic', '');
+                if (ev) {
+                    topic = ev.getContent().topic;
+                }
+            }
+            if (topic) {
+                topic_el = <div className="mx_RoomHeader_topic" ref="topic" title={ topic }>{ topic }</div>;
+            }
         }
 
         var roomAvatar = null;
@@ -306,8 +283,7 @@ module.exports = React.createClass({
                 {save_button}
                 {cancel_button}
                 {right_row}
-                </div>
+            </div>;
-        }
 
         return (
             <div className={ "mx_RoomHeader " + (this.props.editing ? "mx_RoomHeader_editing" : "") }>

src/components/views/rooms/RoomNameEditor.js

@@ -0,0 +1,63 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+var sdk = require('../../../index');
+var MatrixClientPeg = require('../../../MatrixClientPeg');
+
+module.exports = React.createClass({
+    displayName: 'RoomNameEditor',
+
+    propTypes: {
+        room: React.PropTypes.object.isRequired,
+    },
+
+    componentWillMount: function() {
+        var room = this.props.room;
+        var name = room.currentState.getStateEvents('m.room.name', '');
+        var myId = MatrixClientPeg.get().credentials.userId;
+        var defaultName = room.getDefaultRoomName(myId);
+
+        this._initialName = name ? name.getContent().name : '';
+
+        this._placeholderName = "Unnamed Room";
+        if (defaultName && defaultName !== 'Empty room') {
+            this._placeholderName += " (" + defaultName + ")";
+        }
+    },
+
+    getRoomName: function() {
+        return this.refs.editor.getValue();
+    },
+
+    render: function() {
+        var EditableText = sdk.getComponent("elements.EditableText");
+
+        return (
+                <div className="mx_RoomHeader_name">
+                    <EditableText ref="editor"
+                         className="mx_RoomHeader_nametext mx_RoomHeader_editable"
+                         placeholderClassName="mx_RoomHeader_placeholder"
+                         placeholder={ this._placeholderName }
+                         blurToCancel={ false }
+                         initialValue={ this._initialName }/>
+                </div>
+        );
+    },
+});
+

src/components/views/rooms/RoomTopicEditor.js

@@ -0,0 +1,51 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+var sdk = require('../../../index');
+
+module.exports = React.createClass({
+    displayName: 'RoomTopicEditor',
+
+    propTypes: {
+        room: React.PropTypes.object.isRequired,
+    },
+
+    componentWillMount: function() {
+        var room = this.props.room;
+        var topic = room.currentState.getStateEvents('m.room.topic', '');
+        this._initialTopic = topic ? topic.getContent().topic : '';
+    },
+
+    getTopic: function() {
+        return this.refs.editor.getValue();
+    },
+
+    render: function() {
+        var EditableText = sdk.getComponent("elements.EditableText");
+
+        return (
+                <EditableText ref="editor"
+                     className="mx_RoomHeader_topic mx_RoomHeader_editable"
+                     placeholderClassName="mx_RoomHeader_placeholder"
+                     placeholder="Add a topic"
+                     blurToCancel={ false }
+                     initialValue={ this._initialTopic }/>
+        );
+    },
+});

src/components/views/rooms/SimpleRoomHeader.js

@@ -0,0 +1,44 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+
+/*
+ * A stripped-down room header used for things like the user settings
+ * and room directory.
+ */
+module.exports = React.createClass({
+    displayName: 'SimpleRoomHeader',
+
+    propTypes: {
+        title: React.PropTypes.string,
+    },
+
+    render: function() {
+        return (
+            <div className="mx_RoomHeader" >
+                <div className="mx_RoomHeader_wrapper">
+                    <div className="mx_RoomHeader_simpleHeader">
+                        { this.props.title }
+                    </div>
+                </div>
+            </div>
+        );
+    },
+});
+