From 971a7c113370f5f25d8efb7342f65a396a4b266b Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 12 Jun 2015 14:59:33 +0100
Subject: [PATCH] Display the room list

---
 css/molecules/RoomTile.css                    | 18 +++++++++++
 css/organisms/RoomList.css                    |  3 ++
 src/MatrixClientPeg.js                        |  1 -
 .../RoomTile.js}                              |  6 ++--
 src/organisms/RoomList.js                     | 32 +++++++++++++++++++
 src/pages/MatrixChat.js                       | 30 ++++++++++++++---
 6 files changed, 81 insertions(+), 9 deletions(-)
 create mode 100644 css/molecules/RoomTile.css
 create mode 100644 css/organisms/RoomList.css
 rename src/{organisms/ThreadSection.js => molecules/RoomTile.js} (55%)
 create mode 100644 src/organisms/RoomList.js

diff --git a/css/molecules/RoomTile.css b/css/molecules/RoomTile.css
new file mode 100644
index 0000000000..e50ab7b040
--- /dev/null
+++ b/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;
+}
diff --git a/css/organisms/RoomList.css b/css/organisms/RoomList.css
new file mode 100644
index 0000000000..40d3752698
--- /dev/null
+++ b/css/organisms/RoomList.css
@@ -0,0 +1,3 @@
+.mx_RoomList ul {
+    padding: 0px;
+}
diff --git a/src/MatrixClientPeg.js b/src/MatrixClientPeg.js
index eed8093adb..ee417174c9 100644
--- a/src/MatrixClientPeg.js
+++ b/src/MatrixClientPeg.js
@@ -14,7 +14,6 @@ if (localStorage) {
             accessToken: access_token,
             userId: user_id
         });
-        matrixClient.startClient();
     }
 }
 
diff --git a/src/organisms/ThreadSection.js b/src/molecules/RoomTile.js
similarity index 55%
rename from src/organisms/ThreadSection.js
rename to src/molecules/RoomTile.js
index 0a80ef8c0a..09a781abd4 100644
--- a/src/organisms/ThreadSection.js
+++ b/src/molecules/RoomTile.js
@@ -3,11 +3,9 @@ var React = require('react');
 module.exports = React.createClass({
     render: function() {
         return (
-            <div>
-                <ul>
-                </ul>
+            <div className="mx_RoomTile">
+                <div className="mx_RoomTile_name">{this.props.room.name}</div>
             </div>
         );
     }
 });
-
diff --git a/src/organisms/RoomList.js b/src/organisms/RoomList.js
new file mode 100644
index 0000000000..a2d18ac227
--- /dev/null
+++ b/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>
+        );
+    }
+});
+
diff --git a/src/pages/MatrixChat.js b/src/pages/MatrixChat.js
index 2b639d196f..f72526a1c4 100644
--- a/src/pages/MatrixChat.js
+++ b/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} />