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

src/ComponentBroker.js

@@ -1,7 +1,7 @@
 var components = {};
 
 function load(name) {
-    var module = require("./"+name);
+    var module = require("./views/"+name);
     components[name] = module;
     return module;
 };
@@ -23,17 +23,19 @@ module.exports = {
 // otherwise browserify has no way of knowing what module to include
 // Must be in this file (because the require is file-specific) and
 // must be at the end because the components include this file.
-require('./atoms/LogoutButton');
+require('./views/atoms/LogoutButton');
-require('./atoms/MessageTimestamp');
+require('./views/atoms/MessageTimestamp');
-require('./molecules/MatrixToolbar');
+require('./views/molecules/MatrixToolbar');
-require('./molecules/RoomTile');
+require('./views/molecules/RoomTile');
-require('./molecules/MessageTile');
+require('./views/molecules/MessageTile');
-require('./molecules/SenderProfile');
+require('./views/molecules/SenderProfile');
-require('./molecules/UnknownMessageTile');
+require('./views/molecules/UnknownMessageTile');
-require('./molecules/MTextTile');
+require('./views/molecules/MTextTile');
-require('./molecules/MEmoteTile');
+require('./views/molecules/MEmoteTile');
-require('./molecules/RoomHeader');
+require('./views/molecules/RoomHeader');
-require('./molecules/MessageComposer');
+require('./views/molecules/MessageComposer');
-require('./organisms/RoomList');
+require('./views/molecules/ProgressBar');
-require('./organisms/RoomView');
+require('./views/molecules/ServerConfig');
-require('./templates/Login');
+require('./views/organisms/RoomList');
+require('./views/organisms/RoomView');
+require('./views/templates/Login');

src/controllers/atoms/LogoutButton.js

@@ -0,0 +1,9 @@
+var dis = require("../../dispatcher");
+
+module.exports = {
+    onClick: function() {
+        dis.dispatch({
+            action: 'logout'
+        });
+    },
+};

src/controllers/atoms/MessageTimestamp.js

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

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

@@ -1,10 +1,8 @@
-var React = require('react');
+var MatrixClientPeg = require("../../MatrixClientPeg");
 
-var MatrixClientPeg = require("../MatrixClientPeg");
+var dis = require("../../dispatcher");
 
-var dis = require("../dispatcher");
+module.exports = {
-
-module.exports = React.createClass({
     componentDidMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
     },
@@ -43,13 +41,5 @@ module.exports = React.createClass({
             ev.preventDefault();
         }
     },
-
+};
-    render: function() {
-        return (
-            <div className="mx_MessageComposer">
-                <textarea ref="textarea" onKeyDown={this.onKeyDown} />
-            </div>
-        );
-    },
-});
 

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

@@ -1,6 +1,6 @@
-var React = require('react');
+var React = require("react");
 
-module.exports = React.createClass({
+module.exports = {
     propTypes: {
         onHsUrlChanged: React.PropTypes.func,
         onIsUrlChanged: React.PropTypes.func,
@@ -41,21 +41,4 @@ module.exports = React.createClass({
     getIsUrl: function() {
         return this.state.is_url;
     },
-
+};
-    render: function() {
-        return (
-            <div className="HomeServerTextBox">
-                <table className="serverConfig">
-                <tr>
-                <td>Home Server URL</td>
-                <td><input type="text" value={this.state.hs_url} onChange={this.hsChanged} /></td>
-                </tr>
-                <tr>
-                <td>Identity Server URL</td>
-                <td><input type="text" value={this.state.is_url} onChange={this.isChanged} /></td>
-                </tr>
-                </table>
-            </div>
-        );
-    }
-});

src/controllers/molecules/UnknownMessageTile.js

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

src/controllers/organisms/RoomList.js

@@ -1,12 +1,11 @@
-var React = require('react');
+var React = require("react");
+var MatrixClientPeg = require("../../MatrixClientPeg");
 
-var MatrixClientPeg = require("../MatrixClientPeg");
+var ComponentBroker = require('../../ComponentBroker');
-var ComponentBroker = require('../ComponentBroker');
 
 var RoomTile = ComponentBroker.get("molecules/RoomTile");
 
-
+module.exports = {
-module.exports = React.createClass({
     componentWillMount: function() {
         var cli = MatrixClientPeg.get();
         cli.on("Room.timeline", this.onRoomTimeline);
@@ -56,15 +55,5 @@ module.exports = React.createClass({
             );
         });
     },
-
+};
-    render: function() {
-        return (
-            <div className="mx_RoomList">
-                <ul>
-                    {this.makeRoomTiles()}
-                </ul>
-            </div>
-        );
-    }
-});
 

src/controllers/organisms/RoomView.js

@@ -1,14 +1,6 @@
-var React = require('react');
+var MatrixClientPeg = require("../../MatrixClientPeg");
 
-var MatrixClientPeg = require("../MatrixClientPeg");
+module.exports = {
-var ComponentBroker = require('../ComponentBroker');
-
-var MessageTile = ComponentBroker.get('molecules/MessageTile');
-var RoomHeader = ComponentBroker.get('molecules/RoomHeader');
-var MessageComposer = ComponentBroker.get('molecules/MessageComposer');
-
-
-module.exports = React.createClass({
     getInitialState: function() {
         return {
             room: MatrixClientPeg.get().getRoom(this.props.roomId)
@@ -41,26 +33,6 @@ module.exports = React.createClass({
         });
     },
 
-    getMessageTiles: function() {
-        return this.state.room.timeline.map(function(mxEv) {
-            return (
-                <li key={mxEv.getId()}><MessageTile mxEvent={mxEv} /></li>
-            );
-        });
-    },
-
-    render: function() {
-        return (
-            <div className="mx_RoomView">
-                <RoomHeader room={this.state.room} />
-                <ul ref="messageList">
-                    {this.getMessageTiles()}
-                </ul>
-                <MessageComposer roomId={this.props.roomId} />
-            </div>
-        );
-    },
-    
     componentDidMount: function() {
         var messageUl = this.refs.messageList.getDOMNode();
         messageUl.scrollTop = messageUl.scrollHeight;
@@ -72,5 +44,5 @@ module.exports = React.createClass({
             messageUl.scrollTop = messageUl.scrollHeight;
         }
     }
-});
+};
 

src/controllers/pages/MatrixChat.js

@@ -1,20 +1,11 @@
-var React = require('react');
-var ComponentBroker = require('../ComponentBroker');
-
-var RoomList = ComponentBroker.get('organisms/RoomList');
-var RoomView = ComponentBroker.get('organisms/RoomView');
-var MatrixToolbar = ComponentBroker.get('molecules/MatrixToolbar');
-var Login = ComponentBroker.get('templates/Login');
-
 // should be atomised
 var Loader = require("react-loader");
 
+var mxCliPeg = require("../../MatrixClientPeg");
 
-var mxCliPeg = require("../MatrixClientPeg");
+var dis = require("../../dispatcher");
 
-var dis = require("../dispatcher");
+module.exports = {
-
-module.exports = React.createClass({
     getInitialState: function() {
         return {
             logged_in: !!(mxCliPeg.get() && mxCliPeg.get().credentials),
@@ -78,27 +69,5 @@ module.exports = React.createClass({
         });
         cli.startClient();
     },
-
+};
-    render: function() {
-        if (this.state.logged_in && this.state.ready) {
-            return (
-                <div className="mx_MatrixChat">
-                    <div className="mx_MatrixChat_leftPanel">
-                        <MatrixToolbar />
-                        <RoomList selectedRoom={this.state.currentRoom} />
-                    </div>
-                    <RoomView roomId={this.state.currentRoom} key={this.state.currentRoom} />
-                </div>
-            );
-        } else if (this.state.logged_in) {
-            return (
-                <Loader />
-            );
-        } else {
-            return (
-                <Login onLoggedIn={this.onLoggedIn} />
-            );
-        }
-    }
-});
 

src/controllers/templates/Login.js

@@ -1,12 +1,11 @@
-var React = require('react');
+var MatrixClientPeg = require("../../MatrixClientPeg");
-var MatrixClientPeg = require("../MatrixClientPeg");
 var Matrix = require("matrix-js-sdk");
 
-var ServerConfig = require("../molecules/ServerConfig");
+var ComponentBroker = require("../../ComponentBroker");
-var ProgressBar = require("../molecules/ProgressBar");
-var Loader = require("react-loader");
 
-module.exports = React.createClass({
+var ServerConfig = ComponentBroker.get("molecules/ServerConfig");
+
+module.exports = {
     getInitialState: function() {
         return {
             step: 'choose_hs',
@@ -99,29 +98,4 @@ module.exports = React.createClass({
                 );
         }
     },
-
+};
-    loginContent: function() {
-        if (this.state.busy) {
-            return (
-                <Loader />
-            );
-        } else {
-            return (
-                <div>
-                    <h1>Please log in:</h1>
-                    {this.componentForStep(this.state.step)}
-                    <div className="error">{this.state.errorText}</div>
-                </div>
-            );
-        }
-    },
-
-    render: function() {
-        return (
-            <div className="mx_Login">
-            <ProgressBar value={this.state.currentStep} max={this.state.totalSteps} />
-            {this.loginContent()}
-            </div>
-        );
-    }
-});

src/index.js

@@ -1 +1 @@
-module.exports.MatrixChat = require("./pages/MatrixChat");
+module.exports.MatrixChat = require("./views/pages/MatrixChat");

src/views/atoms/LogoutButton.js

@@ -1,13 +1,9 @@
 var React = require('react');
 
-var dis = require("../dispatcher");
+var LogoutButtonController = require("../../controllers/atoms/LogoutButton");
 
 module.exports = React.createClass({
-    onClick: function() {
+    mixins: [LogoutButtonController],
-        dis.dispatch({
-            action: 'logout'
-        });
-    },
 
     render: function() {
         return (

src/views/atoms/MessageTimestamp.js

@@ -1,6 +1,10 @@
 var React = require('react');
 
+var MessageTimestampController = require("../../controllers/atoms/MessageTimestamp");
+
 module.exports = React.createClass({
+    mixins: [MessageTimestampController],
+
     render: function() {
         var date = new Date(this.props.ts);
         return (

src/views/molecules/MEmoteTile.js

@@ -1,6 +1,10 @@
 var React = require('react');
 
+var MEmoteTileController = require("../../controllers/molecules/MEmoteTile");
+
 module.exports = React.createClass({
+    mixins: [MEmoteTileController],
+
     render: function() {
         var mxEvent = this.props.mxEvent;
         var content = mxEvent.getContent();

src/views/molecules/MTextTile.js

@@ -1,6 +1,10 @@
 var React = require('react');
 
+var MTextTileController = require("../../controllers/molecules/MTextTile");
+
 module.exports = React.createClass({
+    mixins: [MTextTileController],
+
     render: function() {
         var content = this.props.mxEvent.getContent();
         return (

src/views/molecules/MatrixToolbar.js

@@ -1,10 +1,14 @@
 var React = require('react');
 
-var ComponentBroker = require('../ComponentBroker');
+var ComponentBroker = require('../../ComponentBroker');
 
 var LogoutButton = ComponentBroker.get("atoms/LogoutButton");
 
+var MatrixToolbarController = require("../../controllers/molecules/MatrixToolbar");
+
 module.exports = React.createClass({
+    mixins: [MatrixToolbarController],
+
     render: function() {
         return (
             <div className="mx_MatrixToolbar">

src/views/molecules/MessageComposer.js

@@ -0,0 +1,16 @@
+var React = require('react');
+
+var MessageComposerController = require("../../controllers/molecules/MessageComposer");
+
+module.exports = React.createClass({
+    mixins: [MessageComposerController],
+
+    render: function() {
+        return (
+            <div className="mx_MessageComposer">
+                <textarea ref="textarea" onKeyDown={this.onKeyDown} />
+            </div>
+        );
+    },
+});
+

src/views/molecules/MessageTile.js

@@ -2,7 +2,7 @@ var React = require('react');
 
 var classNames = require("classnames");
 
-var ComponentBroker = require('../ComponentBroker');
+var ComponentBroker = require('../../ComponentBroker');
 
 var MessageTimestamp = ComponentBroker.get('atoms/MessageTimestamp');
 var SenderProfile = ComponentBroker.get('molecules/SenderProfile');
@@ -14,7 +14,11 @@ var tileTypes = {
     'm.emote': ComponentBroker.get('molecules/MEmoteTile')
 };
 
+var MessageTileController = require("../../controllers/molecules/MessageTile");
+
 module.exports = React.createClass({
+    mixins: [MessageTileController],
+
     render: function() {
         var content = this.props.mxEvent.getContent();
         var msgtype = content.msgtype;

src/views/molecules/ProgressBar.js

@@ -1,10 +1,9 @@
 var React = require('react');
 
+var ProgressBarController = require("./../molecules/ProgressBar");
+
 module.exports = React.createClass({
-    propTypes: {
+    mixins: [ProgressBarController],
-        value: React.PropTypes.number,
-        max: React.PropTypes.number
-    },
 
     render: function() {
         // Would use an HTML5 progress tag but if that doesn't animate if you

src/views/molecules/RoomHeader.js

@@ -1,6 +1,10 @@
 var React = require('react');
 
+var RoomHeaderController = require("../../controllers/molecules/RoomHeader");
+
 module.exports = React.createClass({
+    mixins: [RoomHeaderController],
+
     render: function() {
         return (
             <div className="mx_RoomHeader">

src/views/molecules/RoomTile.js

@@ -1,16 +1,10 @@
 var React = require('react');
 var classNames = require('classnames');
 
-var dis = require("../dispatcher");
+var RoomTileController = require("../../controllers/molecules/RoomTile");
 
 module.exports = React.createClass({
-    onClick: function() {
+    mixins: [RoomTileController],
-        dis.dispatch({
-            action: 'view_room',
-            room_id: this.props.room.roomId
-        });
-    },
-
     render: function() {
         var classes = classNames({
             'mx_RoomTile': true,

src/views/molecules/SenderProfile.js

@@ -1,6 +1,10 @@
 var React = require('react');
 
+var SenderProfileController = require("../../controllers/molecules/SenderProfile");
+
 module.exports = React.createClass({
+    mixins: [SenderProfileController],
+
     render: function() {
         var mxEvent = this.props.mxEvent;
         var name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();

src/views/molecules/ServerConfig.js

@@ -0,0 +1,24 @@
+var React = require('react');
+
+var ServerConfigController = require("../../controllers/molecules/ServerConfig");
+
+module.exports = React.createClass({
+    mixins: [ServerConfigController],
+
+    render: function() {
+        return (
+            <div className="HomeServerTextBox">
+                <table className="serverConfig">
+                <tr>
+                <td>Home Server URL</td>
+                <td><input type="text" value={this.state.hs_url} onChange={this.hsChanged} /></td>
+                </tr>
+                <tr>
+                <td>Identity Server URL</td>
+                <td><input type="text" value={this.state.is_url} onChange={this.isChanged} /></td>
+                </tr>
+                </table>
+            </div>
+        );
+    }
+});

src/views/molecules/UnknownMessageTile.js

@@ -1,6 +1,10 @@
 var React = require('react');
 
+var UnknownMessageTileController = require("../../controllers/molecules/UnknownMessageTile");
+
 module.exports = React.createClass({
+    mixins: [UnknownMessageTileController],
+
     render: function() {
         return (
             <span className="mx_UnknownMessageTile">

src/views/organisms/RoomList.js

@@ -0,0 +1,19 @@
+var React = require('react');
+
+var RoomListController = require("../../controllers/organisms/RoomList");
+
+
+module.exports = React.createClass({
+    mixins: [RoomListController],
+
+    render: function() {
+        return (
+            <div className="mx_RoomList">
+                <ul>
+                    {this.makeRoomTiles()}
+                </ul>
+            </div>
+        );
+    }
+});
+

src/views/organisms/RoomView.js

@@ -0,0 +1,35 @@
+var React = require('react');
+
+var ComponentBroker = require('../../ComponentBroker');
+
+var MessageTile = ComponentBroker.get('molecules/MessageTile');
+var RoomHeader = ComponentBroker.get('molecules/RoomHeader');
+var MessageComposer = ComponentBroker.get('molecules/MessageComposer');
+
+var RoomViewController = require("../../controllers/organisms/RoomView");
+
+
+module.exports = React.createClass({
+    mixins: [RoomViewController],
+
+    getMessageTiles: function() {
+        return this.state.room.timeline.map(function(mxEv) {
+            return (
+                <li key={mxEv.getId()}><MessageTile mxEvent={mxEv} /></li>
+            );
+        });
+    },
+
+    render: function() {
+        return (
+            <div className="mx_RoomView">
+                <RoomHeader room={this.state.room} />
+                <ul ref="messageList">
+                    {this.getMessageTiles()}
+                </ul>
+                <MessageComposer roomId={this.props.roomId} />
+            </div>
+        );
+    },
+});
+

src/views/pages/MatrixChat.js

@@ -0,0 +1,40 @@
+var React = require('react');
+var ComponentBroker = require('../../ComponentBroker');
+
+var RoomList = ComponentBroker.get('organisms/RoomList');
+var RoomView = ComponentBroker.get('organisms/RoomView');
+var MatrixToolbar = ComponentBroker.get('molecules/MatrixToolbar');
+var Login = ComponentBroker.get('templates/Login');
+
+var MatrixChatController = require("../../controllers/pages/MatrixChat");
+
+// should be atomised
+var Loader = require("react-loader");
+
+
+module.exports = React.createClass({
+    mixins: [MatrixChatController],
+
+    render: function() {
+        if (this.state.logged_in && this.state.ready) {
+            return (
+                <div className="mx_MatrixChat">
+                    <div className="mx_MatrixChat_leftPanel">
+                        <MatrixToolbar />
+                        <RoomList selectedRoom={this.state.currentRoom} />
+                    </div>
+                    <RoomView roomId={this.state.currentRoom} key={this.state.currentRoom} />
+                </div>
+            );
+        } else if (this.state.logged_in) {
+            return (
+                <Loader />
+            );
+        } else {
+            return (
+                <Login onLoggedIn={this.onLoggedIn} />
+            );
+        }
+    }
+});
+

src/views/templates/Login.js

@@ -0,0 +1,37 @@
+var React = require('react');
+
+var ComponentBroker = require("../../ComponentBroker");
+
+var ProgressBar = ComponentBroker.get("molecules/ProgressBar");
+var Loader = require("react-loader");
+
+var LoginController = require("../../controllers/templates/Login");
+
+module.exports = React.createClass({
+    mixins: [LoginController],
+
+    loginContent: function() {
+        if (this.state.busy) {
+            return (
+                <Loader />
+            );
+        } else {
+            return (
+                <div>
+                    <h1>Please log in:</h1>
+                    {this.componentForStep(this.state.step)}
+                    <div className="error">{this.state.errorText}</div>
+                </div>
+            );
+        }
+    },
+
+    render: function() {
+        return (
+            <div className="mx_Login">
+            <ProgressBar value={this.state.currentStep} max={this.state.totalSteps} />
+            {this.loginContent()}
+            </div>
+        );
+    }
+});