factor out room-leaving code into MatrixChat for now, and add a dedicated leave button in to the header bar for now

src/components/structures/MatrixChat.js

@@ -29,6 +29,7 @@ var Login = require("./login/Login");
 var Registration = require("./login/Registration");
 var PostRegistration = require("./login/PostRegistration");
 
+var Modal = require("../../Modal");
 var sdk = require('../../index');
 var MatrixTools = require('../../MatrixTools');
 var linkifyMatrix = require("../../linkify-matrix");
@@ -200,6 +201,36 @@ module.exports = React.createClass({
                     self.setState({errorText: 'Login failed.'});
                 });
 
+                break;
+            case 'leave_room':
+                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+
+                var roomId = payload.room_id;
+                Modal.createDialog(QuestionDialog, {
+                    title: "Leave room",
+                    description: "Are you sure you want to leave the room?",
+                    onFinished: function(should_leave) {
+                        if (should_leave) {
+                            var d = MatrixClientPeg.get().leave(roomId);
+                            
+                            // FIXME: controller shouldn't be loading a view :(
+                            var Loader = sdk.getComponent("elements.Spinner");
+                            var modal = Modal.createDialog(Loader);
+
+                            d.then(function() {
+                                modal.close();
+                                dis.dispatch({action: 'view_next_room'});
+                            }, function(err) {
+                                modal.close();
+                                Modal.createDialog(ErrorDialog, {
+                                    title: "Failed to leave room",
+                                    description: err.toString()
+                                });
+                            });
+                        }
+                    }
+                });
                 break;
             case 'view_room':
                 this.focusComposer = true;

src/components/structures/RoomView.js

@@ -793,6 +793,14 @@ module.exports = React.createClass({
         this.setState(this.getInitialState());
     },
 
+    onLeaveClick: function() {
+        dis.dispatch({
+            action: 'leave_room',
+            room_id: this.props.roomId,
+        });
+        this.props.onFinished();        
+    },
+
     onRejectButtonClicked: function(ev) {
         var self = this;
         this.setState({
@@ -853,7 +861,7 @@ module.exports = React.createClass({
             // XXX: this is a bit of a hack and might possibly cause the video to push out the page anyway
             // but it's better than the video going missing entirely
             if (auxPanelMaxHeight < 50) auxPanelMaxHeight = 50;
-            
+
             video.style.maxHeight = auxPanelMaxHeight + "px";
         }
     },
@@ -1039,7 +1047,7 @@ module.exports = React.createClass({
             return (
                 <div className="mx_RoomView">
                     <RoomHeader ref="header" room={this.state.room} searchInfo={searchInfo} editing={this.state.editingRoomSettings} onSearchClick={this.onSearchClick}
-                        onSettingsClick={this.onSettingsClick} onSaveClick={this.onSaveClick} onCancelClick={this.onCancelClick} />
+                        onSettingsClick={this.onSettingsClick} onSaveClick={this.onSaveClick} onCancelClick={this.onCancelClick} onLeaveClick={this.onLeaveClick} />
                     { fileDropTarget }    
                     <div className="mx_RoomView_auxPanel">
                         <CallView ref="callView" room={this.state.room} ConferenceHandler={this.props.ConferenceHandler}/>

src/components/views/rooms/MemberInfo.js

@@ -226,36 +226,10 @@ module.exports = React.createClass({
         }
     },
 
-    // FIXME: this is horribly duplicated with MemberTile's onLeaveClick.
-    // Not sure what the right solution to this is.
     onLeaveClick: function() {
-        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        dis.dispatch({
-        var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+            action: 'leave_room',
-
+            room_id: this.props.member.roomId,
-        var roomId = this.props.member.roomId;
-        Modal.createDialog(QuestionDialog, {
-            title: "Leave room",
-            description: "Are you sure you want to leave the room?",
-            onFinished: function(should_leave) {
-                if (should_leave) {
-                    var d = MatrixClientPeg.get().leave(roomId);
-                    
-                    // FIXME: controller shouldn't be loading a view :(
-                    var Loader = sdk.getComponent("elements.Spinner");
-                    var modal = Modal.createDialog(Loader);
-
-                    d.then(function() {
-                        modal.close();
-                        dis.dispatch({action: 'view_next_room'});
-                    }, function(err) {
-                        modal.close();
-                        Modal.createDialog(ErrorDialog, {
-                            title: "Failed to leave room",
-                            description: err.toString()
-                        });
-                    });
-                }
-            }
         });
         this.props.onFinished();        
     },

src/components/views/rooms/MemberTile.js

@@ -31,33 +31,11 @@ module.exports = React.createClass({
     },
 
     onLeaveClick: function() {
-        var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+        dis.dispatch({
-
+            action: 'leave_room',
-        var roomId = this.props.member.roomId;
+            room_id: this.props.member.roomId,
-        Modal.createDialog(QuestionDialog, {
-            title: "Leave room",
-            description: "Are you sure you want to leave the room?",
-            onFinished: function(should_leave) {
-                if (should_leave) {
-                    var d = MatrixClientPeg.get().leave(roomId);
-
-                    // FIXME: controller shouldn't be loading a view :(
-                    var Loader = sdk.getComponent("elements.Spinner");
-                    var modal = Modal.createDialog(Loader);
-
-                    d.then(function() {
-                        modal.close();
-                        dis.dispatch({action: 'view_next_room'});
-                    }, function(err) {
-                        modal.close();
-                        Modal.createDialog(ErrorDialog, {
-                            title: "Failed to leave room",
-                            description: err.toString()
-                        });
-                    });
-                }
-            }
         });
+        this.props.onFinished();        
     },
 
     shouldComponentUpdate: function(nextProps, nextState) {

src/components/views/rooms/RoomHeader.js

@@ -35,6 +35,8 @@ module.exports = React.createClass({
         editing: React.PropTypes.bool,
         onSettingsClick: React.PropTypes.func,
         onSaveClick: React.PropTypes.func,
+        onSearchClick: React.PropTypes.func,
+        onLeaveClick: React.PropTypes.func,
     },
 
     getDefaultProps: function() {
@@ -251,6 +253,14 @@ module.exports = React.createClass({
                         </div>;
             }
 
+            var exit_button;
+            if (this.props.onLeaveClick) {
+                exit_button =
+                    <div className="mx_RoomHeader_button mx_RoomHeader_leaveButton">
+                        <img src="img/leave.svg" title="Leave room" alt="Leave room" width="26" height="20" onClick={this.props.onLeaveClick}/>
+                    </div>;
+            }
+
             header =
                 <div className="mx_RoomHeader_wrapper">
                     <div className="mx_RoomHeader_leftRow">
@@ -269,6 +279,7 @@ module.exports = React.createClass({
                         { video_button }
                         { voice_button }
                         { zoom_button }
+                        { exit_button }
                         <div className="mx_RoomHeader_button">
                             <img src="img/search.svg" title="Search" alt="Search" width="21" height="19" onClick={this.props.onSearchClick}/>
                         </div>