PLT-4182 Fix incorrect listing for at-mention in comment (#4031)

* Add missing eol

* PLT-4182 Fix incorrect listing for at-mention in comment

Suggestion box for at-mention listed users for the center channel even
if the current textbox is for reply for a post which belongs to a
different channel.

webapp/components/create_comment.jsx

@@ -400,6 +400,7 @@ export default class CreateComment extends React.Component {
                                 createMessage={Utils.localizeMessage('create_comment.addComment', 'Add a comment...')}
                                 initialText=''
                                 supportsCommands={false}
+                                channelId={this.props.channelId}
                                 id='reply_textbox'
                                 ref='textbox'
                             />

webapp/components/suggestion/at_mention_provider.jsx

@@ -126,6 +126,10 @@ function filterUsersByPrefix(users, prefix, limit, type) {
 }
 
 export default class AtMentionProvider {
+    constructor(channelId) {
+        this.channelId = channelId;
+    }
+
     handlePretextChanged(suggestionId, pretext) {
         const captured = (/@([a-z0-9\-\._]*)$/i).exec(pretext.toLowerCase());
         if (captured) {
@@ -134,15 +138,17 @@ export default class AtMentionProvider {
             // Group users into members and nonmembers of the channel.
             const users = UserStore.getActiveOnlyProfiles(true);
             const channelMembers = {};
-            const extra = ChannelStore.getCurrentExtraInfo();
+            const channelNonmembers = users;
-            for (let i = 0; i < extra.members.length; i++) {
+            if (this.channelId != null) {
-                const id = extra.members[i].id;
+                const extraInfo = ChannelStore.getExtraInfo(this.channelId);
+                for (let i = 0; i < extraInfo.members.length; i++) {
+                    const id = extraInfo.members[i].id;
                     if (users[id]) {
                         channelMembers[id] = users[id];
-                    Reflect.deleteProperty(users, id);
+                        Reflect.deleteProperty(channelNonmembers, id);
+                    }
                 }
             }
-            const channelNonmembers = users;
 
             // Filter users by prefix.
             const filteredMembers = filterUsersByPrefix(

webapp/components/textbox.jsx

@@ -36,7 +36,11 @@ export default class Textbox extends React.Component {
             connection: ''
         };
 
-        this.suggestionProviders = [new AtMentionProvider(), new ChannelMentionProvider(), new EmoticonProvider()];
+        this.suggestionProviders = [
+            new AtMentionProvider(this.props.channelId),
+            new ChannelMentionProvider(),
+            new EmoticonProvider()
+        ];
         if (props.supportsCommands) {
             this.suggestionProviders.push(new CommandProvider());
         }
@@ -104,6 +108,18 @@ export default class Textbox extends React.Component {
         this.setState({preview: !this.state.preview});
     }
 
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.channelId !== this.channelId) {
+            // Update channel id for AtMentionProvider.
+            const providers = this.suggestionProviders;
+            for (let i = 0; i < providers.length; i++) {
+                if (providers[i] instanceof AtMentionProvider) {
+                    providers[i] = new AtMentionProvider(nextProps.channelId);
+                }
+            }
+        }
+    }
+
     render() {
         const hasText = this.props.messageText.length > 0;