From 70133ae661d3e9603c8390bbdd5d36a1db3a6d13 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Tue, 29 Mar 2016 12:51:46 +0100
Subject: [PATCH] Factor out SimpleRoomHeader

Start cleaning up RoomHeader by factoring out a separate SimpleRoomHeader.
---
 src/component-index.js                        |   1 +
 src/components/structures/CreateRoom.js       |   6 +-
 src/components/structures/UserSettings.js     |   6 +-
 src/components/views/rooms/RoomHeader.js      | 319 +++++++++---------
 .../views/rooms/SimpleRoomHeader.js           |  45 +++
 5 files changed, 206 insertions(+), 171 deletions(-)
 create mode 100644 src/components/views/rooms/SimpleRoomHeader.js

diff --git a/src/component-index.js b/src/component-index.js
index e15f0e917f..d11ee7711a 100644
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -90,6 +90,7 @@ module.exports.components['views.rooms.RoomSettings'] = require('./components/vi
 module.exports.components['views.rooms.RoomTile'] = require('./components/views/rooms/RoomTile');
 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');
diff --git a/src/components/structures/CreateRoom.js b/src/components/structures/CreateRoom.js
index 116202d324..36cc11575b 100644
--- a/src/components/structures/CreateRoom.js
+++ b/src/components/structures/CreateRoom.js
@@ -249,13 +249,15 @@ 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>
+                    Create room
+                </SimpleRoomHeader>
                 <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 />
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index bea55ae8a8..6ac8d06f0d 100644
--- a/src/components/structures/UserSettings.js
+++ b/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,9 @@ module.exports = React.createClass({
 
         return (
             <div className="mx_UserSettings">
-                <RoomHeader simpleHeader="Settings" />
+                <SimpleRoomHeader>
+                    Settings
+                </SimpleRoomHeader>
 
                 <GeminiScrollbar className="mx_UserSettings_body" autoshow={true}>
 
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 9a132a73f5..a99c278ea1 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -128,187 +128,172 @@ module.exports = React.createClass({
         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"/>
+        var name = null;
+        var searchStatus = null;
+        var topic_el = null;
+        var cancel_button = null;
+        var save_button = null;
+        var settings_button = null;
+        if (this.props.editing) {
+
+            // calculate permissions.  XXX: this should be done on mount or something
+            var user_id = MatrixClientPeg.get().credentials.userId;
+
+            var can_set_room_name = this.props.room.currentState.maySendStateEvent(
+                'm.room.name', user_id
+            );
+            var can_set_room_avatar = this.props.room.currentState.maySendStateEvent(
+                'm.room.avatar', user_id
+            );
+            var can_set_room_topic = this.props.room.currentState.maySendStateEvent(
+                'm.room.topic', user_id
+            );
+            var can_set_room_name = this.props.room.currentState.maySendStateEvent(
+                'm.room.name', user_id
+            );
+
+            var placeholderName = "Unnamed Room";
+            if (this.state.defaultName && this.state.defaultName !== 'Empty room') {
+                placeholderName += " (" + this.state.defaultName + ")";
             }
-            header =
-                <div className="mx_RoomHeader_wrapper">
-                    <div className="mx_RoomHeader_simpleHeader">
-                        { this.props.simpleHeader }
-                        { cancel }
-                    </div>
+
+            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 =
+                <div className="mx_RoomHeader_name">
+                    <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 name = null;
-            var searchStatus = null;
-            var topic_el = null;
-            var cancel_button = null;
-            var save_button = null;
-            var settings_button = null;
-            if (this.props.editing) {
-
-                // calculate permissions.  XXX: this should be done on mount or something
-                var user_id = MatrixClientPeg.get().credentials.userId;
-
-                var can_set_room_name = this.props.room.currentState.maySendStateEvent(
-                    'm.room.name', user_id
-                );
-                var can_set_room_avatar = this.props.room.currentState.maySendStateEvent(
-                    'm.room.avatar', user_id
-                );
-                var can_set_room_topic = this.props.room.currentState.maySendStateEvent(
-                    'm.room.topic', user_id
-                );
-                var can_set_room_name = this.props.room.currentState.maySendStateEvent(
-                    '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>
+            var searchStatus;
+            // don't display the search count until the search completes and
+            // gives us a valid (possibly zero) searchCount.
+            if (this.props.searchInfo && this.props.searchInfo.searchCount !== undefined && this.props.searchInfo.searchCount !== null) {
+                searchStatus = <div className="mx_RoomHeader_searchStatus">&nbsp;(~{ this.props.searchInfo.searchCount } results)</div>;
             }
 
-            if (can_set_room_name) {
-                name =
-                    <div className="mx_RoomHeader_name">
-                        <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;
-                // don't display the search count until the search completes and
-                // gives us a valid (possibly zero) searchCount.
-                if (this.props.searchInfo && this.props.searchInfo.searchCount !== undefined && this.props.searchInfo.searchCount !== null) {
-                    searchStatus = <div className="mx_RoomHeader_searchStatus">&nbsp;(~{ this.props.searchInfo.searchCount } results)</div>;
-                }
-
-                // XXX: this is a bit inefficient - we could just compare room.name for 'Empty room'...
-                var settingsHint = false;
-                var members = this.props.room ? this.props.room.getJoinedMembers() : undefined;
-                if (members) {
-                    if (members.length === 1 && members[0].userId === MatrixClientPeg.get().credentials.userId) {
-                        var name = this.props.room.currentState.getStateEvents('m.room.name', '');
-                        if (!name || !name.getContent().name) {
-                            settingsHint = true;
-                        }
+            // XXX: this is a bit inefficient - we could just compare room.name for 'Empty room'...
+            var settingsHint = false;
+            var members = this.props.room ? this.props.room.getJoinedMembers() : undefined;
+            if (members) {
+                if (members.length === 1 && members[0].userId === MatrixClientPeg.get().credentials.userId) {
+                    var name = this.props.room.currentState.getStateEvents('m.room.name', '');
+                    if (!name || !name.getContent().name) {
+                        settingsHint = true;
                     }
                 }
+            }
 
-                var roomName = 'Join Room';
-                if (this.props.oobData && this.props.oobData.name) {
-                    roomName = this.props.oobData.name;
-                } else if (this.props.room) {
-                    roomName = this.props.room.name;
-                }
+            var roomName = 'Join Room';
+            if (this.props.oobData && this.props.oobData.name) {
+                roomName = this.props.oobData.name;
+            } else if (this.props.room) {
+                roomName = this.props.room.name;
+            }
 
-                name =
-                    <div className="mx_RoomHeader_name" onClick={this.props.onSettingsClick}>
-                        <div className={ "mx_RoomHeader_nametext " + (settingsHint ? "mx_RoomHeader_settingsHint" : "") } title={ roomName }>{ roomName }</div>
-                        { searchStatus }
-                        <div className="mx_RoomHeader_settingsButton" title="Settings">
-                            <TintableSvg src="img/settings.svg" width="12" height="12"/>
-                        </div>
+            name =
+                <div className="mx_RoomHeader_name" onClick={this.props.onSettingsClick}>
+                    <div className={ "mx_RoomHeader_nametext " + (settingsHint ? "mx_RoomHeader_settingsHint" : "") } title={ roomName }>{ roomName }</div>
+                    { searchStatus }
+                    <div className="mx_RoomHeader_settingsButton" title="Settings">
+                        <TintableSvg src="img/settings.svg" width="12" height="12"/>
                     </div>
-            }
-
-            if (can_set_room_topic) {
-                topic_el =
-                    <EditableText 
-                         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)
-                    topic_el = <div className="mx_RoomHeader_topic" ref="topic" title={ this.state.topic }>{ this.state.topic }</div>;
-            }
-
-            var roomAvatar = null;
-            if (can_set_room_avatar) {
-                roomAvatar = (
-                    <div className="mx_RoomHeader_avatarPicker">
-                        <div onClick={ this.onAvatarPickerClick }>
-                            <ChangeAvatar ref="changeAvatar" room={this.props.room} showUploadSection={false} width={48} height={48} />
-                        </div>
-                        <div className="mx_RoomHeader_avatarPicker_edit">
-                            <label htmlFor="avatarInput" ref="file_label">
-                                <img src="img/camera.svg"
-                                    alt="Upload avatar" title="Upload avatar"
-                                    width="17" height="15" />
-                            </label>
-                            <input id="avatarInput" type="file" onChange={ this.onAvatarSelected }/>
-                        </div>
-                    </div>
-                );
-            }
-            else if (this.props.room || (this.props.oobData && this.props.oobData.name)) {
-                roomAvatar = (
-                    <div onClick={this.props.onSettingsClick}>
-                        <RoomAvatar room={this.props.room} width={48} height={48} oobData={this.props.oobData} />
-                    </div>
-                );
-            }
-
-            var leave_button;
-            if (this.props.onLeaveClick) {
-                leave_button =
-                    <div className="mx_RoomHeader_button mx_RoomHeader_leaveButton" onClick={this.props.onLeaveClick} title="Leave room">
-                        <TintableSvg src="img/leave.svg" width="26" height="20"/>
-                    </div>;
-            }
-
-            var forget_button;
-            if (this.props.onForgetClick) {
-                forget_button =
-                    <div className="mx_RoomHeader_button mx_RoomHeader_leaveButton" onClick={this.props.onForgetClick} title="Forget room">
-                        <TintableSvg src="img/leave.svg" width="26" height="20"/>
-                    </div>;
-            }
-
-            var right_row;
-            if (!this.props.editing) {
-                right_row = 
-                    <div className="mx_RoomHeader_rightRow">
-                        { forget_button }
-                        { leave_button }
-                        <div className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title="Search">
-                            <TintableSvg src="img/search.svg" width="21" height="19"/>
-                        </div>
-                    </div>;
-            }
-
-            header =
-                <div className="mx_RoomHeader_wrapper">
-                    <div className="mx_RoomHeader_leftRow">
-                        <div className="mx_RoomHeader_avatar">
-                            { roomAvatar }
-                        </div>
-                        <div className="mx_RoomHeader_info">
-                            { name }
-                            { topic_el }
-                        </div>
-                    </div>
-                    {save_button}
-                    {cancel_button}
-                    {right_row}
                 </div>
         }
 
+        if (can_set_room_topic) {
+            topic_el =
+                <EditableText 
+                     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)
+                topic_el = <div className="mx_RoomHeader_topic" ref="topic" title={ this.state.topic }>{ this.state.topic }</div>;
+        }
+
+        var roomAvatar = null;
+        if (can_set_room_avatar) {
+            roomAvatar = (
+                <div className="mx_RoomHeader_avatarPicker">
+                    <div onClick={ this.onAvatarPickerClick }>
+                        <ChangeAvatar ref="changeAvatar" room={this.props.room} showUploadSection={false} width={48} height={48} />
+                    </div>
+                    <div className="mx_RoomHeader_avatarPicker_edit">
+                        <label htmlFor="avatarInput" ref="file_label">
+                            <img src="img/camera.svg"
+                                alt="Upload avatar" title="Upload avatar"
+                                width="17" height="15" />
+                        </label>
+                        <input id="avatarInput" type="file" onChange={ this.onAvatarSelected }/>
+                    </div>
+                </div>
+            );
+        }
+        else if (this.props.room || (this.props.oobData && this.props.oobData.name)) {
+            roomAvatar = (
+                <div onClick={this.props.onSettingsClick}>
+                    <RoomAvatar room={this.props.room} width={48} height={48} oobData={this.props.oobData} />
+                </div>
+            );
+        }
+
+        var leave_button;
+        if (this.props.onLeaveClick) {
+            leave_button =
+                <div className="mx_RoomHeader_button mx_RoomHeader_leaveButton" onClick={this.props.onLeaveClick} title="Leave room">
+                    <TintableSvg src="img/leave.svg" width="26" height="20"/>
+                </div>;
+        }
+
+        var forget_button;
+        if (this.props.onForgetClick) {
+            forget_button =
+                <div className="mx_RoomHeader_button mx_RoomHeader_leaveButton" onClick={this.props.onForgetClick} title="Forget room">
+                    <TintableSvg src="img/leave.svg" width="26" height="20"/>
+                </div>;
+        }
+
+        var right_row;
+        if (!this.props.editing) {
+            right_row = 
+                <div className="mx_RoomHeader_rightRow">
+                    { forget_button }
+                    { leave_button }
+                    <div className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title="Search">
+                        <TintableSvg src="img/search.svg" width="21" height="19"/>
+                    </div>
+                </div>;
+        }
+
+        header =
+            <div className="mx_RoomHeader_wrapper">
+                <div className="mx_RoomHeader_leftRow">
+                    <div className="mx_RoomHeader_avatar">
+                        { roomAvatar }
+                    </div>
+                    <div className="mx_RoomHeader_info">
+                        { name }
+                        { topic_el }
+                    </div>
+                </div>
+                {save_button}
+                {cancel_button}
+                {right_row}
+            </div>;
+
         return (
             <div className={ "mx_RoomHeader " + (this.props.editing ? "mx_RoomHeader_editing" : "") }>
                 { header }
diff --git a/src/components/views/rooms/SimpleRoomHeader.js b/src/components/views/rooms/SimpleRoomHeader.js
new file mode 100644
index 0000000000..bd4ed23ebe
--- /dev/null
+++ b/src/components/views/rooms/SimpleRoomHeader.js
@@ -0,0 +1,45 @@
+/*
+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',
+
+    render: function() {
+        var cancel;
+        var header = (
+            <div className="mx_RoomHeader_wrapper">
+                <div className="mx_RoomHeader_simpleHeader">
+                    { this.props.children }
+                </div>
+            </div>
+        );
+
+        return (
+            <div className="mx_RoomHeader" >
+                { header }
+            </div>
+        );
+    },
+});
+