Fixed: Abort old fetch items requests in manual import

Fixes #4375

frontend/src/Store/Actions/interactiveImportActions.js

@@ -18,6 +18,7 @@ export const section = 'interactiveImport';
 
 const albumsSection = `${section}.albums`;
 const trackFilesSection = `${section}.trackFiles`;
+let abortCurrentFetchRequest = null;
 let abortCurrentRequest = null;
 let currentIds = [];
 
@@ -127,6 +128,11 @@ export const clearInteractiveImportTrackFiles = createAction(CLEAR_INTERACTIVE_I
 // Action Handlers
 export const actionHandlers = handleThunks({
   [FETCH_INTERACTIVE_IMPORT_ITEMS]: function(getState, payload, dispatch) {
+    if (abortCurrentFetchRequest) {
+      abortCurrentFetchRequest();
+      abortCurrentFetchRequest = null;
+    }
+
     if (!payload.downloadId && !payload.folder) {
       dispatch(set({ section, error: { message: '`downloadId` or `folder` is required.' } }));
       return;
@@ -134,12 +140,14 @@ export const actionHandlers = handleThunks({
 
     dispatch(set({ section, isFetching: true }));
 
-    const promise = createAjaxRequest({
+    const { request, abortRequest } = createAjaxRequest({
       url: '/manualimport',
       data: payload
-    }).request;
+    });
+
+    abortCurrentFetchRequest = abortRequest;
 
-    promise.done((data) => {
+    request.done((data) => {
       dispatch(batchActions([
         update({ section, data }),
 
@@ -152,7 +160,11 @@ export const actionHandlers = handleThunks({
       ]));
     });
 
-    promise.fail((xhr) => {
+    request.fail((xhr) => {
+      if (xhr.aborted) {
+        return;
+      }
+
       dispatch(set({
         section,
         isFetching: false,