Add member list (that doesn't really update much yet)

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;

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');

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
+        });
+    },
+};

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
+        });
+    }
+};
+

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>
+        );
+    }
+});

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>
+        );
+    }
+});
+

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