From fca65a8cdbeee3708a1c8d80fbe341f9b5c645b4 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 6 Oct 2015 15:09:42 +0100
Subject: [PATCH] Show invited members separately.

May not be the final look.

Fixes #6
---
 .../vector/views/organisms/MemberList.js      | 30 +++++++++++++++----
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/skins/vector/views/organisms/MemberList.js b/src/skins/vector/views/organisms/MemberList.js
index b525c6bef..06aa3ba62 100644
--- a/src/skins/vector/views/organisms/MemberList.js
+++ b/src/skins/vector/views/organisms/MemberList.js
@@ -33,11 +33,14 @@ module.exports = React.createClass({
         return { editing: false };
     },
 
-    makeMemberTiles: function() {
+    makeMemberTiles: function(membership) {
         var MemberTile = sdk.getComponent("molecules.MemberTile");
 
         var self = this;
-        return Object.keys(self.state.memberDict).map(function(userId) {
+        return Object.keys(self.state.memberDict).filter(function(userId) {
+            var m = self.state.memberDict[userId];
+            return m.membership == membership;
+        }).map(function(userId) {
             var m = self.state.memberDict[userId];
             return (
                 <MemberTile key={userId} member={m} ref={userId} />
@@ -87,17 +90,32 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        var invitedSection = null;
+        var invitedMemberTiles = this.makeMemberTiles('invite');
+        if (invitedMemberTiles.length > 0) {
+            invitedSection = (
+                <div>
+                    <h2>Invited</h2>
+                    <div className="mx_MemberList_wrapper">
+                        {invitedMemberTiles}
+                    </div>
+                </div>
+            );
+        }
         return (
             <div className="mx_MemberList">
                 <div className="mx_MemberList_chevron">
                     <img src="img/chevron.png" width="24" height="13"/>
                 </div>
                 <div className="mx_MemberList_border">
-                    <h2>Members</h2>
-                    <div className="mx_MemberList_wrapper">
-                        {this.makeMemberTiles()}
-                        {this.inviteTile()}
+                    <div>
+                        <h2>Members</h2>
+                        <div className="mx_MemberList_wrapper">
+                            {this.makeMemberTiles('join')}
+                        </div>
                     </div>
+                    {invitedSection}
+                    {this.inviteTile()}
                 </div>
             </div>
         );