Something starting to resemble a Matrix Client

css/molecules/RoomHeader.css

@@ -0,0 +1,6 @@
+.mx_RoomHeader {
+    background-color: #eee;
+    font-weight: bold;
+    height: 1em;
+    padding: 5px;
+}

css/molecules/RoomTile.css

@@ -5,6 +5,17 @@
     margin-top: 1px;
     margin-bottom: 1px;
     padding: 5px;
+    cursor: pointer;
+    border: 2px solid white;
+    transition: background-color 0.1s ease;
+}
+
+.mx_RoomTile.selected {
+    border: 2px inset #eee;
+}
+
+.mx_RoomTile:hover {
+    background-color: #aad;
 }
 
 .mx_RoomTile_name {

css/organisms/RoomList.css

@@ -1,3 +1,8 @@
+.mx_RoomList {
+    display: table-row;
+}
+
 .mx_RoomList ul {
     padding: 0px;
+    margin: 0px;
 }

css/organisms/RoomView.css

@@ -0,0 +1,9 @@
+.mx_RoomView {
+    display: table-cell;
+    padding-left: 5px;
+    width: 100%;
+}
+
+.mx_RoomView ul {
+    padding: 0px;
+}

css/pages/MatrixChat.css

@@ -0,0 +1,3 @@
+.mx_MatrixChat_leftPanel {
+    display: table-cell;
+}

package.json

@@ -18,10 +18,11 @@
     "start": "parallelshell 'npm run start:js' 'npm run start:css'"
   },
   "dependencies": {
-    "react-loader": "^1.4.0",
+    "classnames": "^2.1.2",
     "flux": "^2.0.3",
     "matrix-js-sdk": "0.0.4",
-    "react": "^0.13.0"
+    "react": "^0.13.0",
+    "react-loader": "^1.4.0"
   },
   "devDependencies": {
     "catw": "^1.0.1",

src/atoms/LogoutButton.js

@@ -0,0 +1,19 @@
+var React = require('react');
+
+var mxCliPeg = require("../MatrixClientPeg");
+
+var dis = require("../dispatcher");
+
+module.exports = React.createClass({
+    onClick: function() {
+        dis.dispatch({
+            action: 'logout'
+        });
+    },
+
+    render: function() {
+        return (
+            <button className="mx_LogoutButton" onClick={this.onClick}>Sign out</button>
+        );
+    }
+});

src/molecules/MatrixToolbar.js

@@ -0,0 +1,14 @@
+var React = require('react');
+
+var LogoutButton = require("../atoms/LogoutButton");
+
+module.exports = React.createClass({
+    render: function() {
+        return (
+            <div className="mx_MatrixToolbar">
+                <LogoutButton />
+            </div>
+        );
+    }
+});
+

src/molecules/MessageTile.js

@@ -0,0 +1,13 @@
+var React = require('react');
+
+module.exports = React.createClass({
+    render: function() {
+                //{this.props.mxEvent.getContent().body}
+        return (
+            <div className="mx_MessageTile">
+                {JSON.stringify(this.props.mxEvent.getContent())}
+            </div>
+        );
+    },
+});
+

src/molecules/RoomHeader.js

@@ -3,8 +3,8 @@ var React = require('react');
 module.exports = React.createClass({
     render: function() {
         return (
-            <div>
-                {this.props.event.content.body}
+            <div className="mx_RoomHeader">
+                {this.props.room.name}
             </div>
         );
     },

src/molecules/RoomTile.js

@@ -1,9 +1,23 @@
 var React = require('react');
+var classNames = require('classnames');
+
+var dis = require("../dispatcher");
 
 module.exports = React.createClass({
+    onClick: function() {
+        dis.dispatch({
+            action: 'view_room',
+            room_id: this.props.room.roomId
+        });
+    },
+
     render: function() {
+        var classes = classNames({
+            'mx_RoomTile': true,
+            'selected': this.props.selected
+        });
         return (
-            <div className="mx_RoomTile">
+            <div className={classes} onClick={this.onClick}>
                 <div className="mx_RoomTile_name">{this.props.room.name}</div>
             </div>
         );

src/organisms/RoomList.js

@@ -12,9 +12,11 @@ module.exports = React.createClass({
     },
 
     makeRoomTiles: function() {
+        var that = this;
         return this.state.roomList.map(function(room) {
+            var selected = room.roomId == that.props.selectedRoom;
             return (
-                <RoomTile room={room} key={room.roomId} />
+                <RoomTile room={room} key={room.roomId} selected={selected} />
             );
         });
     },

src/organisms/RoomView.js

@@ -1,23 +1,30 @@
 var React = require('react');
-var Message = require('../molecules/Message');
+var MessageTile = require('../molecules/MessageTile');
+var RoomHeader = require('../molecules/RoomHeader');
+
+var MatrixClientPeg = require("../MatrixClientPeg");
 
 module.exports = React.createClass({
     getInitialState: function() {
         return {
-            messages: [ { foo: "bar"} ]
+            room: MatrixClientPeg.get().getRoom(this.props.room_id)
         }
     },
 
-    render: function() {
-        /*var messageItems = this.state.messages.map(function(ev) {
+    getMessageTiles: function() {
+        return this.state.room.timeline.map(function(mxEv) {
             return (
-                <Message ev={ev} />
+                <MessageTile mxEvent={mxEv} key={mxEv.getId()} />
             );
-        });*/
+        });
+    },
+
+    render: function() {
         return (
-                    //{messageItems}
-            <div>
-                <ul className="message-list" ref="messageList">
+            <div className="mx_RoomView">
+                <RoomHeader room={this.state.room} />
+                <ul>
+                    {this.getMessageTiles()}
                 </ul>
             </div>
         );

src/pages/MatrixChat.js

@@ -2,13 +2,14 @@ var React = require('react');
 
 var RoomList = require('../organisms/RoomList');
 var RoomView = require('../organisms/RoomView');
+var MatrixToolbar = require('../molecules/MatrixToolbar');
 var Loader = require("react-loader");
 
 var Login = require('../templates/Login');
 
 var mxCliPeg = require("../MatrixClientPeg");
 
-//var dis = require("../dispatcher");
+var dis = require("../dispatcher");
 
 module.exports = React.createClass({
     getInitialState: function() {
@@ -19,11 +20,28 @@ module.exports = React.createClass({
     },
 
     componentDidMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
         if (this.state.logged_in) {
             this.startMatrixClient();
         }
     },
 
+    componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
+    },
+
+    onAction: function(payload) {
+        switch (payload.action) {
+            case 'logout':
+                mxCliPeg.replace(null);
+                this.setState({
+                    logged_in: false,
+                    ready: false
+                });
+                break;
+        }
+    },
+
     onLoggedIn: function() {
         this.setState({logged_in: true});
         this.startMatrixClient();
@@ -33,7 +51,11 @@ module.exports = React.createClass({
         var cli = mxCliPeg.get();
         var that = this;
         cli.on('syncComplete', function() {
-            that.setState({ready: true});
+            var firstRoom = null;
+            if (cli.getRooms() && cli.getRooms().length) {
+                firstRoom = cli.getRooms()[0].roomId;
+            }
+            that.setState({ready: true, currentRoom: firstRoom});
         });
         cli.startClient();
     },
@@ -42,8 +64,11 @@ module.exports = React.createClass({
         if (this.state.logged_in && this.state.ready) {
             return (
                 <div>
-                    <RoomList />
-                    <RoomView />
+                    <div className="mx_MatrixChat_leftPanel">
+                        <MatrixToolbar />
+                        <RoomList selectedRoom={this.state.currentRoom} />
+                    </div>
+                    <RoomView room_id={this.state.currentRoom} />
                 </div>
             );
         } else if (this.state.logged_in) {

src/templates/Login.js

@@ -6,8 +6,6 @@ var ServerConfig = require("../molecules/ServerConfig");
 var ProgressBar = require("../molecules/ProgressBar");
 var Loader = require("react-loader");
 
-//var dis = require("../dispatcher");
-
 module.exports = React.createClass({
     getInitialState: function() {
         return {