From c708976635805b216834f0dd5d05fb5e690db899 Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Thu, 16 Jul 2015 13:49:34 +0100 Subject: [PATCH 1/8] Wire up CreateRoom to UI. --- .../base/views/atoms/create_room/RoomAlias.js | 72 +++++++++++++++++++ .../atoms/create_room/RoomNameTextbox.js | 2 +- .../base/views/atoms/create_room/RoomTopic.js | 37 ++++++++++ skins/base/views/molecules/DirectoryMenu.js | 6 +- skins/base/views/organisms/CreateRoom.js | 12 ++-- skins/base/views/pages/MatrixChat.js | 26 +++++-- src/ComponentBroker.js | 2 + .../atoms/create_room/RoomAlias.js | 41 +++++++++++ .../atoms/create_room/RoomTopic.js | 41 +++++++++++ src/controllers/organisms/CreateRoom.js | 4 +- src/controllers/pages/MatrixChat.js | 11 +++ 11 files changed, 241 insertions(+), 13 deletions(-) create mode 100644 skins/base/views/atoms/create_room/RoomAlias.js create mode 100644 skins/base/views/atoms/create_room/RoomTopic.js create mode 100644 src/controllers/atoms/create_room/RoomAlias.js create 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 new file mode 100644 index 00000000..f60ec6b3 --- /dev/null +++ b/skins/base/views/atoms/create_room/RoomAlias.js @@ -0,0 +1,72 @@ +/* +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 RoomAliasController = require("../../../../../src/controllers/atoms/create_room/RoomAlias"); + +module.exports = React.createClass({ + displayName: 'RoomAlias', + mixins: [RoomAliasController], + + onValueChanged: function(ev) { + this.setState({room_alias: ev.target.value}) + }, + + onFocus: function(ev) { + var target = ev.target; + var curr_val = ev.target.value; + + if (curr_val == "") { + target.value = "#:example.com"; + setTimeout(function() { + target.setSelectionRange(1, 1); + }, 0); + } else { + setTimeout(function() { + target.setSelectionRange( + curr_val.startsWith("#") ? 1 : 0, + curr_val.endsWith(":example.com") ? (target.value.length - ":example.com".length) : target.value.length + ); + }, 0); + } + }, + + onBlur: function(ev) { + var curr_val = ev.target.value; + + if (curr_val == "#:example.com") { + ev.target.value = ""; + return; + } + + if (curr_val != "") { + var new_val = ev.target.value; + if (!curr_val.startsWith("#")) new_val = "#" + new_val; + if (!curr_val.endsWith(":example.com")) new_val = new_val + ":example.com"; + ev.target.value = new_val; + } + }, + + render: function() { + return ( + + ); + } +}); diff --git a/skins/base/views/atoms/create_room/RoomNameTextbox.js b/skins/base/views/atoms/create_room/RoomNameTextbox.js index c358a14c..038d39a9 100644 --- a/skins/base/views/atoms/create_room/RoomNameTextbox.js +++ b/skins/base/views/atoms/create_room/RoomNameTextbox.js @@ -30,7 +30,7 @@ module.exports = React.createClass({ render: function() { return ( - + ); } }); diff --git a/skins/base/views/atoms/create_room/RoomTopic.js b/skins/base/views/atoms/create_room/RoomTopic.js new file mode 100644 index 00000000..134833f9 --- /dev/null +++ b/skins/base/views/atoms/create_room/RoomTopic.js @@ -0,0 +1,37 @@ +/* +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 ( + + ); + } +}); diff --git a/skins/base/views/molecules/DirectoryMenu.js b/skins/base/views/molecules/DirectoryMenu.js index f3b9e592..60b5542d 100644 --- a/skins/base/views/molecules/DirectoryMenu.js +++ b/skins/base/views/molecules/DirectoryMenu.js @@ -33,11 +33,15 @@ module.exports = React.createClass({ dis.dispatch({action: 'view_user_settings'}); }, + onCreateRoomClick: function() { + dis.dispatch({action: 'view_create_room'}); + }, + render: function() { return (
-
+
diff --git a/skins/base/views/organisms/CreateRoom.js b/skins/base/views/organisms/CreateRoom.js index 36f6e466..d7e84ccc 100644 --- a/skins/base/views/organisms/CreateRoom.js +++ b/skins/base/views/organisms/CreateRoom.js @@ -24,6 +24,8 @@ var ComponentBroker = require('../../../../src/ComponentBroker'); var CreateRoomButton = ComponentBroker.get("atoms/create_room/CreateRoomButton"); var RoomNameTextbox = ComponentBroker.get("atoms/create_room/RoomNameTextbox"); +var RoomTopic = ComponentBroker.get("atoms/create_room/RoomTopic"); +var RoomAlias = ComponentBroker.get("atoms/create_room/RoomAlias"); var Presets = ComponentBroker.get("atoms/create_room/Presets"); var UserSelector = ComponentBroker.get("molecules/UserSelector"); @@ -61,10 +63,12 @@ module.exports = React.createClass({ } return (
- - - - +
+
+
+
+
+
{error_box}
); diff --git a/skins/base/views/pages/MatrixChat.js b/skins/base/views/pages/MatrixChat.js index 27d1a115..4ab0e649 100644 --- a/skins/base/views/pages/MatrixChat.js +++ b/skins/base/views/pages/MatrixChat.js @@ -25,28 +25,44 @@ var RightPanel = ComponentBroker.get('organisms/RightPanel'); var Login = ComponentBroker.get('templates/Login'); var UserSettings = ComponentBroker.get('organisms/UserSettings'); var Register = ComponentBroker.get('templates/Register'); +var CreateRoom = ComponentBroker.get('organisms/CreateRoom'); var MatrixChatController = require("../../../../src/controllers/pages/MatrixChat"); // should be atomised var Loader = require("react-loader"); +var dis = require("../../../../src/dispatcher"); + module.exports = React.createClass({ displayName: 'MatrixChat', mixins: [MatrixChatController], + onRoomCreated: function(room_id) { + dis.dispatch({ + action: "view_room", + room_id: room_id, + }); + }, + render: function() { if (this.state.logged_in && this.state.ready) { var page_element; var right_panel = ""; - if (this.state.page_type == this.PageTypes.RoomView) { - page_element = - right_panel = - } else if (this.state.page_type == this.PageTypes.UserSettings) { - page_element = + switch (this.state.page_type) { + case this.PageTypes.RoomView: + page_element = + right_panel = + break; + case this.PageTypes.UserSettings: + page_element = + break; + case this.PageTypes.CreateRoom: + page_element = + break; } return ( diff --git a/src/ComponentBroker.js b/src/ComponentBroker.js index dfbcf2e2..58e8f2ee 100644 --- a/src/ComponentBroker.js +++ b/src/ComponentBroker.js @@ -63,6 +63,8 @@ require('../skins/base/views/atoms/EnableNotificationsButton'); require('../skins/base/views/atoms/MessageTimestamp'); require('../skins/base/views/atoms/create_room/CreateRoomButton'); require('../skins/base/views/atoms/create_room/RoomNameTextbox'); +require('../skins/base/views/atoms/create_room/RoomTopic'); +require('../skins/base/views/atoms/create_room/RoomAlias'); require('../skins/base/views/atoms/create_room/Presets'); require('../skins/base/views/atoms/EditableText'); require('../skins/base/views/molecules/MatrixToolbar'); diff --git a/src/controllers/atoms/create_room/RoomAlias.js b/src/controllers/atoms/create_room/RoomAlias.js new file mode 100644 index 00000000..804b0b29 --- /dev/null +++ b/src/controllers/atoms/create_room/RoomAlias.js @@ -0,0 +1,41 @@ +/* +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_alias: React.PropTypes.string + }, + + getDefaultProps: function() { + return { + default_alias: '', + }; + }, + + getInitialState: function() { + return { + room_alias: this.props.default_alias, + } + }, + + getAlias: function() { + return this.state.room_alias; + }, +}; diff --git a/src/controllers/atoms/create_room/RoomTopic.js b/src/controllers/atoms/create_room/RoomTopic.js new file mode 100644 index 00000000..cbd21b9b --- /dev/null +++ b/src/controllers/atoms/create_room/RoomTopic.js @@ -0,0 +1,41 @@ +/* +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/organisms/CreateRoom.js b/src/controllers/organisms/CreateRoom.js index c2112ce5..048f3679 100644 --- a/src/controllers/organisms/CreateRoom.js +++ b/src/controllers/organisms/CreateRoom.js @@ -77,11 +77,11 @@ module.exports = { var self = this; - deferred.then(function () { + deferred.then(function (resp) { self.setState({ phase: self.phases.CREATED, }); - self.props.onRoomCreated(); + self.props.onRoomCreated(resp.room_id); }, function(err) { self.setState({ phase: self.phases.ERROR, diff --git a/src/controllers/pages/MatrixChat.js b/src/controllers/pages/MatrixChat.js index 9367872b..26bc6cf6 100644 --- a/src/controllers/pages/MatrixChat.js +++ b/src/controllers/pages/MatrixChat.js @@ -32,6 +32,11 @@ module.exports = { PageTypes: { RoomView: "room_view", UserSettings: "user_settings", + CreateRoom: "create_room", + }, + + AuxPanel: { + RoomSettings: "room_settings", }, getInitialState: function() { @@ -39,6 +44,7 @@ module.exports = { logged_in: !!(MatrixClientPeg.get() && MatrixClientPeg.get().credentials), ready: false, page_type: this.PageTypes.RoomView, + aux_panel: null, }; }, @@ -143,6 +149,11 @@ module.exports = { page_type: this.PageTypes.UserSettings, }); break; + case 'view_create_room': + this.setState({ + page_type: this.PageTypes.CreateRoom, + }); + break; } }, From cd26d1323f9f7f13b7ef2d2763ae515d63e56891 Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Thu, 16 Jul 2015 15:55:46 +0100 Subject: [PATCH 2/8] Wire together checkboxes and presets and use new /createRoom api --- skins/base/views/atoms/create_room/Presets.js | 9 +-- skins/base/views/organisms/CreateRoom.js | 58 ++++++++++++++++++- src/controllers/atoms/create_room/Presets.js | 25 +++++++- .../atoms/create_room/RoomAlias.js | 12 +++- src/controllers/organisms/CreateRoom.js | 33 ++++++++++- 5 files changed, 124 insertions(+), 13 deletions(-) diff --git a/skins/base/views/atoms/create_room/Presets.js b/skins/base/views/atoms/create_room/Presets.js index 83fe61bd..04e7d34d 100644 --- a/skins/base/views/atoms/create_room/Presets.js +++ b/skins/base/views/atoms/create_room/Presets.js @@ -25,14 +25,15 @@ module.exports = React.createClass({ mixins: [PresetsController], onValueChanged: function(ev) { - this.setState({preset: ev.target.value}) + this.setState({preset: ev.target.value}, this.props.onChange); }, render: function() { return ( - + + + ); } diff --git a/skins/base/views/organisms/CreateRoom.js b/skins/base/views/organisms/CreateRoom.js index d7e84ccc..ce12630b 100644 --- a/skins/base/views/organisms/CreateRoom.js +++ b/skins/base/views/organisms/CreateRoom.js @@ -22,6 +22,8 @@ var CreateRoomController = require("../../../../src/controllers/organisms/Create var ComponentBroker = require('../../../../src/ComponentBroker'); +var PresetValues = require('../../../../src/controllers/atoms/create_room/Presets').Presets; + var CreateRoomButton = ComponentBroker.get("atoms/create_room/CreateRoomButton"); var RoomNameTextbox = ComponentBroker.get("atoms/create_room/RoomNameTextbox"); var RoomTopic = ComponentBroker.get("atoms/create_room/RoomTopic"); @@ -42,10 +44,57 @@ module.exports = React.createClass({ return this.refs.name_textbox.getName(); }, + getTopic: function() { + return this.refs.topic.getTopic(); + }, + + getAliasLocalpart: function() { + return this.refs.alias.getAliasLocalpart(); + }, + getInvitedUsers: function() { return this.refs.user_selector.getUserIds(); }, + onPresetChanged: function() { + var preset = this.refs.presets.getPreset(); + switch (preset) { + case PresetValues.PrivateChat: + this.setState({ + preset: preset, + is_private: true, + share_history: false, + }); + break; + case PresetValues.PublicChat: + this.setState({ + preset: preset, + is_private: false, + share_history: true, + }); + break; + case PresetValues.Custom: + this.setState({ + preset: preset, + }); + break; + } + }, + + onPrivateChanged: function(ev) { + this.setState({ + preset: PresetValues.Custom, + is_private: ev.target.checked, + }); + }, + + onShareHistoryChanged: function(ev) { + this.setState({ + preset: PresetValues.Custom, + share_history: ev.target.checked, + }); + }, + render: function() { var curr_phase = this.state.phase; if (curr_phase == this.phases.CREATING) { @@ -64,10 +113,13 @@ module.exports = React.createClass({ return (

-
-
-
+
+

+
+ + +
{error_box}
diff --git a/src/controllers/atoms/create_room/Presets.js b/src/controllers/atoms/create_room/Presets.js index 5ff7327e..976c88db 100644 --- a/src/controllers/atoms/create_room/Presets.js +++ b/src/controllers/atoms/create_room/Presets.js @@ -18,20 +18,39 @@ limitations under the License. var React = require('react'); +var Presets = { + PrivateChat: "private_chat", + PublicChat: "public_chat", + Custom: "custom", +}; + module.exports = { propTypes: { - default_preset: React.PropTypes.string + onChange: React.PropTypes.func, + default_preset: React.PropTypes.string, + preset: React.PropTypes.string }, + Presets: Presets, + getDefaultProps: function() { return { - default_preset: 'private_chat', + onChange: function() {}, + default_preset: Presets.PrivateChat, }; }, getInitialState: function() { return { - preset: this.props.default_preset, + preset: this.props.preset || this.props.default_preset, + } + }, + + componentWillReceiveProps: function(new_props) { + if (new_props.preset) { + this.setState({ + preset: new_props.preset + }); } }, diff --git a/src/controllers/atoms/create_room/RoomAlias.js b/src/controllers/atoms/create_room/RoomAlias.js index 804b0b29..7e3e38a5 100644 --- a/src/controllers/atoms/create_room/RoomAlias.js +++ b/src/controllers/atoms/create_room/RoomAlias.js @@ -35,7 +35,15 @@ module.exports = { } }, - getAlias: function() { - return this.state.room_alias; + getAliasLocalpart: function() { + var room_alias = this.state.room_alias; + + if (room_alias) { + if (room_alias.startsWith("#") && room_alias.endsWith("example.com")) { + room_alias = room_alias.slice(1, -":example.com".length); + } + } + + return room_alias; }, }; diff --git a/src/controllers/organisms/CreateRoom.js b/src/controllers/organisms/CreateRoom.js index 048f3679..6ea2c600 100644 --- a/src/controllers/organisms/CreateRoom.js +++ b/src/controllers/organisms/CreateRoom.js @@ -18,6 +18,7 @@ limitations under the License. var React = require("react"); var MatrixClientPeg = require("../../MatrixClientPeg"); +var PresetValues = require('../atoms/create_room/Presets').Presets; module.exports = { propTypes: { @@ -41,6 +42,9 @@ module.exports = { return { phase: this.phases.CONFIG, error_string: "", + is_private: true, + share_history: false, + default_preset: PresetValues.PrivateChat }; }, @@ -52,9 +56,31 @@ module.exports = { options.name = room_name; } + var room_topic = this.getTopic(); + if (room_name) { + options.topic = room_topic; + } + var preset = this.getPreset(); if (preset) { - options.preset = preset; + if (preset != PresetValues.Custom) { + options.preset = preset; + } else { + options.initial_state = [ + { + type: "m.room.join_rules", + content: { + "join_rules": this.state.is_private ? "invite" : "public" + } + }, + { + type: "m.room.history_visibility", + content: { + "history_visibility": this.state.share_history ? "shared" : "invited" + } + }, + ]; + } } var invited_users = this.getInvitedUsers(); @@ -62,6 +88,11 @@ module.exports = { options.invite = invited_users; } + var alias = this.getAliasLocalpart(); + if (alias) { + options.room_alias_name = alias; + } + var cli = MatrixClientPeg.get(); if (!cli) { // TODO: Error. From 95968bf619e0783cc195d932c2be843bfc66ba3a Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Thu, 16 Jul 2015 16:14:55 +0100 Subject: [PATCH 3/8] Make server_name magix in RoomAlias optional --- .../base/views/atoms/create_room/RoomAlias.js | 48 +++++++++++-------- .../atoms/create_room/RoomAlias.js | 8 ++-- 2 files changed, 32 insertions(+), 24 deletions(-) diff --git a/skins/base/views/atoms/create_room/RoomAlias.js b/skins/base/views/atoms/create_room/RoomAlias.js index f60ec6b3..fd0789b9 100644 --- a/skins/base/views/atoms/create_room/RoomAlias.js +++ b/skins/base/views/atoms/create_room/RoomAlias.js @@ -32,34 +32,40 @@ module.exports = React.createClass({ var target = ev.target; var curr_val = ev.target.value; - if (curr_val == "") { - target.value = "#:example.com"; - setTimeout(function() { - target.setSelectionRange(1, 1); - }, 0); - } else { - setTimeout(function() { - target.setSelectionRange( - curr_val.startsWith("#") ? 1 : 0, - curr_val.endsWith(":example.com") ? (target.value.length - ":example.com".length) : target.value.length - ); - }, 0); + if (this.props.homeserver) { + if (curr_val == "") { + setTimeout(function() { + target.value = "#:" + this.props.homeserver; + target.setSelectionRange(1, 1); + }, 0); + } else { + var suffix = ":" + this.props.homeserver; + setTimeout(function() { + target.setSelectionRange( + curr_val.startsWith("#") ? 1 : 0, + curr_val.endsWith(suffix) ? (target.value.length - suffix.length) : target.value.length + ); + }, 0); + } } }, onBlur: function(ev) { var curr_val = ev.target.value; - if (curr_val == "#:example.com") { - ev.target.value = ""; - return; - } + if (this.props.homeserver) { + if (curr_val == "#:" + this.props.homeserver) { + ev.target.value = ""; + return; + } - if (curr_val != "") { - var new_val = ev.target.value; - if (!curr_val.startsWith("#")) new_val = "#" + new_val; - if (!curr_val.endsWith(":example.com")) new_val = new_val + ":example.com"; - ev.target.value = new_val; + if (curr_val != "") { + var new_val = ev.target.value; + var suffix = ":" + this.props.homeserver; + if (!curr_val.startsWith("#")) new_val = "#" + new_val; + if (!curr_val.endsWith(suffix)) new_val = new_val + suffix; + ev.target.value = new_val; + } } }, diff --git a/src/controllers/atoms/create_room/RoomAlias.js b/src/controllers/atoms/create_room/RoomAlias.js index 7e3e38a5..6aff8947 100644 --- a/src/controllers/atoms/create_room/RoomAlias.js +++ b/src/controllers/atoms/create_room/RoomAlias.js @@ -20,6 +20,7 @@ var React = require('react'); module.exports = { propTypes: { + homeserver: React.PropTypes.string, default_alias: React.PropTypes.string }, @@ -38,9 +39,10 @@ module.exports = { getAliasLocalpart: function() { var room_alias = this.state.room_alias; - if (room_alias) { - if (room_alias.startsWith("#") && room_alias.endsWith("example.com")) { - room_alias = room_alias.slice(1, -":example.com".length); + if (room_alias && this.props.homeserver) { + var suffix = ":" + this.props.homeserver; + if (room_alias.startsWith("#") && room_alias.endsWith(suffix)) { + room_alias = room_alias.slice(1, -suffix.length); } } From ebedf0b907a92163509759367f7a3bce96741f13 Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Thu, 16 Jul 2015 16:17:29 +0100 Subject: [PATCH 4/8] Add comment about RoomAlias magic --- src/controllers/atoms/create_room/RoomAlias.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/controllers/atoms/create_room/RoomAlias.js b/src/controllers/atoms/create_room/RoomAlias.js index 6aff8947..2496179a 100644 --- a/src/controllers/atoms/create_room/RoomAlias.js +++ b/src/controllers/atoms/create_room/RoomAlias.js @@ -20,6 +20,8 @@ var React = require('react'); module.exports = { propTypes: { + // 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 }, From 47f4c0dfff712624f783c5cc3090a0c7f2b03be8 Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Thu, 16 Jul 2015 16:20:00 +0100 Subject: [PATCH 5/8] Use Loader --- skins/base/views/organisms/CreateRoom.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/skins/base/views/organisms/CreateRoom.js b/skins/base/views/organisms/CreateRoom.js index ce12630b..7d2e3549 100644 --- a/skins/base/views/organisms/CreateRoom.js +++ b/skins/base/views/organisms/CreateRoom.js @@ -31,6 +31,8 @@ var RoomAlias = ComponentBroker.get("atoms/create_room/RoomAlias"); var Presets = ComponentBroker.get("atoms/create_room/Presets"); var UserSelector = ComponentBroker.get("molecules/UserSelector"); +var Loader = require("react-loader"); + module.exports = React.createClass({ displayName: 'CreateRoom', @@ -99,7 +101,7 @@ module.exports = React.createClass({ var curr_phase = this.state.phase; if (curr_phase == this.phases.CREATING) { return ( -
Creating...
+ ); } else { var error_box = ""; From aa1b763518036c6a5cd611cf8d7300791ec22ae7 Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Thu, 16 Jul 2015 17:20:03 +0100 Subject: [PATCH 6/8] 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 ( + 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 ( - - ); - } -}); 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 ( - - ); - } -}); 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 (
    - {this.state.selected_users.map(function(user_id, i) { + {this.props.selected_users.map(function(user_id, i) { return
  • {user_id}
    • })}
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 (
-
-
-
-
+
+