From 0424ef07b3cb346ff5661830998fb886541b6f4d Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 22 Jun 2015 11:42:09 +0100
Subject: [PATCH] Add member list (that doesn't really update much yet)

---
 css/organisms/RoomView.css              | 19 ++++++++++--
 src/ComponentBroker.js                  |  2 ++
 src/controllers/molecules/MemberTile.js | 10 +++++++
 src/controllers/organisms/MemberList.js | 30 +++++++++++++++++++
 src/views/molecules/MemberTile.js       | 15 ++++++++++
 src/views/organisms/MemberList.js       | 39 +++++++++++++++++++++++++
 src/views/organisms/RoomView.js         | 10 +++++--
 7 files changed, 120 insertions(+), 5 deletions(-)
 create mode 100644 src/controllers/molecules/MemberTile.js
 create mode 100644 src/controllers/organisms/MemberList.js
 create mode 100644 src/views/molecules/MemberTile.js
 create mode 100644 src/views/organisms/MemberList.js

diff --git a/css/organisms/RoomView.css b/css/organisms/RoomView.css
index 2499e3b9..87d94e94 100644
--- a/css/organisms/RoomView.css
+++ b/css/organisms/RoomView.css
@@ -9,14 +9,14 @@
     height: 30px;
 }
 
-.mx_RoomView ul {
+.mx_RoomView .mx_RoomView_MessageList {
     padding: 0px;
     margin: 0px;
     position: absolute;
     top: 35px;
     bottom: 40px;
     left: 0px;
-    right: 0px;
+    right: 150px;
     overflow-y: scroll;
 }
 
@@ -24,6 +24,21 @@
     list-style-type: none;
 }
 
+.mx_RoomView .mx_MemberList {
+    position: absolute;
+    top: 35px;
+    bottom: 40px;
+    right: 0px;
+    width: 150px;
+    margin: 0px;
+    padding: 0px;
+}
+
+.mx_RoomView .mx_MemberList ul {
+    margin: 0px;
+    padding: 0px;
+}
+
 .mx_RoomView .mx_MessageComposer {
     position: absolute;
     bottom: 5px;
diff --git a/src/ComponentBroker.js b/src/ComponentBroker.js
index 7ce0b4b0..260461a0 100644
--- a/src/ComponentBroker.js
+++ b/src/ComponentBroker.js
@@ -37,6 +37,8 @@ require('./views/molecules/RoomHeader');
 require('./views/molecules/MessageComposer');
 require('./views/molecules/ProgressBar');
 require('./views/molecules/ServerConfig');
+require('./views/organisms/MemberList');
+require('./views/molecules/MemberTile');
 require('./views/organisms/RoomList');
 require('./views/organisms/RoomView');
 require('./views/templates/Login');
diff --git a/src/controllers/molecules/MemberTile.js b/src/controllers/molecules/MemberTile.js
new file mode 100644
index 00000000..e23ac290
--- /dev/null
+++ b/src/controllers/molecules/MemberTile.js
@@ -0,0 +1,10 @@
+var dis = require("../../dispatcher");
+
+module.exports = {
+    onClick: function() {
+        dis.dispatch({
+            action: 'view_user',
+            room_id: this.props.member.userId
+        });
+    },
+};
diff --git a/src/controllers/organisms/MemberList.js b/src/controllers/organisms/MemberList.js
new file mode 100644
index 00000000..191db90d
--- /dev/null
+++ b/src/controllers/organisms/MemberList.js
@@ -0,0 +1,30 @@
+var React = require("react");
+var MatrixClientPeg = require("../../MatrixClientPeg");
+
+module.exports = {
+    componentWillMount: function() {
+        var cli = MatrixClientPeg.get();
+        cli.on("RoomState.members", this.onRoomStateMember);
+
+        this.setState({
+            memberDict: cli.getRoom(this.props.roomId).currentState.members
+        });
+    },
+
+    componentWillUnmount: function() {
+        if (MatrixClientPeg.get()) {
+            MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
+        }
+    },
+
+    // Remember to set 'key' on a MemberList to the ID of the room it's for
+    /*componentWillReceiveProps: function(newProps) {
+    },*/
+
+    onRoomStateMember: function(ev, state, member) {
+        this.setState({
+            memberDict: cli.getRoom(this.props.roomId).currentState.members
+        });
+    }
+};
+
diff --git a/src/views/molecules/MemberTile.js b/src/views/molecules/MemberTile.js
new file mode 100644
index 00000000..444970b8
--- /dev/null
+++ b/src/views/molecules/MemberTile.js
@@ -0,0 +1,15 @@
+var React = require('react');
+
+var MemberTileController = require("../../controllers/molecules/MemberTile");
+
+module.exports = React.createClass({
+    displayName: 'MemberTile',
+    mixins: [MemberTileController],
+    render: function() {
+        return (
+            <div className="mx_MemberTile">
+                <div className="mx_MemberTile_name">{this.props.member.name}</div>
+            </div>
+        );
+    }
+});
diff --git a/src/views/organisms/MemberList.js b/src/views/organisms/MemberList.js
new file mode 100644
index 00000000..499cf128
--- /dev/null
+++ b/src/views/organisms/MemberList.js
@@ -0,0 +1,39 @@
+var React = require('react');
+
+var MemberListController = require("../../controllers/organisms/MemberList");
+
+var ComponentBroker = require('../../ComponentBroker');
+
+var MemberTile = ComponentBroker.get("molecules/MemberTile");
+
+
+module.exports = React.createClass({
+    displayName: 'MemberList',
+    mixins: [MemberListController],
+
+    makeMemberTiles: function() {
+        var that = this;
+        return Object.keys(that.state.memberDict).map(function(userId) {
+            var m = that.state.memberDict[userId];
+            return (
+                <li>
+                <MemberTile
+                    member={m}
+                    key={userId}
+                />
+                </li>
+            );
+        });
+    },
+
+    render: function() {
+        return (
+            <div className="mx_MemberList">
+                <ul>
+                    {this.makeMemberTiles()}
+                </ul>
+            </div>
+        );
+    }
+});
+
diff --git a/src/views/organisms/RoomView.js b/src/views/organisms/RoomView.js
index 1610f8bc..1b8bf9da 100644
--- a/src/views/organisms/RoomView.js
+++ b/src/views/organisms/RoomView.js
@@ -4,6 +4,7 @@ var ComponentBroker = require('../../ComponentBroker');
 
 var MessageTile = ComponentBroker.get('molecules/MessageTile');
 var RoomHeader = ComponentBroker.get('molecules/RoomHeader');
+var MemberList = ComponentBroker.get('organisms/MemberList');
 var MessageComposer = ComponentBroker.get('molecules/MessageComposer');
 
 var RoomViewController = require("../../controllers/organisms/RoomView");
@@ -25,9 +26,12 @@ module.exports = React.createClass({
         return (
             <div className="mx_RoomView">
                 <RoomHeader room={this.state.room} />
-                <ul ref="messageList">
-                    {this.getMessageTiles()}
-                </ul>
+                <div className="mx_RoomView_HSplit">
+                    <ul className="mx_RoomView_MessageList" ref="messageList">
+                        {this.getMessageTiles()}
+                    </ul>
+                    <MemberList roomId={this.props.roomId} key={this.props.roomId} />
+                </div>
                 <MessageComposer roomId={this.props.roomId} />
             </div>
         );