Factor out presence text. Do prep work for displaying 3pid invites on memberlist.

Factored out presence to PresenceLabel.

src/component-index.js

@@ -64,6 +64,7 @@ module.exports.components['views.rooms.MemberInfo'] = require('./components/view
 module.exports.components['views.rooms.MemberList'] = require('./components/views/rooms/MemberList');
 module.exports.components['views.rooms.MemberTile'] = require('./components/views/rooms/MemberTile');
 module.exports.components['views.rooms.MessageComposer'] = require('./components/views/rooms/MessageComposer');
+module.exports.components['views.rooms.PresenceLabel'] = require('./components/views/rooms/PresenceLabel');
 module.exports.components['views.rooms.RoomHeader'] = require('./components/views/rooms/RoomHeader');
 module.exports.components['views.rooms.RoomList'] = require('./components/views/rooms/RoomList');
 module.exports.components['views.rooms.RoomPreviewBar'] = require('./components/views/rooms/RoomPreviewBar');

src/components/views/rooms/MemberList.js

@@ -229,7 +229,8 @@ module.exports = React.createClass({
         var MemberTile = sdk.getComponent("rooms.MemberTile");
 
         var self = this;
-        return self.state.members.filter(function(userId) {
+
+        var memberList = self.state.members.filter(function(userId) {
             var m = self.memberDict[userId];
             return m.membership == membership;
         }).map(function(userId) {
@@ -238,6 +239,33 @@ module.exports = React.createClass({
                 <MemberTile key={userId} member={m} ref={userId} />
             );
         });
+
+        if (membership === "invite") {
+            // include 3pid invites (m.room.third_party_invite) state events.
+            // The HS may have already converted these into m.room.member invites so
+            // we shouldn't add them if the 3pid invite state key (token) is in the
+            // member invite (content.third_party_invite.signed.token)
+            var room = MatrixClientPeg.get().getRoom(this.props.roomId);
+            if (room) {
+                room.currentState.getStateEvents("m.room.third_party_invite").forEach(
+                function(e) {
+                    // discard all invites which have a m.room.member event since we've
+                    // already added them.
+                    var memberEvent = room.currentState.getInviteForThreePidToken(e.getStateKey());
+                    if (memberEvent) {
+                        console.log("Found match => %s", memberEvent.getStateKey());
+                        return;
+                    }
+                    console.log("Display match => ");
+                    /*
+                    memberList.push(
+                        <MemberTile key={e.getStateKey()} ref={e.getStateKey()} member={}/>
+                    ) */
+                })
+            }
+        }
+
+        return memberList;
     },
 
     onPopulateInvite: function(e) {

src/components/views/rooms/MemberTile.js

@@ -26,6 +26,11 @@ var Modal = require("../../../Modal");
 module.exports = React.createClass({
     displayName: 'MemberTile',
 
+    propTypes: {
+        member: React.PropTypes.any.isRequired, // RoomMember
+        onFinished: React.PropTypes.func
+    },
+
     getInitialState: function() {
         return {};
     },
@@ -71,37 +76,6 @@ module.exports = React.createClass({
         });
     },
 
-    getDuration: function(time) {
-        if (!time) return;
-        var t = parseInt(time / 1000);
-        var s = t % 60;
-        var m = parseInt(t / 60) % 60;
-        var h = parseInt(t / (60 * 60)) % 24;
-        var d = parseInt(t / (60 * 60 * 24));
-        if (t < 60) {
-            if (t < 0) {
-                return "0s";
-            }
-            return s + "s";
-        }
-        if (t < 60 * 60) {
-            return m + "m";
-        }
-        if (t < 24 * 60 * 60) {
-            return h + "h";
-        }
-        return d + "d ";
-    },
-
-    getPrettyPresence: function(user) {
-        if (!user) return "Unknown";
-        var presence = user.presence;
-        if (presence === "online") return "Online";
-        if (presence === "unavailable") return "Idle"; // XXX: is this actually right?
-        if (presence === "offline") return "Offline";
-        return "Unknown";
-    },
-
     getPowerLabel: function() {
         var label = this.props.member.userId;
         if (this.state.isTargetMod) {
@@ -111,6 +85,8 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        var PresenceLabel = sdk.getComponent("rooms.PresenceLabel");
+
         this.member_last_modified_time = this.props.member.getLastModifiedTime();
         if (this.props.member.user) {
             this.user_last_modified_time = this.props.member.user.getLastModifiedTime();
@@ -144,22 +120,17 @@ module.exports = React.createClass({
 
         var nameEl;
         if (this.state.hover) {
-            var presence;
             // FIXME: make presence data update whenever User.presence changes...
             var active = this.props.member.user ? ((Date.now() - (this.props.member.user.lastPresenceTs - this.props.member.user.lastActiveAgo)) || -1) : -1;
-            if (active >= 0) {
-                presence = <div className="mx_MemberTile_presence">{ this.getPrettyPresence(this.props.member.user) } { this.getDuration(active) } ago</div>;
-            }
-            else {
-                presence = <div className="mx_MemberTile_presence">{ this.getPrettyPresence(this.props.member.user) }</div>;
-            }
 
-            nameEl =
+            nameEl = (
                 <div className="mx_MemberTile_details">
                     <img className="mx_MemberTile_chevron" src="img/member_chevron.png" width="8" height="12"/>
                     <div className="mx_MemberTile_userId">{ name }</div>
-                    { presence }
+                    <PresenceLabel activeAgo={active}
+                        presenceState={this.props.member.user ? this.props.member.user.presence : null} />
                 </div>
+            );
         }
         else {
             nameEl =

src/components/views/rooms/PresenceLabel.js

@@ -0,0 +1,84 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+
+var MatrixClientPeg = require('../../../MatrixClientPeg');
+var sdk = require('../../../index');
+
+module.exports = React.createClass({
+    displayName: 'PresenceLabel',
+
+    propTypes: {
+        activeAgo: React.PropTypes.number,
+        presenceState: React.PropTypes.string
+    },
+
+    getDefaultProps: function() {
+        return {
+            ago: -1,
+            presenceState: null
+        };
+    },
+
+    getDuration: function(time) {
+        if (!time) return;
+        var t = parseInt(time / 1000);
+        var s = t % 60;
+        var m = parseInt(t / 60) % 60;
+        var h = parseInt(t / (60 * 60)) % 24;
+        var d = parseInt(t / (60 * 60 * 24));
+        if (t < 60) {
+            if (t < 0) {
+                return "0s";
+            }
+            return s + "s";
+        }
+        if (t < 60 * 60) {
+            return m + "m";
+        }
+        if (t < 24 * 60 * 60) {
+            return h + "h";
+        }
+        return d + "d ";
+    },
+
+    getPrettyPresence: function(presence) {
+        if (presence === "online") return "Online";
+        if (presence === "unavailable") return "Idle"; // XXX: is this actually right?
+        if (presence === "offline") return "Offline";
+        return "Unknown";
+    },
+
+    render: function() {
+        if (this.props.activeAgo >= 0) {
+            return (
+                <div className="mx_PresenceLabel">
+                    { this.getPrettyPresence(this.props.presenceState) } { this.getDuration(this.props.activeAgo) } ago
+                </div>
+            );
+        }
+        else {
+            return (
+                <div className="mx_PresenceLabel">
+                    { this.getPrettyPresence(this.props.presenceState) }
+                </div>
+            );
+        }
+    }
+});