Split out render methods into 'views' leaving UI logic in 'controllers'. Hopefully should make it easier to skin / customise.

src/controllers/molecules/MEmoteTile.js

@@ -0,0 +1,3 @@
+module.exports = {
+};
+

src/controllers/molecules/MTextTile.js

@@ -0,0 +1,3 @@
+module.exports = {
+};
+

src/controllers/molecules/MatrixToolbar.js

@@ -0,0 +1,3 @@
+module.exports = {
+};
+

src/controllers/molecules/MessageComposer.js

@@ -0,0 +1,45 @@
+var MatrixClientPeg = require("../../MatrixClientPeg");
+
+var dis = require("../../dispatcher");
+
+module.exports = {
+    componentDidMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
+    },
+
+    componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
+    },
+
+    onAction: function(payload) {
+        switch (payload.action) {
+            case 'focus_composer':
+                this.refs.textarea.getDOMNode().focus();
+                break;
+        }
+    },
+
+    onKeyDown: function (ev) {
+        if (ev.keyCode == 13) {
+            var contentText = this.refs.textarea.getDOMNode().value;
+
+            var content = null;
+            if (/^\/me /i.test(contentText)) {
+                content = {
+                    msgtype: 'm.emote',
+                    body: contentText.substring(4)
+                };
+            } else {
+                content = {
+                    msgtype: 'm.text',
+                    body: contentText
+                };
+            }
+
+            MatrixClientPeg.get().sendMessage(this.props.roomId, content);
+            this.refs.textarea.getDOMNode().value = '';
+            ev.preventDefault();
+        }
+    },
+};
+

src/controllers/molecules/MessageTile.js

@@ -0,0 +1,3 @@
+module.exports = {
+};
+

src/controllers/molecules/ProgressBar.js

@@ -0,0 +1,6 @@
+module.exports = {
+    propTypes: {
+        value: React.PropTypes.number,
+        max: React.PropTypes.number
+    },
+};

src/controllers/molecules/RoomHeader.js

@@ -0,0 +1,3 @@
+module.exports = {
+};
+

src/controllers/molecules/RoomTile.js

@@ -0,0 +1,10 @@
+var dis = require("../../dispatcher");
+
+module.exports = {
+    onClick: function() {
+        dis.dispatch({
+            action: 'view_room',
+            room_id: this.props.room.roomId
+        });
+    },
+};

src/controllers/molecules/SenderProfile.js

@@ -0,0 +1,3 @@
+module.exports = {
+};
+

src/controllers/molecules/ServerConfig.js

@@ -0,0 +1,44 @@
+var React = require("react");
+
+module.exports = {
+    propTypes: {
+        onHsUrlChanged: React.PropTypes.func,
+        onIsUrlChanged: React.PropTypes.func,
+        default_hs_url: React.PropTypes.string,
+        default_is_url: React.PropTypes.string
+    },
+
+    getDefaultProps: function() {
+        return {
+            onHsUrlChanged: function() {},
+            onIsUrlChanged: function() {},
+            default_hs_url: 'https://matrix.org/',
+            default_is_url: 'https://matrix.org/'
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            hs_url: this.props.default_hs_url,
+            is_url: this.props.default_is_url,
+        }
+    },
+
+    hsChanged: function(ev) {
+        this.setState({hs_url: ev.target.value});
+        this.props.onHsUrlChanged(this.state.hs_url);
+    },
+
+    isChanged: function(ev) {
+        this.setState({is_url: ev.target.value});
+        this.props.onIsUrlChanged(this.state.is_url);
+    },
+
+    getHsUrl: function() {
+        return this.state.hs_url;
+    },
+
+    getIsUrl: function() {
+        return this.state.is_url;
+    },
+};

src/controllers/molecules/UnknownMessageTile.js

@@ -0,0 +1,2 @@
+module.exports = {
+};