From 6b2c4a346ba9c50d533eadb2c64086d67d32c565 Mon Sep 17 00:00:00 2001 From: Joram Wilander Date: Mon, 16 Jan 2017 18:32:51 -0500 Subject: Discard outdated results in modal searches (#5082) --- webapp/components/admin_console/team_users.jsx | 8 +++++++- webapp/components/channel_invite_modal.jsx | 8 +++++++- webapp/components/member_list_channel.jsx | 8 +++++++- webapp/components/member_list_team.jsx | 16 +++++++++++++--- webapp/components/more_channels.jsx | 9 +++++++-- webapp/stores/team_store.jsx | 2 ++ 6 files changed, 43 insertions(+), 8 deletions(-) diff --git a/webapp/components/admin_console/team_users.jsx b/webapp/components/admin_console/team_users.jsx index 4517e241b..547002a5b 100644 --- a/webapp/components/admin_console/team_users.jsx +++ b/webapp/components/admin_console/team_users.jsx @@ -158,13 +158,17 @@ export default class UserList extends React.Component { clearTimeout(this.searchTimeoutId); - this.searchTimeoutId = setTimeout( + const searchTimeoutId = setTimeout( () => { searchUsers( term, this.props.params.team, options, (users) => { + if (searchTimeoutId !== this.searchTimeoutId) { + return; + } + this.setState({loading: true, search: true, users}); loadTeamMembersForProfilesList(users, this.props.params.team, this.loadComplete); } @@ -172,6 +176,8 @@ export default class UserList extends React.Component { }, Constants.SEARCH_TIMEOUT_MILLISECONDS ); + + this.searchTimeoutId = searchTimeoutId; } render() { diff --git a/webapp/components/channel_invite_modal.jsx b/webapp/components/channel_invite_modal.jsx index 355d23d53..5deec0794 100644 --- a/webapp/components/channel_invite_modal.jsx +++ b/webapp/components/channel_invite_modal.jsx @@ -117,19 +117,25 @@ export default class ChannelInviteModal extends React.Component { clearTimeout(this.searchTimeoutId); - this.searchTimeoutId = setTimeout( + const searchTimeoutId = setTimeout( () => { searchUsers( term, TeamStore.getCurrentId(), {not_in_channel_id: this.props.channel.id}, (users) => { + if (searchTimeoutId !== this.searchTimeoutId) { + return; + } + this.setState({search: true, users}); } ); }, Constants.SEARCH_TIMEOUT_MILLISECONDS ); + + this.searchTimeoutId = searchTimeoutId; } render() { diff --git a/webapp/components/member_list_channel.jsx b/webapp/components/member_list_channel.jsx index 75ecd8172..6f8a266ad 100644 --- a/webapp/components/member_list_channel.jsx +++ b/webapp/components/member_list_channel.jsx @@ -104,13 +104,17 @@ export default class MemberListChannel extends React.Component { clearTimeout(this.searchTimeoutId); - this.searchTimeoutId = setTimeout( + const searchTimeoutId = setTimeout( () => { searchUsers( term, TeamStore.getCurrentId(), {}, (users) => { + if (searchTimeoutId !== this.searchTimeoutId) { + return; + } + this.setState({ loading: true, search: true, @@ -125,6 +129,8 @@ export default class MemberListChannel extends React.Component { }, Constants.SEARCH_TIMEOUT_MILLISECONDS ); + + this.searchTimeoutId = searchTimeoutId; } render() { diff --git a/webapp/components/member_list_team.jsx b/webapp/components/member_list_team.jsx index a9db0e734..df17d7df2 100644 --- a/webapp/components/member_list_team.jsx +++ b/webapp/components/member_list_team.jsx @@ -23,6 +23,7 @@ export default class MemberListTeam extends React.Component { super(props); this.onChange = this.onChange.bind(this); + this.onTeamChange = this.onTeamChange.bind(this); this.onStatsChange = this.onStatsChange.bind(this); this.search = this.search.bind(this); this.loadComplete = this.loadComplete.bind(this); @@ -44,7 +45,7 @@ export default class MemberListTeam extends React.Component { componentDidMount() { UserStore.addInTeamChangeListener(this.onChange); UserStore.addStatusesChangeListener(this.onChange); - TeamStore.addChangeListener(this.onChange.bind(null, true)); + TeamStore.addChangeListener(this.onTeamChange); TeamStore.addStatsChangeListener(this.onStatsChange); loadProfilesAndTeamMembers(0, Constants.PROFILE_CHUNK_SIZE, TeamStore.getCurrentId(), this.loadComplete); @@ -54,7 +55,7 @@ export default class MemberListTeam extends React.Component { componentWillUnmount() { UserStore.removeInTeamChangeListener(this.onChange); UserStore.removeStatusesChangeListener(this.onChange); - TeamStore.removeChangeListener(this.onChange); + TeamStore.removeChangeListener(this.onTeamChange); TeamStore.removeStatsChangeListener(this.onStatsChange); } @@ -62,6 +63,10 @@ export default class MemberListTeam extends React.Component { this.setState({loading: false}); } + onTeamChange() { + this.onChange(true); + } + onChange(force) { if (this.state.search && !force) { return; @@ -90,13 +95,16 @@ export default class MemberListTeam extends React.Component { clearTimeout(this.searchTimeoutId); - this.searchTimeoutId = setTimeout( + const searchTimeoutId = setTimeout( () => { searchUsers( term, TeamStore.getCurrentId(), {}, (users) => { + if (searchTimeoutId !== this.searchTimeoutId) { + return; + } this.setState({loading: true, search: true, users, term, teamMembers: Object.assign([], TeamStore.getMembersInTeam())}); loadTeamMembersForProfilesList(users, TeamStore.getCurrentId(), this.loadComplete); } @@ -104,6 +112,8 @@ export default class MemberListTeam extends React.Component { }, Constants.SEARCH_TIMEOUT_MILLISECONDS ); + + this.searchTimeoutId = searchTimeoutId; } render() { diff --git a/webapp/components/more_channels.jsx b/webapp/components/more_channels.jsx index e4cff451d..d0b5f5399 100644 --- a/webapp/components/more_channels.jsx +++ b/webapp/components/more_channels.jsx @@ -107,17 +107,22 @@ export default class MoreChannels extends React.Component { clearTimeout(this.searchTimeoutId); - this.searchTimeoutId = setTimeout( + const searchTimeoutId = setTimeout( () => { searchMoreChannels( term, (channels) => { + if (searchTimeoutId !== this.searchTimeoutId) { + return; + } this.setState({search: true, channels}); } ); }, SEARCH_TIMEOUT_MILLISECONDS ); + + this.searchTimeoutId = searchTimeoutId; } render() { @@ -196,4 +201,4 @@ export default class MoreChannels extends React.Component { MoreChannels.propTypes = { onModalDismissed: React.PropTypes.func, handleNewChannel: React.PropTypes.func -}; \ No newline at end of file +}; diff --git a/webapp/stores/team_store.jsx b/webapp/stores/team_store.jsx index b2cb3ad26..6de47c65c 100644 --- a/webapp/stores/team_store.jsx +++ b/webapp/stores/team_store.jsx @@ -379,5 +379,7 @@ TeamStore.dispatchToken = AppDispatcher.register((payload) => { } }); +TeamStore.setMaxListeners(15); + window.TeamStore = TeamStore; export default TeamStore; -- cgit v1.2.3-1-g7c22