emoji_page.jsx 2.88 KB
Newer Older
1
2
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
3
4
5
6
7
8

import React from 'react';
import PropTypes from 'prop-types';
import {FormattedMessage} from 'react-intl';
import {Link} from 'react-router-dom';

9
10
import Permissions from 'mattermost-redux/constants/permissions';

11
import * as Utils from 'utils/utils.jsx';
12
import TeamPermissionGate from 'components/permissions_gates/team_permission_gate';
13
14
15
16
17

import EmojiList from './emoji_list';

export default class EmojiPage extends React.Component {
    static propTypes = {
18
        teamId: PropTypes.string.isRequired,
19
20
        teamName: PropTypes.string.isRequired,
        teamDisplayName: PropTypes.string.isRequired,
21
        siteName: PropTypes.string,
22
        scrollToTop: PropTypes.func.isRequired,
23
        actions: PropTypes.shape({
George Goldberg's avatar
George Goldberg committed
24
25
            loadRolesIfNeeded: PropTypes.func.isRequired,
        }).isRequired,
26
27
28
29
30
    }

    static defaultProps = {
        teamName: '',
        teamDisplayName: '',
31
        siteName: '',
32
33
34
35
    }

    componentDidMount() {
        this.updateTitle();
36
        this.props.actions.loadRolesIfNeeded(['system_admin', 'team_admin', 'system_user', 'team_user']);
37
38
39
40
41
42
    }

    updateTitle = (props = this.props) => {
        document.title = Utils.localizeMessage('custom_emoji.header', 'Custom Emoji') + ' - ' + props.teamDisplayName + ' ' + props.siteName;
    }

43
    UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
        if (this.props.siteName !== nextProps.siteName) {
            this.updateTitle(nextProps);
        }
    }

    render() {
        return (
            <div className='backstage-content emoji-list'>
                <div className='backstage-header'>
                    <h1>
                        <FormattedMessage
                            id='emoji_list.header'
                            defaultMessage='Custom Emoji'
                        />
                    </h1>
59
60
61
                    <TeamPermissionGate
                        teamId={this.props.teamId}
                        permissions={[Permissions.MANAGE_EMOJIS]}
62
                    >
63
64
65
                        <Link
                            className='add-link'
                            to={'/' + this.props.teamName + '/emoji/add'}
66
                        >
67
68
69
70
71
72
73
74
75
76
77
                            <button
                                type='button'
                                className='btn btn-primary'
                            >
                                <FormattedMessage
                                    id='emoji_list.add'
                                    defaultMessage='Add Custom Emoji'
                                />
                            </button>
                        </Link>
                    </TeamPermissionGate>
78
                    <EmojiList scrollToTop={this.props.scrollToTop}/>
79
80
81
82
83
                </div>
            </div>
        );
    }
}