From e8005b9cf630f40875daaa8a70f7cfac00107fc0 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 14 Oct 2021 10:05:57 -0500
Subject: [PATCH] AutosuggestAccountInput: prevent race condition by cancelling
 pending requests

---
 app/soapbox/actions/accounts.js                     |  4 ++--
 app/soapbox/components/autosuggest_account_input.js | 12 +++++++++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/actions/accounts.js b/app/soapbox/actions/accounts.js
index 581a44081..31b44ecb1 100644
--- a/app/soapbox/actions/accounts.js
+++ b/app/soapbox/actions/accounts.js
@@ -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;
diff --git a/app/soapbox/components/autosuggest_account_input.js b/app/soapbox/components/autosuggest_account_input.js
index 95f38ba79..0684a176e 100644
--- a/app/soapbox/components/autosuggest_account_input.js
+++ b/app/soapbox/components/autosuggest_account_input.js
@@ -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) });