Display the room list

css/molecules/RoomTile.css

@@ -0,0 +1,18 @@
+.mx_RoomTile {
+    height: 20px;
+    width: 250px;
+    background-color: #ddd;
+    margin-top: 1px;
+    margin-bottom: 1px;
+    padding: 5px;
+}
+
+.mx_RoomTile_name {
+    font-size: 80%;
+    font-weight: bold;
+}
+
+.mx_RoomTile div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

css/organisms/RoomList.css

@@ -0,0 +1,3 @@
+.mx_RoomList ul {
+    padding: 0px;
+}

src/MatrixClientPeg.js

@@ -14,7 +14,6 @@ if (localStorage) {
             accessToken: access_token,
             userId: user_id
         });
-        matrixClient.startClient();
     }
 }
 

src/molecules/RoomTile.js

@@ -3,11 +3,9 @@ var React = require('react');
 module.exports = React.createClass({
     render: function() {
         return (
-            <div>
+            <div className="mx_RoomTile">
-                <ul>
+                <div className="mx_RoomTile_name">{this.props.room.name}</div>
-                </ul>
             </div>
         );
     }
 });
-

src/organisms/RoomList.js

@@ -0,0 +1,32 @@
+var React = require('react');
+
+var MatrixClientPeg = require("../MatrixClientPeg");
+
+var RoomTile = require("../molecules/RoomTile");
+
+module.exports = React.createClass({
+    componentWillMount: function() {
+        var cli = MatrixClientPeg.get();
+
+        this.setState({roomList: cli.getRooms()});
+    },
+
+    makeRoomTiles: function() {
+        return this.state.roomList.map(function(room) {
+            return (
+                <RoomTile room={room} key={room.roomId} />
+            );
+        });
+    },
+
+    render: function() {
+        return (
+            <div className="mx_RoomList">
+                <ul>
+                    {this.makeRoomTiles()}
+                </ul>
+            </div>
+        );
+    }
+});
+

src/pages/MatrixChat.js

@@ -1,7 +1,8 @@
 var React = require('react');
 
-var ThreadSection = require('../organisms/ThreadSection');
+var RoomList = require('../organisms/RoomList');
 var MessageSection = require('../organisms/MessageSection');
+var Loader = require("react-loader");
 
 var Login = require('../templates/Login');
 
@@ -12,22 +13,43 @@ var mxCliPeg = require("../MatrixClientPeg");
 module.exports = React.createClass({
     getInitialState: function() {
         return {
-            logged_in: !!(mxCliPeg.get() && mxCliPeg.get().credentials)
+            logged_in: !!(mxCliPeg.get() && mxCliPeg.get().credentials),
+            ready: false
         };
     },
 
+    componentDidMount: function() {
+        if (this.state.logged_in) {
+            this.startMatrixClient();
+        }
+    },
+
     onLoggedIn: function() {
         this.setState({logged_in: true});
+        this.startMatrixClient();
+    },
+
+    startMatrixClient: function() {
+        var cli = mxCliPeg.get();
+        var that = this;
+        cli.on('syncComplete', function() {
+            that.setState({ready: true});
+        });
+        cli.startClient();
     },
 
     render: function() {
-        if (this.state.logged_in) {
+        if (this.state.logged_in && this.state.ready) {
             return (
                 <div>
-                    <ThreadSection />
+                    <RoomList />
                     <MessageSection />
                 </div>
             );
+        } else if (this.state.logged_in) {
+            return (
+                <Loader />
+            );
         } else {
             return (
                 <Login onLoggedIn={this.onLoggedIn} />