bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

AutosuggestAccountInput: prevent race condition by cancelling pending requests

Browse source
This commit is contained in:
Alex Gleason 2021-10-14 10:05:57 -05:00
parent 92c164dc6b
commit e8005b9cf6
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 13 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/soapbox/actions/accounts.js
View file

@ -947,10 +947,10 @@ export function unpinAccountFail(error) {
};
}
export function accountSearch(params) {
export function accountSearch(params, cancelToken) {
return (dispatch, getState) => {
dispatch({ type: ACCOUNT_SEARCH_REQUEST, params });
return api(getState).get('/api/v1/accounts/search', { params }).then(({ data: accounts }) => {
return api(getState).get('/api/v1/accounts/search', { params, cancelToken }).then(({ data: accounts }) => {
dispatch(importFetchedAccounts(accounts));
dispatch({ type: ACCOUNT_SEARCH_SUCCESS, accounts });
return accounts;

12
app/soapbox/components/autosuggest_account_input.js
View file

@ -1,6 +1,7 @@
import React from 'react';
import AutosuggestInput from './autosuggest_input';
import PropTypes from 'prop-types';
import { CancelToken } from 'axios';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
import { injectIntl, defineMessages } from 'react-intl';
@ -29,8 +30,17 @@ class AutosuggestAccountInput extends ImmutablePureComponent {
accountIds: ImmutableOrderedSet(),
}
source = CancelToken.source();
refreshCancelToken = () => {
this.source.cancel();
this.source = CancelToken.source();
return this.source;
}
handleAccountSearch = throttle(q => {
const { dispatch } = this.props;
const source = this.refreshCancelToken();
const params = {
q,
@ -38,7 +48,7 @@ class AutosuggestAccountInput extends ImmutablePureComponent {
limit: 4,
};
dispatch(accountSearch(params))
dispatch(accountSearch(params, source.token))
.then(accounts => {
const accountIds = accounts.map(account => account.id);
this.setState({ accountIds: ImmutableOrderedSet(accountIds) });