New: Cleanup UI tooling, Update to Webpack 4, Gulp 4 (#655)

* New: Webpack 4

* New: Gulp 4

* New: Transpile UI for old browsers

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>

frontend/src/Store/Actions/Creators/createBatchToggleAlbumMonitoredHandler.js

@@ -1,4 +1,4 @@
-import $ from 'jquery';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import updateAlbums from 'Utilities/Album/updateAlbums';
 import getSectionState from 'Utilities/State/getSectionState';
 
@@ -15,12 +15,12 @@ function createBatchToggleAlbumMonitoredHandler(section, fetchHandler) {
       isSaving: true
     }));
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/album/monitor',
       method: 'PUT',
       data: JSON.stringify({ albumIds, monitored }),
       dataType: 'json'
-    });
+    }).request;
 
     promise.done(() => {
       dispatch(updateAlbums(section, state.items, albumIds, {

frontend/src/Store/Actions/Creators/createFetchSchemaHandler.js

@@ -1,13 +1,13 @@
-import $ from 'jquery';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import { set } from '../baseActions';
 
 function createFetchSchemaHandler(section, url) {
   return function(getState, payload, dispatch) {
     dispatch(set({ section, isSchemaFetching: true }));
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url
-    });
+    }).request;
 
     promise.done((data) => {
       dispatch(set({

frontend/src/Store/Actions/Creators/createFetchServerSideCollectionHandler.js

@@ -1,6 +1,6 @@
 import _ from 'lodash';
-import $ from 'jquery';
 import { batchActions } from 'redux-batched-actions';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import findSelectedFilters from 'Utilities/Filter/findSelectedFilters';
 import getSectionState from 'Utilities/State/getSectionState';
 import { set, updateServerSideCollection } from '../baseActions';
@@ -35,10 +35,10 @@ function createFetchServerSideCollectionHandler(section, url, fetchDataAugmenter
       data[filter.key] = filter.value;
     });
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url,
       data
-    });
+    }).request;
 
     promise.done((response) => {
       dispatch(batchActions([

frontend/src/Store/Actions/Creators/createRemoveItemHandler.js

@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import { batchActions } from 'redux-batched-actions';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import { set, removeItem } from '../baseActions';
 
 function createRemoveItemHandler(section, url) {
@@ -16,7 +17,7 @@ function createRemoveItemHandler(section, url) {
       method: 'DELETE'
     };
 
-    const promise = $.ajax(ajaxOptions);
+    const promise = createAjaxRequest(ajaxOptions).request;
 
     promise.done((data) => {
       dispatch(batchActions([

frontend/src/Store/Actions/Creators/createSaveHandler.js

@@ -1,5 +1,5 @@
-import $ from 'jquery';
 import { batchActions } from 'redux-batched-actions';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import getSectionState from 'Utilities/State/getSectionState';
 import { set, update } from '../baseActions';
 
@@ -10,12 +10,12 @@ function createSaveHandler(section, url) {
     const state = getSectionState(getState(), section, true);
     const saveData = Object.assign({}, state.item, state.pendingChanges, payload);
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url,
       method: 'PUT',
       dataType: 'json',
       data: JSON.stringify(saveData)
-    });
+    }).request;
 
     promise.done((data) => {
       dispatch(batchActions([

frontend/src/Store/Actions/Settings/delayProfiles.js

@@ -1,6 +1,6 @@
 import _ from 'lodash';
-import $ from 'jquery';
 import { createAction } from 'redux-actions';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import { createThunk } from 'Store/thunks';
 import createSetSettingValueReducer from 'Store/Actions/Creators/Reducers/createSetSettingValueReducer';
 import createFetchHandler from 'Store/Actions/Creators/createFetchHandler';
@@ -82,10 +82,10 @@ export default {
       const after = moveIndex > 0 ? _.find(delayProfiles, { order: moveIndex }) : null;
       const afterQueryParam = after ? `after=${after.id}` : '';
 
-      const promise = $.ajax({
+      const promise = createAjaxRequest({
         method: 'PUT',
         url: `/delayprofile/reorder/${id}?${afterQueryParam}`
-      });
+      }).request;
 
       promise.done((data) => {
         dispatch(update({ section, data }));

frontend/src/Store/Actions/Settings/namingExamples.js

@@ -1,5 +1,5 @@
-import $ from 'jquery';
 import { batchActions } from 'redux-batched-actions';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import { createThunk } from 'Store/thunks';
 import { set, update } from 'Store/Actions/baseActions';
 
@@ -42,10 +42,10 @@ export default {
 
       const naming = getState().settings.naming;
 
-      const promise = $.ajax({
+      const promise = createAjaxRequest({
         url: '/config/naming/examples',
         data: Object.assign({}, naming.item, naming.pendingChanges)
-      });
+      }).request;
 
       promise.done((data) => {
         dispatch(batchActions([

frontend/src/Store/Actions/Settings/qualityDefinitions.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
-import $ from 'jquery';
 import { createAction } from 'redux-actions';
 import { batchActions } from 'redux-batched-actions';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import getSectionState from 'Utilities/State/getSectionState';
 import updateSectionState from 'Utilities/State/updateSectionState';
 import { createThunk } from 'Store/thunks';
@@ -75,11 +75,11 @@ export default {
         isSaving: true
       }));
 
-      const promise = $.ajax({
+      const promise = createAjaxRequest({
         method: 'PUT',
         url: '/qualityDefinition/update',
         data: JSON.stringify(upatedDefinitions)
-      });
+      }).request;
 
       promise.done((data) => {
         dispatch(batchActions([

frontend/src/Store/Actions/addArtistActions.js

@@ -1,5 +1,4 @@
 import _ from 'lodash';
-import $ from 'jquery';
 import { createAction } from 'redux-actions';
 import { batchActions } from 'redux-batched-actions';
 import monitorOptions from 'Utilities/Artist/monitorOptions';
@@ -120,12 +119,12 @@ export const actionHandlers = handleThunks({
     const items = getState().addArtist.items;
     const newArtist = getNewArtist(_.cloneDeep(_.find(items, { foreignArtistId })), payload);
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/artist',
       method: 'POST',
       contentType: 'application/json',
       data: JSON.stringify(newArtist)
-    });
+    }).request;
 
     promise.done((data) => {
       dispatch(batchActions([

frontend/src/Store/Actions/albumActions.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
-import $ from 'jquery';
 import { createAction } from 'redux-actions';
 import { batchActions } from 'redux-batched-actions';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import { sortDirections } from 'Helpers/Props';
 import { createThunk, handleThunks } from 'Store/thunks';
 import createSetClientSideCollectionSortReducer from './Creators/Reducers/createSetClientSideCollectionSortReducer';
@@ -157,12 +157,12 @@ export const actionHandlers = handleThunks({
       isSaving: true
     }));
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: `/album/${albumId}`,
       method: 'PUT',
       data: JSON.stringify({ monitored }),
       dataType: 'json'
-    });
+    }).request;
 
     promise.done((data) => {
       dispatch(updateItem({
@@ -199,12 +199,12 @@ export const actionHandlers = handleThunks({
       })
     ));
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/album/monitor',
       method: 'PUT',
       data: JSON.stringify({ albumIds, monitored }),
       dataType: 'json'
-    });
+    }).request;
 
     promise.done((data) => {
       dispatch(batchActions(

frontend/src/Store/Actions/albumHistoryActions.js

@@ -1,6 +1,6 @@
-import $ from 'jquery';
 import { createAction } from 'redux-actions';
 import { batchActions } from 'redux-batched-actions';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import { createThunk, handleThunks } from 'Store/thunks';
 import { sortDirections } from 'Helpers/Props';
 import createHandleActions from './Creators/createHandleActions';
@@ -51,10 +51,10 @@ export const actionHandlers = handleThunks({
       albumId: payload.albumId
     };
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/history',
       data: queryParams
-    });
+    }).request;
 
     promise.done((data) => {
       dispatch(batchActions([
@@ -85,13 +85,13 @@ export const actionHandlers = handleThunks({
       albumId
     } = payload;
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/history/failed',
       method: 'POST',
       data: {
         id: historyId
       }
-    });
+    }).request;
 
     promise.done(() => {
       dispatch(fetchAlbumHistory({ albumId }));

frontend/src/Store/Actions/albumStudioActions.js

@@ -1,5 +1,5 @@
-import $ from 'jquery';
 import { createAction } from 'redux-actions';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import { filterBuilderTypes, filterBuilderValueTypes, sortDirections } from 'Helpers/Props';
 import { createThunk, handleThunks } from 'Store/thunks';
 import createSetClientSideCollectionSortReducer from './Creators/Reducers/createSetClientSideCollectionSortReducer';
@@ -128,7 +128,7 @@ export const actionHandlers = handleThunks({
       isSaving: true
     }));
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/albumStudio',
       method: 'POST',
       data: JSON.stringify({
@@ -136,7 +136,7 @@ export const actionHandlers = handleThunks({
         monitoringOptions: { monitor }
       }),
       dataType: 'json'
-    });
+    }).request;
 
     promise.done((data) => {
       dispatch(fetchAlbums());

frontend/src/Store/Actions/artistActions.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
-import $ from 'jquery';
 import { createAction } from 'redux-actions';
 import { batchActions } from 'redux-batched-actions';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import dateFilterPredicate from 'Utilities/Date/dateFilterPredicate';
 import { filterTypePredicates, filterTypes, sortDirections } from 'Helpers/Props';
 import { createThunk, handleThunks } from 'Store/thunks';
@@ -236,7 +236,7 @@ export const actionHandlers = handleThunks({
       isSaving: true
     }));
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: `/artist/${id}`,
       method: 'PUT',
       data: JSON.stringify({
@@ -244,7 +244,7 @@ export const actionHandlers = handleThunks({
         monitored
       }),
       dataType: 'json'
-    });
+    }).request;
 
     promise.done((data) => {
       dispatch(updateItem({
@@ -285,7 +285,7 @@ export const actionHandlers = handleThunks({
 
     season.monitored = monitored;
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: `/artist/${id}`,
       method: 'PUT',
       data: JSON.stringify({
@@ -293,7 +293,7 @@ export const actionHandlers = handleThunks({
         seasons
       }),
       dataType: 'json'
-    });
+    }).request;
 
     promise.done((data) => {
       const albums = _.filter(getState().albums.items, { artistId: id, seasonNumber });

frontend/src/Store/Actions/artistEditorActions.js

@@ -1,6 +1,6 @@
-import $ from 'jquery';
 import { createAction } from 'redux-actions';
 import { batchActions } from 'redux-batched-actions';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import { filterBuilderTypes, filterBuilderValueTypes, sortDirections } from 'Helpers/Props';
 import { createThunk, handleThunks } from 'Store/thunks';
 import createSetClientSideCollectionSortReducer from './Creators/Reducers/createSetClientSideCollectionSortReducer';
@@ -115,12 +115,12 @@ export const actionHandlers = handleThunks({
       isSaving: true
     }));
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/artist/editor',
       method: 'PUT',
       data: JSON.stringify(payload),
       dataType: 'json'
-    });
+    }).request;
 
     promise.done((data) => {
       dispatch(batchActions([
@@ -155,12 +155,12 @@ export const actionHandlers = handleThunks({
       isDeleting: true
     }));
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/artist/editor',
       method: 'DELETE',
       data: JSON.stringify(payload),
       dataType: 'json'
-    });
+    }).request;
 
     promise.done(() => {
       // SignalR will take care of removing the artist from the collection

frontend/src/Store/Actions/artistHistoryActions.js

@@ -1,6 +1,6 @@
-import $ from 'jquery';
 import { createAction } from 'redux-actions';
 import { batchActions } from 'redux-batched-actions';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import { createThunk, handleThunks } from 'Store/thunks';
 import createHandleActions from './Creators/createHandleActions';
 import { set, update } from './baseActions';
@@ -42,10 +42,10 @@ export const actionHandlers = handleThunks({
   [FETCH_ARTIST_HISTORY]: function(getState, payload, dispatch) {
     dispatch(set({ section, isFetching: true }));
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/history/artist',
       data: payload
-    });
+    }).request;
 
     promise.done((data) => {
       dispatch(batchActions([
@@ -77,13 +77,13 @@ export const actionHandlers = handleThunks({
       albumId
     } = payload;
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/history/failed',
       method: 'POST',
       data: {
         id: historyId
       }
-    });
+    }).request;
 
     promise.done(() => {
       dispatch(fetchArtistHistory({ artistId, albumId }));

frontend/src/Store/Actions/calendarActions.js

@@ -1,8 +1,8 @@
 import _ from 'lodash';
-import $ from 'jquery';
 import { createAction } from 'redux-actions';
 import { batchActions } from 'redux-batched-actions';
 import moment from 'moment';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import { filterTypes } from 'Helpers/Props';
 import { createThunk, handleThunks } from 'Store/thunks';
 import * as calendarViews from 'Calendar/calendarViews';
@@ -236,14 +236,14 @@ export const actionHandlers = handleThunks({
 
     dispatch(set(attrs));
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/calendar',
       data: {
         unmonitored,
         start,
         end
       }
-    });
+    }).request;
 
     promise.done((data) => {
       dispatch(batchActions([

frontend/src/Store/Actions/commandActions.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
-import $ from 'jquery';
 import { createAction } from 'redux-actions';
 import { batchActions } from 'redux-batched-actions';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import { isSameCommand } from 'Utilities/Command';
 import { messageTypes } from 'Helpers/Props';
 import { createThunk, handleThunks } from 'Store/thunks';
@@ -138,11 +138,11 @@ export function executeCommandHelper( payload, dispatch) {
     lastCommand = null;
   }, 5000);
 
-  const promise = $.ajax({
+  const promise = createAjaxRequest({
     url: '/command',
     method: 'POST',
     data: JSON.stringify(payload)
-  });
+  }).request;
 
   return promise.then((data) => {
     dispatch(addCommand(data));

frontend/src/Store/Actions/historyActions.js

@@ -1,5 +1,5 @@
-import $ from 'jquery';
 import { createAction } from 'redux-actions';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import serverSideCollectionHandlers from 'Utilities/serverSideCollectionHandlers';
 import { filterTypes, sortDirections } from 'Helpers/Props';
 import { createThunk, handleThunks } from 'Store/thunks';
@@ -243,13 +243,13 @@ export const actionHandlers = handleThunks({
       isMarkingAsFailed: true
     }));
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/history/failed',
       method: 'POST',
       data: {
         id
       }
-    });
+    }).request;
 
     promise.done(() => {
       dispatch(updateItem({

frontend/src/Store/Actions/importArtistActions.js

@@ -1,5 +1,4 @@
 import _ from 'lodash';
-import $ from 'jquery';
 import { createAction } from 'redux-actions';
 import { batchActions } from 'redux-batched-actions';
 import createAjaxRequest from 'Utilities/createAjaxRequest';
@@ -229,12 +228,12 @@ export const actionHandlers = handleThunks({
       return acc;
     }, []);
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/artist/import',
       method: 'POST',
       contentType: 'application/json',
       data: JSON.stringify(allNewArtist)
-    });
+    }).request;
 
     promise.done((data) => {
       dispatch(batchActions([

frontend/src/Store/Actions/interactiveImportActions.js

@@ -1,7 +1,7 @@
-import $ from 'jquery';
 import moment from 'moment';
 import { createAction } from 'redux-actions';
 import { batchActions } from 'redux-batched-actions';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import updateSectionState from 'Utilities/State/updateSectionState';
 import { createThunk, handleThunks } from 'Store/thunks';
 import { sortDirections } from 'Helpers/Props';
@@ -107,10 +107,10 @@ export const actionHandlers = handleThunks({
 
     dispatch(set({ section, isFetching: true }));
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/manualimport',
       data: payload
-    });
+    }).request;
 
     promise.done((data) => {
       dispatch(batchActions([

frontend/src/Store/Actions/oAuthActions.js

@@ -1,6 +1,7 @@
 import $ from 'jquery';
 import { createAction } from 'redux-actions';
 import { batchActions } from 'redux-batched-actions';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import requestAction from 'Utilities/requestAction';
 import getSectionState from 'Utilities/State/getSectionState';
 import updateSectionState from 'Utilities/State/updateSectionState';
@@ -88,7 +89,7 @@ function showOAuthWindow(url, payload) {
 }
 
 function executeIntermediateRequest(payload, ajaxOptions) {
-  return $.ajax(ajaxOptions).then((data) => {
+  return createAjaxRequest(ajaxOptions).then((data) => {
     return requestAction({
       action: 'continueOAuth',
       queryParams: {
@@ -97,7 +98,7 @@ function executeIntermediateRequest(payload, ajaxOptions) {
       },
       ...payload
     });
-  });
+  }).request;
 }
 
 //

frontend/src/Store/Actions/pathActions.js

@@ -1,5 +1,5 @@
-import $ from 'jquery';
 import { createAction } from 'redux-actions';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import { createThunk, handleThunks } from 'Store/thunks';
 import createHandleActions from './Creators/createHandleActions';
 import { set } from './baseActions';
@@ -49,13 +49,13 @@ export const actionHandlers = handleThunks({
       allowFoldersWithoutTrailingSlashes = false
     } = payload;
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/filesystem',
       data: {
         path,
         allowFoldersWithoutTrailingSlashes
       }
-    });
+    }).request;
 
     promise.done((data) => {
       dispatch(updatePaths({ path, ...data }));

frontend/src/Store/Actions/queueActions.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
-import $ from 'jquery';
 import { createAction } from 'redux-actions';
 import { batchActions } from 'redux-batched-actions';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import serverSideCollectionHandlers from 'Utilities/serverSideCollectionHandlers';
 import { sortDirections } from 'Helpers/Props';
 import { createThunk, handleThunks } from 'Store/thunks';
@@ -247,10 +247,10 @@ export const actionHandlers = handleThunks({
 
     dispatch(updateItem({ section: paged, id, isGrabbing: true }));
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: `/queue/grab/${id}`,
       method: 'POST'
-    });
+    }).request;
 
     promise.done((data) => {
       dispatch(batchActions([
@@ -292,12 +292,12 @@ export const actionHandlers = handleThunks({
       })
     ]));
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/queue/grab/bulk',
       method: 'POST',
       dataType: 'json',
       data: JSON.stringify(payload)
-    });
+    }).request;
 
     promise.done((data) => {
       dispatch(batchActions([
@@ -344,10 +344,10 @@ export const actionHandlers = handleThunks({
 
     dispatch(updateItem({ section: paged, id, isRemoving: true }));
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: `/queue/${id}?blacklist=${blacklist}`,
       method: 'DELETE'
-    });
+    }).request;
 
     promise.done((data) => {
       dispatch(fetchQueue());
@@ -376,12 +376,12 @@ export const actionHandlers = handleThunks({
       set({ section: paged, isRemoving: true })
     ]));
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: `/queue/bulk?blacklist=${blacklist}`,
       method: 'DELETE',
       dataType: 'json',
       data: JSON.stringify({ ids })
-    });
+    }).request;
 
     promise.done((data) => {
       dispatch(batchActions([

frontend/src/Store/Actions/releaseActions.js

@@ -1,5 +1,5 @@
-import $ from 'jquery';
 import { createAction } from 'redux-actions';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import { filterBuilderTypes, filterBuilderValueTypes, filterTypes, sortDirections } from 'Helpers/Props';
 import { createThunk, handleThunks } from 'Store/thunks';
 import createSetClientSideCollectionSortReducer from './Creators/Reducers/createSetClientSideCollectionSortReducer';
@@ -210,12 +210,12 @@ export const actionHandlers = handleThunks({
 
     dispatch(updateRelease({ guid, isGrabbing: true }));
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/release',
       method: 'POST',
       contentType: 'application/json',
       data: JSON.stringify(payload)
-    });
+    }).request;
 
     promise.done((data) => {
       dispatch(updateRelease({

frontend/src/Store/Actions/rootFolderActions.js

@@ -1,5 +1,5 @@
-import $ from 'jquery';
 import { batchActions } from 'redux-batched-actions';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import { createThunk, handleThunks } from 'Store/thunks';
 import createFetchHandler from './Creators/createFetchHandler';
 import createHandleActions from './Creators/createHandleActions';
@@ -58,12 +58,12 @@ export const actionHandlers = handleThunks({
       isSaving: true
     }));
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/rootFolder',
       method: 'POST',
       data: JSON.stringify({ path }),
       dataType: 'json'
-    });
+    }).request;
 
     promise.done((data) => {
       dispatch(batchActions([

frontend/src/Store/Actions/systemActions.js

@@ -1,5 +1,5 @@
-import $ from 'jquery';
 import { createAction } from 'redux-actions';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import serverSideCollectionHandlers from 'Utilities/serverSideCollectionHandlers';
 import { filterTypes, sortDirections } from 'Helpers/Props';
 import { createThunk, handleThunks } from 'Store/thunks';
@@ -302,7 +302,7 @@ export const actionHandlers = handleThunks({
       }));
     }
 
-    const promise = $.ajax(ajaxOptions);
+    const promise = createAjaxRequest(ajaxOptions).request;
 
     promise.done((data) => {
       dispatch(set({
@@ -344,10 +344,10 @@ export const actionHandlers = handleThunks({
   ),
 
   [RESTART]: function(getState, payload, dispatch) {
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/system/restart',
       method: 'POST'
-    });
+    }).request;
 
     promise.done(() => {
       dispatch(setAppValue({ isRestarting: true }));
@@ -355,7 +355,7 @@ export const actionHandlers = handleThunks({
   },
 
   [SHUTDOWN]: function() {
-    $.ajax({
+    createAjaxRequest({
       url: '/system/shutdown',
       method: 'POST'
     });

frontend/src/Store/Actions/tagActions.js

@@ -1,4 +1,4 @@
-import $ from 'jquery';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import { createThunk, handleThunks } from 'Store/thunks';
 import createFetchHandler from './Creators/createFetchHandler';
 import createRemoveItemHandler from './Creators/createRemoveItemHandler';
@@ -50,11 +50,11 @@ export const actionHandlers = handleThunks({
   [FETCH_TAGS]: createFetchHandler(section, '/tag'),
 
   [ADD_TAG]: function(getState, payload, dispatch) {
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/tag',
       method: 'POST',
       data: JSON.stringify(payload.tag)
-    });
+    }).request;
 
     promise.done((data) => {
       const tags = getState().tags.items.slice();

frontend/src/Store/Actions/trackFileActions.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
-import $ from 'jquery';
 import { createAction } from 'redux-actions';
 import { batchActions } from 'redux-batched-actions';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import { createThunk, handleThunks } from 'Store/thunks';
 import albumEntities from 'Album/albumEntities';
 import createFetchHandler from './Creators/createFetchHandler';
@@ -90,12 +90,12 @@ export const actionHandlers = handleThunks({
 
     dispatch(set({ section, isDeleting: true }));
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/trackFile/bulk',
       method: 'DELETE',
       dataType: 'json',
       data: JSON.stringify({ trackFileIds })
-    });
+    }).request;
 
     promise.done(() => {
       const tracks = getState().tracks.items;
@@ -157,12 +157,12 @@ export const actionHandlers = handleThunks({
       data.quality = quality;
     }
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/trackFile/editor',
       method: 'PUT',
       dataType: 'json',
       data: JSON.stringify(data)
-    });
+    }).request;
 
     promise.done(() => {
       dispatch(batchActions([