From aa1b763518036c6a5cd611cf8d7300791ec22ae7 Mon Sep 17 00:00:00 2001
From: Erik Johnston <erikj@matrix.org>
Date: Thu, 16 Jul 2015 17:20:03 +0100
Subject: [PATCH] Make CreateRoom remember what the values of its fields were.
 Remove some fairly pointless atoms

---
 .../base/views/atoms/create_room/RoomAlias.js |  5 ++-
 .../atoms/create_room/RoomNameTextbox.js      | 36 ----------------
 .../base/views/atoms/create_room/RoomTopic.js | 37 -----------------
 skins/base/views/molecules/UserSelector.js    |  2 +-
 skins/base/views/organisms/CreateRoom.js      | 32 +++++++++++++--
 .../atoms/create_room/RoomAlias.js            | 14 +++----
 .../atoms/create_room/RoomNameTextbox.js      | 41 -------------------
 .../atoms/create_room/RoomTopic.js            | 41 -------------------
 src/controllers/molecules/UserSelector.js     | 30 ++++----------
 src/controllers/organisms/CreateRoom.js       | 20 ++++-----
 10 files changed, 55 insertions(+), 203 deletions(-)
 delete mode 100644 skins/base/views/atoms/create_room/RoomNameTextbox.js
 delete mode 100644 skins/base/views/atoms/create_room/RoomTopic.js
 delete mode 100644 src/controllers/atoms/create_room/RoomNameTextbox.js
 delete mode 100644 src/controllers/atoms/create_room/RoomTopic.js

diff --git a/skins/base/views/atoms/create_room/RoomAlias.js b/skins/base/views/atoms/create_room/RoomAlias.js
index fd0789b9..a59a8e69 100644
--- a/skins/base/views/atoms/create_room/RoomAlias.js
+++ b/skins/base/views/atoms/create_room/RoomAlias.js
@@ -25,7 +25,7 @@ module.exports = React.createClass({
     mixins: [RoomAliasController],
 
     onValueChanged: function(ev) {
-        this.setState({room_alias: ev.target.value})
+        this.props.onChange(ev.target.value);
     },
 
     onFocus: function(ev) {
@@ -72,7 +72,8 @@ module.exports = React.createClass({
     render: function() {
         return (
             <input type="text" className="mx_RoomAlias" placeholder="Alias (optional)"
-                onChange={this.onValueChanged} onFocus={this.onFocus} onBlur={this.onBlur}/>
+                onChange={this.onValueChanged} onFocus={this.onFocus} onBlur={this.onBlur}
+                value={this.props.alias}/>
         );
     }
 });
diff --git a/skins/base/views/atoms/create_room/RoomNameTextbox.js b/skins/base/views/atoms/create_room/RoomNameTextbox.js
deleted file mode 100644
index 038d39a9..00000000
--- a/skins/base/views/atoms/create_room/RoomNameTextbox.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
-Copyright 2015 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 RoomNameTextboxController = require("../../../../../src/controllers/atoms/create_room/RoomNameTextbox");
-
-module.exports = React.createClass({
-    displayName: 'RoomNameTextbox',
-    mixins: [RoomNameTextboxController],
-
-    onValueChanged: function(ev) {
-        this.setState({room_name: ev.target.value})
-    },
-
-    render: function() {
-        return (
-            <input type="text" className="mx_RoomNameTextbox" placeholder="Name" onChange={this.onValueChanged}/>
-        );
-    }
-});
diff --git a/skins/base/views/atoms/create_room/RoomTopic.js b/skins/base/views/atoms/create_room/RoomTopic.js
deleted file mode 100644
index 134833f9..00000000
--- a/skins/base/views/atoms/create_room/RoomTopic.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
-Copyright 2015 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 RoomTopicController = require("../../../../../src/controllers/atoms/create_room/RoomTopic");
-
-module.exports = React.createClass({
-    displayName: 'RoomTopic',
-    mixins: [RoomTopicController],
-
-    onValueChanged: function(ev) {
-        this.setState({room_topic: ev.target.value})
-    },
-
-    render: function() {
-        return (
-            <textarea className="mx_RoomTopic" placeholder="Description" onChange={this.onValueChanged}>
-            </textarea>
-        );
-    }
-});
diff --git a/skins/base/views/molecules/UserSelector.js b/skins/base/views/molecules/UserSelector.js
index 7517e29d..81afa5f4 100644
--- a/skins/base/views/molecules/UserSelector.js
+++ b/skins/base/views/molecules/UserSelector.js
@@ -32,7 +32,7 @@ module.exports = React.createClass({
         return (
             <div>
                 <ul className="mx_UserSelector_UserIdList" ref="list">
-                    {this.state.selected_users.map(function(user_id, i) {
+                    {this.props.selected_users.map(function(user_id, i) {
                         return <li key={user_id}>{user_id}</li>
                     })}
                 </ul>
diff --git a/skins/base/views/organisms/CreateRoom.js b/skins/base/views/organisms/CreateRoom.js
index 7d2e3549..fa6d55f2 100644
--- a/skins/base/views/organisms/CreateRoom.js
+++ b/skins/base/views/organisms/CreateRoom.js
@@ -97,6 +97,30 @@ module.exports = React.createClass({
         });
     },
 
+    onTopicChange: function(ev) {
+        this.setState({
+            topic: ev.target.value,
+        });
+    },
+
+    onNameChange: function(ev) {
+        this.setState({
+            room_name: ev.target.value,
+        });
+    },
+
+    onInviteChanged: function(invited_users) {
+        this.setState({
+            invited_users: invited_users,
+        });
+    },
+
+    onAliasChanged: function(alias) {
+        this.setState({
+            alias: alias
+        })
+    },
+
     render: function() {
         var curr_phase = this.state.phase;
         if (curr_phase == this.phases.CREATING) {
@@ -114,10 +138,10 @@ module.exports = React.createClass({
             }
             return (
                 <div className="mx_CreateRoom">
-                    <RoomNameTextbox ref="name_textbox" /> <br />
-                    <RoomTopic ref="topic"/> <br />
-                    <RoomAlias ref="alias"/> <br />
-                    <UserSelector ref="user_selector"/> <br />
+                    <input type="text" ref="room_name" value={this.state.room_name} onChange={this.onNameChange} placeholder="Name"/> <br />
+                    <textarea ref="topic" value={this.state.topic} onChange={this.onTopicChange} placeholder="Description"/> <br />
+                    <RoomAlias ref="alias" alias={this.state.alias} onChange={this.onAliasChanged}/> <br />
+                    <UserSelector ref="user_selector" selected_users={this.state.invited_users} onChange={this.onInviteChanged}/> <br />
                     <Presets ref="presets" onChange={this.onPresetChanged} preset={this.state.preset}/> <br />
                     <label><input type="checkbox" ref="is_private" checked={this.state.is_private} onChange={this.onPrivateChanged}/> Make this room private</label>
                     <label><input type="checkbox" ref="share_history" checked={this.state.share_history} onChange={this.onShareHistoryChanged}/> Share message history with new users</label>
diff --git a/src/controllers/atoms/create_room/RoomAlias.js b/src/controllers/atoms/create_room/RoomAlias.js
index 2496179a..4b268e90 100644
--- a/src/controllers/atoms/create_room/RoomAlias.js
+++ b/src/controllers/atoms/create_room/RoomAlias.js
@@ -23,23 +23,19 @@ module.exports = {
         // Specifying a homeserver will make magical things happen when you,
         // e.g. start typing in the room alias box.
         homeserver: React.PropTypes.string,
-        default_alias: React.PropTypes.string
+        alias: React.PropTypes.string,
+        onChange: React.PropTypes.func,
     },
 
     getDefaultProps: function() {
         return {
-            default_alias: '',
+            onChange: function() {},
+            alias: '',
         };
     },
 
-    getInitialState: function() {
-        return {
-            room_alias: this.props.default_alias,
-        }
-    },
-
     getAliasLocalpart: function() {
-        var room_alias = this.state.room_alias;
+        var room_alias = this.props.alias;
 
         if (room_alias && this.props.homeserver) {
             var suffix = ":" + this.props.homeserver;
diff --git a/src/controllers/atoms/create_room/RoomNameTextbox.js b/src/controllers/atoms/create_room/RoomNameTextbox.js
deleted file mode 100644
index e78692d9..00000000
--- a/src/controllers/atoms/create_room/RoomNameTextbox.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
-Copyright 2015 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');
-
-module.exports = {
-    propTypes: {
-        default_name: React.PropTypes.string
-    },
-
-    getDefaultProps: function() {
-        return {
-            default_name: '',
-        };
-    },
-
-    getInitialState: function() {
-        return {
-            room_name: this.props.default_name,
-        }
-    },
-
-    getName: function() {
-        return this.state.room_name;
-    },
-};
diff --git a/src/controllers/atoms/create_room/RoomTopic.js b/src/controllers/atoms/create_room/RoomTopic.js
deleted file mode 100644
index cbd21b9b..00000000
--- a/src/controllers/atoms/create_room/RoomTopic.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
-Copyright 2015 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');
-
-module.exports = {
-    propTypes: {
-        default_topic: React.PropTypes.string
-    },
-
-    getDefaultProps: function() {
-        return {
-            default_topic: '',
-        };
-    },
-
-    getInitialState: function() {
-        return {
-            room_topic: this.props.default_topic,
-        }
-    },
-
-    getTopic: function() {
-        return this.state.room_topic;
-    },
-};
diff --git a/src/controllers/molecules/UserSelector.js b/src/controllers/molecules/UserSelector.js
index e7e05096..b3a60440 100644
--- a/src/controllers/molecules/UserSelector.js
+++ b/src/controllers/molecules/UserSelector.js
@@ -20,38 +20,26 @@ var React = require('react');
 
 module.exports = {
     propTypes: {
-        initially_selected: React.PropTypes.arrayOf(React.PropTypes.string),
+        onChange: React.PropTypes.func,
+        selected_users: React.PropTypes.arrayOf(React.PropTypes.string),
     },
 
     getDefaultProps: function() {
         return {
-            initially_selected: [],
+            onChange: function() {},
+            selected: [],
         };
     },
 
-    getInitialState: function() {
-        return {
-            selected_users: this.props.initially_selected,
-        }
-    },
-
     addUser: function(user_id) {
-        if (this.state.selected_users.indexOf(user_id == -1)) {
-            this.setState({
-                selected_users: this.state.selected_users.concat([user_id]),
-            });
+        if (this.props.selected_users.indexOf(user_id == -1)) {
+            this.props.onChange(this.props.selected_users.concat([user_id]));
         }
     },
 
     removeUser: function(user_id) {
-        this.setState({
-            selected_users: this.state.selected_users.filter(function(e) {
-                return e != user_id;
-            }),
-        });
+        this.props.onChange(this.state.selected_users.filter(function(e) {
+            return e != user_id;
+        }));
     },
-
-    getUserIds: function() {
-        return this.state.selected_users;
-    }
 };
diff --git a/src/controllers/organisms/CreateRoom.js b/src/controllers/organisms/CreateRoom.js
index 6ea2c600..6ba8247f 100644
--- a/src/controllers/organisms/CreateRoom.js
+++ b/src/controllers/organisms/CreateRoom.js
@@ -44,21 +44,22 @@ module.exports = {
             error_string: "",
             is_private: true,
             share_history: false,
-            default_preset: PresetValues.PrivateChat
+            default_preset: PresetValues.PrivateChat,
+            topic: '',
+            room_name: '',
+            invited_users: [],
         };
     },
 
     onCreateRoom: function() {
         var options = {};
 
-        var room_name = this.getName();
-        if (room_name) {
-            options.name = room_name;
+        if (this.state.room_name) {
+            options.name = this.state.room_name;
         }
 
-        var room_topic = this.getTopic();
-        if (room_name) {
-            options.topic = room_topic;
+        if (this.state.topic) {
+            options.topic = this.state.topic;
         }
 
         var preset = this.getPreset();
@@ -83,10 +84,7 @@ module.exports = {
             }
         }
 
-        var invited_users = this.getInvitedUsers();
-        if (invited_users) {
-            options.invite = invited_users;
-        }
+        options.invite = this.state.invited_users;
 
         var alias = this.getAliasLocalpart();
         if (alias) {