summaryrefslogtreecommitdiffstats
path: root/web/react/components/user_list_row.jsx
blob: 1ca40687f38b8d8ff1512ed482634aab6b115f87 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.

import Constants from '../utils/constants.jsx';
import PreferenceStore from '../stores/preference_store.jsx';
import * as Utils from '../utils/utils.jsx';

export default function UserListRow({user, actions}) {
    const nameFormat = PreferenceStore.get(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', '');

    let name = user.username;
    if (user.nickname && nameFormat === Constants.Preferences.DISPLAY_PREFER_NICKNAME) {
        name = `${user.nickname} (@${user.username})`;
    } else if ((user.first_name || user.last_name) && (nameFormat === Constants.Preferences.DISPLAY_PREFER_NICKNAME || nameFormat === Constants.Preferences.DISPLAY_PREFER_FULL_NAME)) {
        name = `${Utils.getFullName(user)} (@${user.username})`;
    }

    const buttons = actions.map((Action, index) => {
        return (
            <Action
                key={index.toString()}
                user={user}
            />
        );
    });

    return (
        <tr>
            <td
                key={user.id}
                style={{display: 'flex'}}
            >
                <img
                    className='profile-img'
                    src={`/api/v1/users/${user.id}/image?time=${user.update_at}`}
                />
                <div
                    className='user-list-item__details'
                >
                    <div className='more-name'>
                        {name}
                    </div>
                    <div className='more-description'>
                        {user.email}
                    </div>
                </div>
                <div
                    className='user-list-item__actions'
                >
                    {buttons}
                </div>
            </td>
        </tr>
    );
}

UserListRow.defaultProps = {
    actions: []
};

UserListRow.propTypes = {
    user: React.PropTypes.object.isRequired,
    actions: React.PropTypes.arrayOf(React.PropTypes.func)
};