Improve ChatInviteDialog perf by ditching fuse, using indexOf and lastActiveTs()
This commit is contained in:
parent
de1cacf983
commit
4e4c670458
1 changed files with 17 additions and 30 deletions
|
@ -27,7 +27,6 @@ import dis from '../../../dispatcher';
|
||||||
import Modal from '../../../Modal';
|
import Modal from '../../../Modal';
|
||||||
import AccessibleButton from '../elements/AccessibleButton';
|
import AccessibleButton from '../elements/AccessibleButton';
|
||||||
import q from 'q';
|
import q from 'q';
|
||||||
import Fuse from 'fuse.js';
|
|
||||||
|
|
||||||
const TRUNCATE_QUERY_LIST = 40;
|
const TRUNCATE_QUERY_LIST = 40;
|
||||||
|
|
||||||
|
@ -74,19 +73,6 @@ module.exports = React.createClass({
|
||||||
// Set the cursor at the end of the text input
|
// Set the cursor at the end of the text input
|
||||||
this.refs.textinput.value = this.props.value;
|
this.refs.textinput.value = this.props.value;
|
||||||
}
|
}
|
||||||
// Create a Fuse instance for fuzzy searching this._userList
|
|
||||||
this._fuse = new Fuse(
|
|
||||||
// Use an empty list at first that will later be populated
|
|
||||||
// (see this._updateUserList)
|
|
||||||
[],
|
|
||||||
{
|
|
||||||
shouldSort: true,
|
|
||||||
location: 0, // The index of the query in the test string
|
|
||||||
distance: 5, // The distance away from location the query can be
|
|
||||||
// 0.0 = exact match, 1.0 = match anything
|
|
||||||
threshold: 0.3,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
this._updateUserList();
|
this._updateUserList();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -175,7 +161,7 @@ module.exports = React.createClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
onQueryChanged: function(ev) {
|
onQueryChanged: function(ev) {
|
||||||
const query = ev.target.value;
|
const query = ev.target.value.toLowerCase();
|
||||||
let queryList = [];
|
let queryList = [];
|
||||||
|
|
||||||
if (query.length < 2) {
|
if (query.length < 2) {
|
||||||
|
@ -188,24 +174,27 @@ module.exports = React.createClass({
|
||||||
this.queryChangedDebouncer = setTimeout(() => {
|
this.queryChangedDebouncer = setTimeout(() => {
|
||||||
// Only do search if there is something to search
|
// Only do search if there is something to search
|
||||||
if (query.length > 0 && query != '@') {
|
if (query.length > 0 && query != '@') {
|
||||||
// Weighted keys prefer to match userIds when first char is @
|
this._userList.forEach((user) => {
|
||||||
this._fuse.options.keys = [{
|
if (user.userId.toLowerCase().indexOf(query) === -1 &&
|
||||||
name: 'displayName',
|
user.displayName.toLowerCase().indexOf(query) === -1
|
||||||
weight: query[0] === '@' ? 0.1 : 0.9,
|
) {
|
||||||
},{
|
return;
|
||||||
name: 'userId',
|
}
|
||||||
weight: query[0] === '@' ? 0.9 : 0.1,
|
|
||||||
}];
|
|
||||||
queryList = this._fuse.search(query).map((user) => {
|
|
||||||
// Return objects, structure of which is defined
|
// Return objects, structure of which is defined
|
||||||
// by InviteAddressType
|
// by InviteAddressType
|
||||||
return {
|
queryList.push({
|
||||||
addressType: 'mx',
|
addressType: 'mx',
|
||||||
address: user.userId,
|
address: user.userId,
|
||||||
displayName: user.displayName,
|
displayName: user.displayName,
|
||||||
avatarMxc: user.avatarUrl,
|
avatarMxc: user.avatarUrl,
|
||||||
isKnown: true,
|
isKnown: true,
|
||||||
}
|
order: user.getLastActiveTs(),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
queryList = queryList.sort((a,b) => {
|
||||||
|
return a.order < b.order;
|
||||||
});
|
});
|
||||||
|
|
||||||
// If the query is a valid address, add an entry for that
|
// If the query is a valid address, add an entry for that
|
||||||
|
@ -351,7 +340,7 @@ module.exports = React.createClass({
|
||||||
this.props.onFinished(true, addrTexts);
|
this.props.onFinished(true, addrTexts);
|
||||||
},
|
},
|
||||||
|
|
||||||
_updateUserList: new rate_limited_func(function() {
|
_updateUserList: function() {
|
||||||
// Get all the users
|
// Get all the users
|
||||||
this._userList = MatrixClientPeg.get().getUsers();
|
this._userList = MatrixClientPeg.get().getUsers();
|
||||||
// Remove current user
|
// Remove current user
|
||||||
|
@ -359,9 +348,7 @@ module.exports = React.createClass({
|
||||||
return u.userId === MatrixClientPeg.get().credentials.userId;
|
return u.userId === MatrixClientPeg.get().credentials.userId;
|
||||||
});
|
});
|
||||||
this._userList.splice(meIx, 1);
|
this._userList.splice(meIx, 1);
|
||||||
|
},
|
||||||
this._fuse.set(this._userList);
|
|
||||||
}, 500),
|
|
||||||
|
|
||||||
_isOnInviteList: function(uid) {
|
_isOnInviteList: function(uid) {
|
||||||
for (let i = 0; i < this.state.inviteList.length; i++) {
|
for (let i = 0; i < this.state.inviteList.length; i++) {
|
||||||
|
|
Loading…
Reference in a new issue