Merge branch 'experimental' into bwindels/searchmakeover

src/components/views/rooms/MemberTile.js

@@ -21,10 +21,8 @@ import SettingsStore from "../../../settings/SettingsStore";
 const React = require('react');
 import PropTypes from 'prop-types';
 
-const MatrixClientPeg = require('../../../MatrixClientPeg');
 const sdk = require('../../../index');
 const dis = require('../../../dispatcher');
-const Modal = require("../../../Modal");
 import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
@@ -42,7 +40,46 @@ module.exports = React.createClass({
     },
 
     getInitialState: function() {
-        return {};
+        return {
+            statusMessage: this.getStatusMessage(),
+        };
+    },
+
+    componentDidMount() {
+        if (!SettingsStore.isFeatureEnabled("feature_custom_status")) {
+            return;
+        }
+        const { user } = this.props.member;
+        if (!user) {
+            return;
+        }
+        user.on("User._unstable_statusMessage", this._onStatusMessageCommitted);
+    },
+
+    componentWillUmount() {
+        const { user } = this.props.member;
+        if (!user) {
+            return;
+        }
+        user.removeListener(
+            "User._unstable_statusMessage",
+            this._onStatusMessageCommitted,
+        );
+    },
+
+    getStatusMessage() {
+        const { user } = this.props.member;
+        if (!user) {
+            return "";
+        }
+        return user._unstable_statusMessage;
+    },
+
+    _onStatusMessageCommitted() {
+        // The `User` object has observed a status message change.
+        this.setState({
+            statusMessage: this.getStatusMessage(),
+        });
     },
 
     shouldComponentUpdate: function(nextProps, nextState) {
@@ -74,22 +111,23 @@ module.exports = React.createClass({
     },
 
     getPowerLabel: function() {
-        return _t("%(userName)s (power %(powerLevelNumber)s)", {userName: this.props.member.userId, powerLevelNumber: this.props.member.powerLevel});
+        return _t("%(userName)s (power %(powerLevelNumber)s)", {
+            userName: this.props.member.userId,
+            powerLevelNumber: this.props.member.powerLevel,
+        });
     },
 
     render: function() {
         const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
-        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
         const EntityTile = sdk.getComponent('rooms.EntityTile');
 
         const member = this.props.member;
         const name = this._getDisplayName();
-        const active = -1;
         const presenceState = member.user ? member.user.presence : null;
 
         let statusMessage = null;
         if (member.user && SettingsStore.isFeatureEnabled("feature_custom_status")) {
-            statusMessage = member.user._unstable_statusMessage;
+            statusMessage = this.state.statusMessage;
         }
 
         const av = (

src/components/views/rooms/RoomTile.js

@@ -62,6 +62,7 @@ module.exports = React.createClass({
             notifState: RoomNotifs.getRoomNotifsState(this.props.room.roomId),
             notificationCount: this.props.room.getUnreadNotificationCount(),
             selected: this.props.room.roomId === ActiveRoomObserver.getActiveRoomId(),
+            statusMessage: this._getStatusMessage(),
         });
     },
 
@@ -79,6 +80,33 @@ module.exports = React.createClass({
         return Boolean(dmRooms);
     },
 
+    _shouldShowStatusMessage() {
+        if (!SettingsStore.isFeatureEnabled("feature_custom_status")) {
+            return false;
+        }
+        const isInvite = this.props.room.getMyMembership() === "invite";
+        const isJoined = this.props.room.getMyMembership() === "join";
+        const looksLikeDm = this.props.room.getInvitedAndJoinedMemberCount() === 2;
+        return !isInvite && isJoined && looksLikeDm;
+    },
+
+    _getStatusMessageUser() {
+        const selfId = MatrixClientPeg.get().getUserId();
+        const otherMember = this.props.room.currentState.getMembersExcept([selfId])[0];
+        if (!otherMember) {
+            return null;
+        }
+        return otherMember.user;
+    },
+
+    _getStatusMessage() {
+        const statusUser = this._getStatusMessageUser();
+        if (!statusUser) {
+            return "";
+        }
+        return statusUser._unstable_statusMessage;
+    },
+
     onRoomTimeline: function(ev, room) {
         if (room !== this.props.room) return;
         this.setState({
@@ -112,7 +140,13 @@ module.exports = React.createClass({
                 this.setState({
                     notificationCount: this.props.room.getUnreadNotificationCount(),
                 });
-            break;
+                break;
+            // RoomTiles are one of the few components that may show custom status and
+            // also remain on screen while in Settings toggling the feature.  This ensures
+            // you can clearly see the status hide and show when toggling the feature.
+            case 'feature_custom_status_changed':
+                this.forceUpdate();
+                break;
         }
     },
 
@@ -128,6 +162,16 @@ module.exports = React.createClass({
         MatrixClientPeg.get().on("Room.name", this.onRoomName);
         ActiveRoomObserver.addListener(this.props.room.roomId, this._onActiveRoomChange);
         this.dispatcherRef = dis.register(this.onAction);
+
+        if (this._shouldShowStatusMessage()) {
+            const statusUser = this._getStatusMessageUser();
+            if (statusUser) {
+                statusUser.on(
+                    "User._unstable_statusMessage",
+                    this._onStatusMessageCommitted,
+                );
+            }
+        }
     },
 
     componentWillUnmount: function() {
@@ -139,6 +183,16 @@ module.exports = React.createClass({
         }
         ActiveRoomObserver.removeListener(this.props.room.roomId, this._onActiveRoomChange);
         dis.unregister(this.dispatcherRef);
+
+        if (this._shouldShowStatusMessage()) {
+            const statusUser = this._getStatusMessageUser();
+            if (statusUser) {
+                statusUser.removeListener(
+                    "User._unstable_statusMessage",
+                    this._onStatusMessageCommitted,
+                );
+            }
+        }
     },
 
     componentWillReceiveProps: function(props) {
@@ -166,6 +220,13 @@ module.exports = React.createClass({
         return false;
     },
 
+    _onStatusMessageCommitted() {
+        // The status message `User` object has observed a message change.
+        this.setState({
+            statusMessage: this._getStatusMessage(),
+        });
+    },
+
     onClick: function(ev) {
         if (this.props.onClick) {
             this.props.onClick(this.props.room.roomId, ev);
@@ -251,15 +312,9 @@ module.exports = React.createClass({
         const mentionBadges = this.props.highlight && this._shouldShowMentionBadge();
         const badges = notifBadges || mentionBadges;
 
-        const isJoined = this.props.room.getMyMembership() === "join";
-        const looksLikeDm = this.props.room.getInvitedAndJoinedMemberCount() === 2;
         let subtext = null;
-        if (!isInvite && isJoined && looksLikeDm && SettingsStore.isFeatureEnabled("feature_custom_status")) {
-            const selfId = MatrixClientPeg.get().getUserId();
-            const otherMember = this.props.room.currentState.getMembersExcept([selfId])[0];
-            if (otherMember && otherMember.user && otherMember.user._unstable_statusMessage) {
-                subtext = otherMember.user._unstable_statusMessage;
-            }
+        if (this._shouldShowStatusMessage()) {
+            subtext = this.state.statusMessage;
         }
 
         const classes = classNames({