MM-12677 Removing SuggestionStore (mattermost#1932)

* Removing SuggestionStore.

* Fixing clicking mention in popover.

* Fixing laggy text manipulation.

* Feedback fixes

.babelrc

@@ -4,9 +4,9 @@
  targets: {
  chrome: 66,
  firefox: 60,
- edge: 41,
+ edge: 42,
  ie: 11,
- ios: 11,
+ safari: 12,
  },
  modules: false,
  debug: false,
@@ -28,9 +28,9 @@
  targets: {
  chrome: 66,
  firefox: 60,
- edge: 41,
+ edge: 42,
  ie: 11,
- ios: 11,
+ safari: 12,
  },
  debug: false,
  useBuiltIns: 'usage',

actions/global_actions.jsx

@@ -477,14 +477,6 @@ export function postListScrollChangeToBottom() {
  });
 }
 
-export function emitPopoverMentionKeyClick(isRHS, mentionKey) {
- AppDispatcher.handleViewAction({
- type: ActionTypes.POPOVER_MENTION_KEY_CLICK,
- isRHS,
- mentionKey,
- });
-}
-
 let serverVersion = '';
 
 export function reloadIfServerVersionChanged() {

actions/integration_actions.jsx

@@ -5,12 +5,8 @@ import request from 'superagent';
 import * as IntegrationActions from 'mattermost-redux/actions/integrations';
 import {getProfilesByIds, getUser} from 'mattermost-redux/actions/users';
 import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
-import {Client4} from 'mattermost-redux/client';
 
-import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
 import store from 'stores/redux_store.jsx';
-import {ActionTypes} from 'utils/constants.jsx';
-import * as UserAgent from 'utils/user_agent.jsx';
 
 const dispatch = store.dispatch;
 const getState = store.getState;
@@ -198,50 +194,6 @@ export function regenCommandToken(id) {
  IntegrationActions.regenCommandToken(id)(dispatch, getState);
 }
 
-export function getSuggestedCommands(command, suggestionId, component) {
- Client4.getCommandsList(getCurrentTeamId(getState())).then(
- (data) => {
- let matches = [];
- data.forEach((cmd) => {
- if (!cmd.auto_complete) {
- return;
- }
-
- if (cmd.trigger !== 'shortcuts' || !UserAgent.isMobile()) {
- if (('/' + cmd.trigger).indexOf(command) === 0) {
- const s = '/' + cmd.trigger;
- let hint = '';
- if (cmd.auto_complete_hint && cmd.auto_complete_hint.length !== 0) {
- hint = cmd.auto_complete_hint;
- }
- matches.push({
- suggestion: s,
- hint,
- description: cmd.auto_complete_desc,
- });
- }
- }
- });
-
- matches = matches.sort((a, b) => a.suggestion.localeCompare(b.suggestion));
-
- // pull out the suggested commands from the returned data
- const terms = matches.map((suggestion) => suggestion.suggestion);
-
- AppDispatcher.handleServerAction({
- type: ActionTypes.SUGGESTION_RECEIVED_SUGGESTIONS,
- id: suggestionId,
- matchedPretext: command,
- terms,
- items: matches,
- component,
- });
- }
- ).catch(
- () => {} //eslint-disable-line no-empty-function
- );
-}
-
 export function getYoutubeVideoInfo(googleKey, videoId, success, error) {
  request.get('https://www.googleapis.com/youtube/v3/videos').
  query({part: 'snippet', id: videoId, key: googleKey}).

components/create_post/create_post.jsx

@@ -1004,7 +1004,6 @@ export default class CreatePost extends React.Component {
  emojiEnabled={this.props.enableEmojiPicker}
  createMessage={createMessage}
  channelId={currentChannel.id}
- popoverMentionKeyClick={true}
  id='post_textbox'
  ref='textbox'
  disabled={readOnlyChannel}

components/profile_popover/profile_popover.jsx

@@ -6,6 +6,8 @@ import React from 'react';
 import {OverlayTrigger, Popover, Tooltip} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
 
+import EventEmitter from 'mattermost-redux/utils/event_emitter';
+
 import LocalDateTime from 'components/local_date_time';
 import UserSettingsModal from 'components/user_settings/modal';
 import {browserHistory} from 'utils/browser_history';
@@ -158,7 +160,7 @@ class ProfilePopover extends React.Component {
  if (this.props.hide) {
  this.props.hide();
  }
- GlobalActions.emitPopoverMentionKeyClick(this.props.isRHS, this.props.user.username);
+ EventEmitter.emit('mention_key_click', this.props.user.username);
  }
 
  handleEditAccountSettings(e) {

components/suggestion/at_mention_provider.jsx

@@ -8,8 +8,7 @@ import XRegExp from 'xregexp';
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 
 import {autocompleteUsersInChannel} from 'actions/user_actions.jsx';
-import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
-import {ActionTypes, Constants} from 'utils/constants.jsx';
+import {Constants} from 'utils/constants.jsx';
 import * as Utils from 'utils/utils.jsx';
 import store from 'stores/redux_store.jsx';
 
@@ -116,15 +115,15 @@ export default class AtMentionProvider extends Provider {
  this.channelId = channelId;
  }
 
- handlePretextChanged(suggestionId, pretext) {
+ handlePretextChanged(pretext, resultCallback) {
  const captured = XRegExp.cache('(?:^|\\W)@([\\pL\\d\\-_.]*)$', 'i').exec(pretext.toLowerCase());
  if (!captured) {
  return false;
  }
 
  const prefix = captured[1];
 
- this.startNewRequest(suggestionId, prefix);
+ this.startNewRequest(prefix);
 
  autocompleteUsersInChannel(
  prefix,
@@ -161,9 +160,7 @@ export default class AtMentionProvider extends Provider {
 
  const mentions = users.map((user) => '@' + user.username);
 
- AppDispatcher.handleServerAction({
- type: ActionTypes.SUGGESTION_RECEIVED_SUGGESTIONS,
- id: suggestionId,
+ resultCallback({
  matchedPretext: `@${captured[1]}`,
  terms: mentions,
  items: users,

components/suggestion/channel_mention_provider.jsx

@@ -7,12 +7,12 @@ import {getMyChannels, getChannel, getMyChannelMemberships} from 'mattermost-red
 
 import {sortChannelsByTypeAndDisplayName} from 'mattermost-redux/utils/channel_utils';
 
+import {ChannelTypes} from 'mattermost-redux/action_types';
+
 import {autocompleteChannels} from 'actions/channel_actions.jsx';
-import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
-import SuggestionStore from 'stores/suggestion_store.jsx';
 import store from 'stores/redux_store.jsx';
 
-import {ActionTypes, Constants} from 'utils/constants.jsx';
+import {Constants} from 'utils/constants.jsx';
 
 import Provider from './provider.jsx';
 import Suggestion from './suggestion.jsx';
@@ -64,7 +64,7 @@ export default class ChannelMentionProvider extends Provider {
  this.lastCompletedWord = '';
  }
 
- handlePretextChanged(suggestionId, pretext) {
+ handlePretextChanged(pretext, resultCallback) {
  this.resetRequest();
 
  const captured = (/\B(~([^~\r\n]*))$/i).exec(pretext.toLowerCase());
@@ -101,9 +101,7 @@ export default class ChannelMentionProvider extends Provider {
  // Clear the last completed word since we've started to match new text
  this.lastCompletedWord = '';
 
- this.startNewRequest(suggestionId, prefix);
-
- SuggestionStore.clearSuggestions(suggestionId);
+ this.startNewRequest(prefix);
 
  const words = prefix.toLowerCase().split(/\s+/);
  const wrappedChannelIds = {};
@@ -146,14 +144,15 @@ export default class ChannelMentionProvider extends Provider {
  return sortChannelsByTypeAndDisplayName('en', a.channel, b.channel);
  });
  const channelMentions = wrappedChannels.map((item) => '~' + item.channel.name);
- if (channelMentions.length > 0) {
- SuggestionStore.addSuggestions(suggestionId, channelMentions, wrappedChannels, ChannelMentionSuggestion, captured[1]);
- }
-
- SuggestionStore.addSuggestions(suggestionId, [''], [{
- type: Constants.MENTION_MORE_CHANNELS,
- loading: true,
- }], ChannelMentionSuggestion, captured[1]);
+ resultCallback({
+ terms: channelMentions.concat([' ']),
+ items: wrappedChannels.concat([{
+ type: Constants.MENTION_MORE_CHANNELS,
+ loading: true,
+ }]),
+ component: ChannelMentionSuggestion,
+ matchedPretext: captured[1],
+ });
 
  autocompleteChannels(
  prefix,
@@ -202,14 +201,12 @@ export default class ChannelMentionProvider extends Provider {
  const wrapped = wrappedChannels.concat(wrappedMoreChannels);
  const mentions = wrapped.map((item) => '~' + item.channel.name);
 
- AppDispatcher.handleServerAction({
- type: ActionTypes.RECEIVED_MORE_CHANNELS,
- channels: moreChannels,
+ store.dispatch({
+ type: ChannelTypes.RECEIVED_CHANNELS,
+ data: moreChannels,
  });
 
- AppDispatcher.handleServerAction({
- type: ActionTypes.SUGGESTION_RECEIVED_SUGGESTIONS,
- id: suggestionId,
+ resultCallback({
  matchedPretext: captured[1],
  terms: mentions,
  items: wrapped,

components/suggestion/command_provider.jsx

@@ -3,7 +3,13 @@
 
 import React from 'react';
 
-import {getSuggestedCommands} from 'actions/integration_actions.jsx';
+import {Client4} from 'mattermost-redux/client';
+
+import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
+
+import store from 'stores/redux_store.jsx';
+
+import * as UserAgent from 'utils/user_agent.jsx';
 
 import Suggestion from './suggestion.jsx';
 
@@ -23,7 +29,7 @@ class CommandSuggestion extends Suggestion {
  {...Suggestion.baseProps}
  >
  <div className='command__title'>
- <string>{item.suggestion} {item.hint}</string>
+ {item.suggestion + item.hint}
  </div>
  <div className='command__desc'>
  {item.description}
@@ -34,9 +40,48 @@ class CommandSuggestion extends Suggestion {
 }
 
 export default class CommandProvider {
- handlePretextChanged(suggestionId, pretext) {
+ handlePretextChanged(pretext, resultCallback) {
  if (pretext.startsWith('/')) {
- getSuggestedCommands(pretext.toLowerCase(), suggestionId, CommandSuggestion, pretext.toLowerCase());
+ const command = pretext.toLowerCase();
+ Client4.getCommandsList(getCurrentTeamId(store.getState())).then(
+ (data) => {
+ let matches = [];
+ data.forEach((cmd) => {
+ if (!cmd.auto_complete) {
+ return;
+ }
+
+ if (cmd.trigger !== 'shortcuts' || !UserAgent.isMobile()) {
+ if (('/' + cmd.trigger).indexOf(command) === 0) {
+ const s = '/' + cmd.trigger;
+ let hint = '';
+ if (cmd.auto_complete_hint && cmd.auto_complete_hint.length !== 0) {
+ hint = cmd.auto_complete_hint;
+ }
+ matches.push({
+ suggestion: s,
+ hint,
+ description: cmd.auto_complete_desc,
+ });
+ }
+ }
+ });
+
+ matches = matches.sort((a, b) => a.suggestion.localeCompare(b.suggestion));
+
+ // pull out the suggested commands from the returned data
+ const terms = matches.map((suggestion) => suggestion.suggestion);
+
+ resultCallback({
+ matchedPretext: command,
+ terms,
+ items: matches,
+ component: CommandSuggestion,
+ });
+ }
+ ).catch(
+ () => {} //eslint-disable-line no-empty-function
+ );
 
  return true;
  }

components/suggestion/emoticon_provider.jsx

@@ -9,11 +9,8 @@ import {getEmojiImageUrl} from 'mattermost-redux/utils/emoji_utils';
 import {getEmojiMap} from 'selectors/emojis';
 
 import store from 'stores/redux_store.jsx';
-import SuggestionStore from 'stores/suggestion_store.jsx';
 
-import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
 import * as Emoticons from 'utils/emoticons.jsx';
-import {ActionTypes} from 'utils/constants.jsx';
 
 import Suggestion from './suggestion.jsx';
 
@@ -53,7 +50,7 @@ class EmoticonSuggestion extends Suggestion {
 }
 
 export default class EmoticonProvider {
- handlePretextChanged(suggestionId, pretext) {
+ handlePretextChanged(pretext, resultsCallback) {
  // Look for the potential emoticons at the start of the text, after whitespace, and at the start of emoji reaction commands
  const captured = (/(^|\s|^\+|^-)(:([^:\s]*))$/g).exec(pretext);
  if (!captured) {
@@ -65,7 +62,6 @@ export default class EmoticonProvider {
  const partialName = captured[3];
 
  if (partialName.length < MIN_EMOTICON_LENGTH) {
- SuggestionStore.clearSuggestions(suggestionId);
  return false;
  }
 
@@ -80,15 +76,15 @@ export default class EmoticonProvider {
  }
 
  if (store.getState().entities.general.config.EnableCustomEmoji === 'true') {
- autocompleteCustomEmojis(partialName)(store.dispatch, store.getState).then(() => this.findAndSuggestEmojis(suggestionId, text, partialName));
+ store.dispatch(autocompleteCustomEmojis(partialName)).then(() => this.findAndSuggestEmojis(text, partialName, resultsCallback));
+ } else {
+ this.findAndSuggestEmojis(text, partialName, resultsCallback);
  }
 
- this.findAndSuggestEmojis(suggestionId, text, partialName);
-
  return true;
  }
 
- findAndSuggestEmojis(suggestionId, text, partialName) {
+ findAndSuggestEmojis(text, partialName, resultsCallback) {
  const matched = [];
 
  const emojiMap = getEmojiMap(store.getState());
@@ -134,15 +130,12 @@ export default class EmoticonProvider {
  const terms = matched.map((item) => ':' + item.name + ':');
 
  // Required to get past the dispatch during dispatch error
- setTimeout(() => {
- AppDispatcher.handleServerAction({
- type: ActionTypes.SUGGESTION_RECEIVED_SUGGESTIONS,
- id: suggestionId,
- matchedPretext: text,
- terms,
- items: matched,
- component: EmoticonSuggestion,
- });
- }, 0);
+
+ resultsCallback({
+ matchedPretext: text,
+ terms,
+ items: matched,
+ component: EmoticonSuggestion,
+ });
  }
 }