Add phases to CreateRoom organism

skins/base/views/organisms/CreateRoom.js

@@ -45,13 +45,29 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        return (
+        var curr_phase = this.state.phase;
-            <div className="mx_CreateRoom">
+        if (curr_phase == this.phases.CREATING) {
-                <label>Room Name <RoomNameTextbox ref="name_textbox" /></label>
+            return (
-                <Presets ref="presets"/>
+                <div>Creating...</div>
-                <UserSelector ref="user_selector"/>
+            );
-                <CreateRoomButton onCreateRoom={this.onCreateRoom} />
+        } else {
-            </div>
+            var error_box = "";
-        );
+            if (curr_phase == this.phases.ERROR) {
+                error_box = (
+                    <div className="mx_Error">
+                        An error occured: {this.state.error_string}
+                    </div>
+                );
+            }
+            return (
+                <div className="mx_CreateRoom">
+                    <label>Room Name <RoomNameTextbox ref="name_textbox" /></label>
+                    <Presets ref="presets"/>
+                    <UserSelector ref="user_selector"/>
+                    <CreateRoomButton onCreateRoom={this.onCreateRoom} />
+                    {error_box}
+                </div>
+            );
+        }
     }
 });

src/controllers/organisms/CreateRoom.js

@@ -24,12 +24,26 @@ module.exports = {
         onRoomCreated: React.PropTypes.func,
     },
 
+    phases: {
+        CONFIG: "CONFIG",
+        CREATING: "CREATING",
+        CREATED: "CREATED",
+        ERROR: "ERROR",
+    },
+
     getDefaultProps: function() {
         return {
             onRoomCreated: function() {},
         };
     },
 
+    getInitialState: function() {
+        return {
+            phase: this.phases.CONFIG,
+            error_string: "",
+        };
+    },
+
     onCreateRoom: function() {
         var options = {};
 
@@ -57,8 +71,22 @@ module.exports = {
 
         var deferred = MatrixClientPeg.get().createRoom(options);
 
-        deferred.done(function () {
+        this.setState({
-            this.props.onRoomCreated();
+            phase: this.phases.CREATING,
+        });
+
+        var self = this;
+
+        deferred.then(function () {
+            self.setState({
+                phase: self.phases.CREATED,
+            });
+            self.props.onRoomCreated();
+        }, function(err) {
+            self.setState({
+                phase: self.phases.ERROR,
+                error_string: err.toString(),
+            });
         });
     }
 };