Improving selectors of Textbox component (#9831) (#9840)

* improved makeAddLastViewAtToProfiles memoizationg * move makeAddLastViewAtToProfiles & makeGetProfilesInChannel to AtMentionProvider * create getAllDmChannels selector * tests updated test1 * review changes Co-authored-by: Md_ZubairAhmed <[email protected]>
mattermost · Feb 18, 2022 · 2bd0eb0 · 2bd0eb0
1 parent c01ceac
commit 2bd0eb0
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 83 deletions.
diff --git a/components/__snapshots__/textbox.test.tsx.snap b/components/__snapshots__/textbox.test.tsx.snap
@@ -35,6 +35,7 @@ exports[`components/TextBox should match snapshot with additional, optional prop
  providers={
  Array [
  AtMentionProvider {
+ "addLastViewAtToProfiles": [Function],
  "autocompleteGroups": Array [
  Object {
  "id": "gid1",
@@ -44,22 +45,16 @@ exports[`components/TextBox should match snapshot with additional, optional prop
  },
  ],
  "autocompleteUsersInChannel": [Function],
+ "channelId": "channelId",
  "currentUserId": "currentUserId",
  "data": null,
  "disableDispatches": false,
+ "getProfilesInChannel": [Function],
  "lastCompletedWord": "",
  "lastPrefixWithNoResults": "",
  "latestComplete": true,
  "latestPrefix": "",
  "priorityProfiles": undefined,
- "profilesInChannel": Array [
- Object {
- "id": "id1",
- },
- Object {
- "id": "id2",
- },
- ],
  "requestStarted": false,
  "searchAssociatedGroupsForReference": [Function],
  "triggerCharacter": "@",
@@ -143,6 +138,7 @@ exports[`components/TextBox should match snapshot with required props 1`] = `
  providers={
  Array [
  AtMentionProvider {
+ "addLastViewAtToProfiles": [Function],
  "autocompleteGroups": Array [
  Object {
  "id": "gid1",
@@ -152,22 +148,16 @@ exports[`components/TextBox should match snapshot with required props 1`] = `
  },
  ],
  "autocompleteUsersInChannel": [Function],
+ "channelId": "channelId",
  "currentUserId": "currentUserId",
  "data": null,
  "disableDispatches": false,
+ "getProfilesInChannel": [Function],
  "lastCompletedWord": "",
  "lastPrefixWithNoResults": "",
  "latestComplete": true,
  "latestPrefix": "",
  "priorityProfiles": undefined,
- "profilesInChannel": Array [
- Object {
- "id": "id1",
- },
- Object {
- "id": "id2",
- },
- ],
  "requestStarted": false,
  "searchAssociatedGroupsForReference": [Function],
  "triggerCharacter": "@",
@@ -236,6 +226,7 @@ exports[`components/TextBox should throw error when new property is too long 1`]
  providers={
  Array [
  AtMentionProvider {
+ "addLastViewAtToProfiles": [Function],
  "autocompleteGroups": Array [
  Object {
  "id": "gid1",
@@ -245,22 +236,16 @@ exports[`components/TextBox should throw error when new property is too long 1`]
  },
  ],
  "autocompleteUsersInChannel": [Function],
+ "channelId": "channelId",
  "currentUserId": "currentUserId",
  "data": null,
  "disableDispatches": false,
+ "getProfilesInChannel": [Function],
  "lastCompletedWord": "",
  "lastPrefixWithNoResults": "",
  "latestComplete": true,
  "latestPrefix": "",
  "priorityProfiles": undefined,
- "profilesInChannel": Array [
- Object {
- "id": "id1",
- },
- Object {
- "id": "id2",
- },
- ],
  "requestStarted": false,
  "searchAssociatedGroupsForReference": [Function],
  "triggerCharacter": "@",
@@ -329,6 +314,7 @@ exports[`components/TextBox should throw error when value is too long 1`] = `
  providers={
  Array [
  AtMentionProvider {
+ "addLastViewAtToProfiles": [Function],
  "autocompleteGroups": Array [
  Object {
  "id": "gid1",
@@ -338,22 +324,16 @@ exports[`components/TextBox should throw error when value is too long 1`] = `
  },
  ],
  "autocompleteUsersInChannel": [Function],
+ "channelId": "channelId",
  "currentUserId": "currentUserId",
  "data": null,
  "disableDispatches": false,
+ "getProfilesInChannel": [Function],
  "lastCompletedWord": "",
  "lastPrefixWithNoResults": "",
  "latestComplete": true,
  "latestPrefix": "",
  "priorityProfiles": undefined,
- "profilesInChannel": Array [
- Object {
- "id": "id1",
- },
- Object {
- "id": "id2",
- },
- ],
  "requestStarted": false,
  "searchAssociatedGroupsForReference": [Function],
  "triggerCharacter": "@",

diff --git a/components/suggestion/at_mention_provider/at_mention_provider.jsx b/components/suggestion/at_mention_provider/at_mention_provider.jsx
@@ -4,13 +4,18 @@
 import XRegExp from 'xregexp';
 
 import {getSuggestionsSplitBy, getSuggestionsSplitByMultiple} from 'mattermost-redux/utils/user_utils';
+import {makeGetProfilesInChannel} from 'mattermost-redux/selectors/entities/users';
+import {makeAddLastViewAtToProfiles} from 'mattermost-redux/selectors/entities/utils';
 
+import store from 'stores/redux_store';
 import {Constants} from 'utils/constants';
 
 import Provider from '../provider.jsx';
 
 import AtMentionSuggestion from './at_mention_suggestion.jsx';
 
+const profilesInChannelOptions = {active: true};
+
 // The AtMentionProvider provides matches for at mentions, including @here, @channel, @all,
 // users in the channel and users not in the channel. It mixes together results from the local
 // store with results fetch from the server.
@@ -24,13 +29,15 @@ export default class AtMentionProvider extends Provider {
  this.lastCompletedWord = '';
  this.lastPrefixWithNoResults = '';
  this.triggerCharacter = '@';
+ this.getProfilesInChannel = makeGetProfilesInChannel();
+ this.addLastViewAtToProfiles = makeAddLastViewAtToProfiles();
  }
 
  // setProps gives the provider additional context for matching pretexts. Ideally this would
  // just be something akin to a connected component with access to the store itself.
- setProps({currentUserId, profilesInChannel, autocompleteUsersInChannel, useChannelMentions, autocompleteGroups, searchAssociatedGroupsForReference, priorityProfiles}) {
+ setProps({currentUserId, channelId, autocompleteUsersInChannel, useChannelMentions, autocompleteGroups, searchAssociatedGroupsForReference, priorityProfiles}) {
  this.currentUserId = currentUserId;
- this.profilesInChannel = profilesInChannel;
+ this.channelId = channelId;
  this.autocompleteUsersInChannel = autocompleteUsersInChannel;
  this.useChannelMentions = useChannelMentions;
  this.autocompleteGroups = autocompleteGroups;
@@ -115,9 +122,18 @@ export default class AtMentionProvider extends Provider {
  return groupSuggestions.some((suggestion) => suggestion.startsWith(prefixLower));
  }
 
+ getProfilesWithLastViewAtInChannel() {
+ const state = store.getState();
+
+ const profilesInChannel = this.getProfilesInChannel(state, this.channelId, profilesInChannelOptions);
+ const profilesWithLastViewAtInChannel = this.addLastViewAtToProfiles(state, profilesInChannel);
+
+ return profilesWithLastViewAtInChannel;
+ }
+
  // localMembers matches up to 25 local results from the store before the server has responded.
  localMembers() {
- const localMembers = this.profilesInChannel.
+ const localMembers = this.getProfilesWithLastViewAtInChannel().
  filter((profile) => this.filterProfile(profile)).
  map((profile) => this.createFromProfile(profile, Constants.MENTION_MEMBERS)).
  splice(0, 25);