summaryrefslogtreecommitdiffstats
path: root/webapp/components/suggestion/channel_mention_provider.jsx
blob: c644d1a9f5e8648f5b9d59ad1fa8a568a0ea56e6 (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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.

import Suggestion from './suggestion.jsx';

import {autocompleteChannels} from 'actions/channel_actions.jsx';

import ChannelStore from 'stores/channel_store.jsx';

import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
import {Constants, ActionTypes} from 'utils/constants.jsx';

import React from 'react';

class ChannelMentionSuggestion extends Suggestion {
    render() {
        const isSelection = this.props.isSelection;
        const item = this.props.item;

        const channelName = item.channel.display_name;
        const purpose = item.channel.purpose;

        let className = 'mentions__name';
        if (isSelection) {
            className += ' suggestion--selected';
        }

        const description = '(~' + item.channel.name + ')';

        return (
            <div
                className={className}
                onClick={this.handleClick}
            >
                <div className='mention__align'>
                    <span>
                        {channelName}
                    </span>
                    <span className='mention__channelname'>
                        {' '}
                        {description}
                    </span>
                </div>
                <div className='mention__purpose'>
                    {purpose}
                </div>
            </div>
        );
    }
}

export default class ChannelMentionProvider {
    constructor() {
        this.timeoutId = '';
    }

    componentWillUnmount() {
        clearTimeout(this.timeoutId);
    }

    handlePretextChanged(suggestionId, pretext) {
        const captured = (/(^|\s)(~([^~]*))$/i).exec(pretext.toLowerCase());
        if (captured) {
            const prefix = captured[3];

            function autocomplete() {
                autocompleteChannels(
                    prefix,
                    (data) => {
                        const channels = data;

                        // Wrap channels in an outer object to avoid overwriting the 'type' property.
                        const wrappedChannels = [];
                        const wrappedMoreChannels = [];
                        const moreChannels = [];
                        channels.forEach((item) => {
                            if (ChannelStore.get(item.id)) {
                                wrappedChannels.push({
                                    type: Constants.MENTION_CHANNELS,
                                    channel: item
                                });
                                return;
                            }

                            wrappedMoreChannels.push({
                                type: Constants.MENTION_MORE_CHANNELS,
                                channel: item
                            });

                            moreChannels.push(item);
                        });

                        const wrapped = wrappedChannels.concat(wrappedMoreChannels);
                        const mentions = wrapped.map((item) => '~' + item.channel.name);

                        AppDispatcher.handleServerAction({
                            type: ActionTypes.RECEIVED_MORE_CHANNELS,
                            channels: moreChannels
                        });

                        AppDispatcher.handleServerAction({
                            type: ActionTypes.SUGGESTION_RECEIVED_SUGGESTIONS,
                            id: suggestionId,
                            matchedPretext: captured[2],
                            terms: mentions,
                            items: wrapped,
                            component: ChannelMentionSuggestion
                        });
                    }
                );
            }

            this.timeoutId = setTimeout(
                autocomplete.bind(this),
                Constants.AUTOCOMPLETE_TIMEOUT
            );
        }
    }
}