Enabled name display settings in more places

2015-11-23 17:14:13 -08:00
--- a/web/react/components/member_list_item.jsx
+++ b/web/react/components/member_list_item.jsx
@@ -110,7 +110,7 @@ export default class MemberListItem extends React.Component {
                        height='36'
                        width='36'
                    />
-                    <div className='member-name'>{member.username}</div>
+                    <div className='member-name'>{Utils.displayUsername(member.id)}</div>
                    <div className='member-description'>{member.email}</div>
                </td>
                <td className='td--action lg'>{invite}</td>
--- a/web/react/components/member_list_team_item.jsx
+++ b/web/react/components/member_list_team_item.jsx
@@ -174,7 +174,7 @@ export default class MemberListTeamItem extends React.Component {
                        height='36'
                        width='36'
                    />
-                    <span className='member-name'>{Utils.getDisplayName(user)}</span>
+                    <span className='member-name'>{Utils.displayUsername(user.id)}</span>
                    <span className='member-email'>{email}</span>
                    <div className='dropdown member-drop'>
                        <a
--- a/web/react/components/popover_list_members.jsx
+++ b/web/react/components/popover_list_members.jsx
@@ -5,6 +5,7 @@ import UserStore from '../stores/user_store.jsx';
 var Popover = ReactBootstrap.Popover;
 var Overlay = ReactBootstrap.Overlay;
 import * as Utils from '../utils/utils.jsx';
+import Constants from '../utils/constants.jsx';

 import ChannelStore from '../stores/channel_store.jsx';

@@ -68,7 +69,7 @@ export default class PopoverListMembers extends React.Component {
    }

    render() {
-        let popoverHtml = [];
+        const popoverHtml = [];
        const members = this.props.members;
        const teamMembers = UserStore.getProfilesUsernameMap();
        const currentUserId = UserStore.getCurrentId();
@@ -76,35 +77,13 @@ export default class PopoverListMembers extends React.Component {

        if (members && teamMembers) {
            members.sort((a, b) => {
-                return a.username.localeCompare(b.username);
+                const aName = Utils.displayUsername(a.id);
+                const bName = Utils.displayUsername(b.id);
+
+                return aName.localeCompare(bName);
            });

            members.forEach((m, i) => {
-                const details = [];
-
-                const fullName = Utils.getFullName(m);
-                if (fullName) {
-                    details.push(
-                        <span
-                            key={`${m.id}__full-name`}
-                            className='full-name'
-                        >
-                            {fullName}
-                        </span>
-                    );
-                }
-
-                if (m.nickname) {
-                    const separator = fullName ? ' - ' : '';
-                    details.push(
-                        <span
-                            key={`${m.nickname}__nickname`}
-                        >
-                            {separator + m.nickname}
-                        </span>
-                    );
-                }
-
                let button = '';
                if (currentUserId !== m.id && ch.type !== 'D') {
                    button = (
@@ -118,7 +97,12 @@ export default class PopoverListMembers extends React.Component {
                    );
                }

-                if (teamMembers[m.username] && teamMembers[m.username].delete_at <= 0) {
+                let name = '';
+                if (teamMembers[m.username]) {
+                    name = Utils.displayUsername(teamMembers[m.username].id);
+                }
+
+                if (name && teamMembers[m.username].delete_at <= 0) {
                    popoverHtml.push(
                        <div
                            className='text-nowrap'
@@ -135,7 +119,7 @@ export default class PopoverListMembers extends React.Component {
                                <div
                                    className='more-name'
                                >
-                                    {m.username}
+                                    {name}
                                </div>
                            </div>
                            <div
@@ -157,8 +141,8 @@ export default class PopoverListMembers extends React.Component {
            count = members.length;
        }

-        if (count > 20) {
-            countText = '20+';
+        if (count > Constants.MAX_CHANNEL_POPOVER_COUNT) {
+            countText = Constants.MAX_CHANNEL_POPOVER_COUNT + '+';
        } else if (count > 0) {
            countText = count.toString();
        }
--- a/web/react/components/post.jsx
+++ b/web/react/components/post.jsx
@@ -87,6 +87,10 @@ export default class Post extends React.Component {
            return true;
        }

+        if (nextProps.displayNameType !== this.props.displayNameType) {
+            return true;
+        }
+
        if (this.getCommentCount(nextProps) !== this.getCommentCount(this.props)) {
            return true;
        }
@@ -224,5 +228,6 @@ Post.propTypes = {
    sameRoot: React.PropTypes.bool,
    hideProfilePic: React.PropTypes.bool,
    isLastComment: React.PropTypes.bool,
-    shouldHighlight: React.PropTypes.bool
+    shouldHighlight: React.PropTypes.bool,
+    displayNameType: React.PropTypes.string
 };
--- a/web/react/components/posts_view.jsx
+++ b/web/react/components/posts_view.jsx
@@ -2,15 +2,18 @@
 // See License.txt for license information.

 import UserStore from '../stores/user_store.jsx';
+import PreferenceStore from '../stores/preference_store.jsx';
 import * as EventHelpers from '../dispatcher/event_helpers.jsx';
 import * as Utils from '../utils/utils.jsx';
 import Post from './post.jsx';
 import Constants from '../utils/constants.jsx';
+const Preferences = Constants.Preferences;

 export default class PostsView extends React.Component {
    constructor(props) {
        super(props);

+        this.updateState = this.updateState.bind(this);
        this.handleScroll = this.handleScroll.bind(this);
        this.isAtBottom = this.isAtBottom.bind(this);
        this.loadMorePostsTop = this.loadMorePostsTop.bind(this);
@@ -22,6 +25,8 @@ export default class PostsView extends React.Component {
        this.jumpToPostNode = null;
        this.wasAtBottom = true;
        this.scrollHeight = 0;
+
+        this.state = {displayNameType: PreferenceStore.getPreference(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', {value: 'false'}).value};
    }
    static get SCROLL_TYPE_FREE() {
        return 1;
@@ -38,6 +43,9 @@ export default class PostsView extends React.Component {
    static get SCROLL_TYPE_POST() {
        return 5;
    }
+    updateState() {
+        this.setState({displayNameType: PreferenceStore.getPreference(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', {value: 'false'}).value});
+    }
    isAtBottom() {
        return ((this.refs.postlist.scrollHeight - this.refs.postlist.scrollTop) === this.refs.postlist.clientHeight);
    }
@@ -166,6 +174,7 @@ export default class PostsView extends React.Component {
                    isLastComment={isLastComment}
                    shouldHighlight={shouldHighlight}
                    onClick={() => EventHelpers.emitPostFocusEvent(post.id)} //eslint-disable-line no-loop-func
+                    displayNameType={this.state.displayNameType}
                />
            );

@@ -272,9 +281,11 @@ export default class PostsView extends React.Component {
        }
        window.addEventListener('resize', this.handleResize);
        $(this.refs.postlist).perfectScrollbar();
+        PreferenceStore.addChangeListener(this.updateState);
    }
    componentWillUnmount() {
        window.removeEventListener('resize', this.handleResize);
+        PreferenceStore.removeChangeListener(this.updateState);
    }
    componentDidUpdate() {
        if (this.props.postList != null) {
@@ -282,7 +293,7 @@ export default class PostsView extends React.Component {
        }
        $(this.refs.postlist).perfectScrollbar('update');
    }
-    shouldComponentUpdate(nextProps) {
+    shouldComponentUpdate(nextProps, nextState) {
        if (this.props.isActive !== nextProps.isActive) {
            return true;
        }
@@ -301,6 +312,9 @@ export default class PostsView extends React.Component {
        if (!Utils.areObjectsEqual(this.props.postList, nextProps.postList)) {
            return true;
        }
+        if (nextState.displayNameType !== this.state.displayNameType) {
+            return true;
+        }

        return false;
    }
--- a/web/react/components/user_profile.jsx
+++ b/web/react/components/user_profile.jsx
@@ -54,9 +54,11 @@ export default class UserProfile extends React.Component {
        }
    }
    render() {
-        var name = this.state.profile.username;
+        var name = Utils.displayUsername(this.state.profile.id);
        if (this.props.overwriteName) {
            name = this.props.overwriteName;
+        } else if (!name) {
+            name = '...';
        }

        if (this.props.disablePopover) {
@@ -107,7 +109,7 @@ export default class UserProfile extends React.Component {
                rootClose={true}
                overlay={
                    <Popover
-                        title={this.state.profile.username}
+                        title={name}
                        id='user-profile-popover'
                    >
                        {dataContent}
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -137,6 +137,7 @@ export default {
    ],
    MONTHS: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    MAX_DMS: 20,
+    MAX_CHANNEL_POPOVER_COUNT: 20,
    DM_CHANNEL: 'D',
    OPEN_CHANNEL: 'O',
    PRIVATE_CHANNEL: 'P',
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -981,13 +981,15 @@ export function displayUsername(userId) {
    const nameFormat = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', {value: 'false'}).value;

    let username = '';
-    if (nameFormat === 'nickname_full_name') {
-        username = user.nickname || getFullName(user);
-    } else if (nameFormat === 'full_name') {
-        username = getFullName(user);
-    }
-    if (!username.trim().length) {
-        username = user.username;
+    if (user) {
+        if (nameFormat === 'nickname_full_name') {
+            username = user.nickname || getFullName(user);
+        } else if (nameFormat === 'full_name') {
+            username = getFullName(user);
+        }
+        if (!username.trim().length) {
+            username = user.username;
+        }
    }

    return username;