Something starting to resemble a Matrix Client

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) {