New: Many UI Updates and Performance Tweaks

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

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

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/addMovieActions.js

@@ -1,5 +1,4 @@
 import _ from 'lodash';
-import $ from 'jquery';
 import { createAction } from 'redux-actions';
 import { batchActions } from 'redux-batched-actions';
 import getSectionState from 'Utilities/State/getSectionState';
@@ -114,14 +113,14 @@ export const actionHandlers = handleThunks({
 
     const tmdbId = payload.tmdbId;
     const items = getState().addMovie.items;
-    const newSeries = getNewMovie(_.cloneDeep(_.find(items, { tmdbId })), payload);
+    const newMovie = getNewMovie(_.cloneDeep(_.find(items, { tmdbId })), payload);
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/movie',
       method: 'POST',
       contentType: 'application/json',
-      data: JSON.stringify(newSeries)
-    });
+      data: JSON.stringify(newMovie)
+    }).request;
 
     promise.done((data) => {
       dispatch(batchActions([

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';
@@ -237,14 +237,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/createReducers.js

@@ -1,13 +1,10 @@
 import { combineReducers } from 'redux';
 import { enableBatching } from 'redux-batched-actions';
-import { routerReducer } from 'react-router-redux';
 import actions from 'Store/Actions';
+import { connectRouter } from 'connected-react-router';
 
 const defaultState = {};
-
-const reducers = {
-  routing: routerReducer
-};
+const reducers = {};
 
 actions.forEach((action) => {
   const section = action.section;
@@ -17,4 +14,10 @@ actions.forEach((action) => {
 });
 
 export { defaultState };
-export default enableBatching(combineReducers(reducers));
+
+export default function(history) {
+  return enableBatching(combineReducers({
+    ...reducers,
+    router: connectRouter(history)
+  }));
+}

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';
@@ -149,7 +149,8 @@ export const persistState = [
   'history.pageSize',
   'history.sortKey',
   'history.sortDirection',
-  'history.selectedFilterKey'
+  'history.selectedFilterKey',
+  'history.columns'
 ];
 
 //
@@ -210,13 +211,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/importMovieActions.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';
@@ -194,22 +193,22 @@ export const actionHandlers = handleThunks({
       // Make sure we have a selected series and
       // the same series hasn't been added yet.
       if (selectedMovie && !_.some(acc, { tmdbId: selectedMovie.tmdbId })) {
-        const newSeries = getNewMovie(_.cloneDeep(selectedMovie), item);
-        newSeries.path = item.path;
+        const newMovie = getNewMovie(_.cloneDeep(selectedMovie), item);
+        newMovie.path = item.path;
 
         addedIds.push(id);
-        acc.push(newSeries);
+        acc.push(newMovie);
       }
 
       return acc;
     }, []);
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/movie/import',
       method: 'POST',
       contentType: 'application/json',
       data: JSON.stringify(allNewMovies)
-    });
+    }).request;
 
     promise.done((data) => {
       dispatch(batchActions([
@@ -219,7 +218,7 @@ export const actionHandlers = handleThunks({
           isImported: true
         }),
 
-        ...data.map((series) => updateItem({ section: 'movies', ...series })),
+        ...data.map((movie) => updateItem({ section: 'movies', ...movie })),
 
         ...addedIds.map((id) => removeItem({ section, id }))
       ]));

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';
@@ -103,10 +103,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/movieActions.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';
@@ -215,7 +215,7 @@ export const actionHandlers = handleThunks({
       isSaving: true
     }));
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: `/movie/${id}`,
       method: 'PUT',
       data: JSON.stringify({
@@ -223,7 +223,7 @@ export const actionHandlers = handleThunks({
         monitored
       }),
       dataType: 'json'
-    });
+    }).request;
 
     promise.done((data) => {
       dispatch(updateItem({

frontend/src/Store/Actions/movieEditorActions.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';
@@ -80,41 +80,41 @@ export const persistState = [
 //
 // Actions Types
 
-export const SET_SERIES_EDITOR_SORT = 'movieEditor/setSeriesEditorSort';
-export const SET_SERIES_EDITOR_FILTER = 'movieEditor/setSeriesEditorFilter';
-export const SAVE_SERIES_EDITOR = 'movieEditor/saveSeriesEditor';
-export const BULK_DELETE_SERIES = 'movieEditor/bulkDeleteSeries';
+export const SET_MOVIE_EDITOR_SORT = 'movieEditor/setMovieEditorSort';
+export const SET_MOVIE_EDITOR_FILTER = 'movieEditor/setMovieEditorFilter';
+export const SAVE_MOVIE_EDITOR = 'movieEditor/saveMovieEditor';
+export const BULK_DELETE_MOVIE = 'movieEditor/bulkDeleteMovie';
 //
 // Action Creators
 
-export const setSeriesEditorSort = createAction(SET_SERIES_EDITOR_SORT);
-export const setSeriesEditorFilter = createAction(SET_SERIES_EDITOR_FILTER);
-export const saveSeriesEditor = createThunk(SAVE_SERIES_EDITOR);
-export const bulkDeleteSeries = createThunk(BULK_DELETE_SERIES);
+export const setMovieEditorSort = createAction(SET_MOVIE_EDITOR_SORT);
+export const setMovieEditorFilter = createAction(SET_MOVIE_EDITOR_FILTER);
+export const saveMovieEditor = createThunk(SAVE_MOVIE_EDITOR);
+export const bulkDeleteMovie = createThunk(BULK_DELETE_MOVIE);
 //
 // Action Handlers
 
 export const actionHandlers = handleThunks({
-  [SAVE_SERIES_EDITOR]: function(getState, payload, dispatch) {
+  [SAVE_MOVIE_EDITOR]: function(getState, payload, dispatch) {
     dispatch(set({
       section,
       isSaving: true
     }));
 
-    const promise = $.ajax({
-      url: '/series/editor',
+    const promise = createAjaxRequest({
+      url: '/movie/editor',
       method: 'PUT',
       data: JSON.stringify(payload),
       dataType: 'json'
-    });
+    }).request;
 
     promise.done((data) => {
       dispatch(batchActions([
-        ...data.map((series) => {
+        ...data.map((movie) => {
           return updateItem({
-            id: series.id,
-            section: 'series',
-            ...series
+            id: movie.id,
+            section: 'movies',
+            ...movie
           });
         }),
 
@@ -135,18 +135,18 @@ export const actionHandlers = handleThunks({
     });
   },
 
-  [BULK_DELETE_SERIES]: function(getState, payload, dispatch) {
+  [BULK_DELETE_MOVIE]: function(getState, payload, dispatch) {
     dispatch(set({
       section,
       isDeleting: true
     }));
 
-    const promise = $.ajax({
-      url: '/series/editor',
+    const promise = createAjaxRequest({
+      url: '/movie/editor',
       method: 'DELETE',
       data: JSON.stringify(payload),
       dataType: 'json'
-    });
+    }).request;
 
     promise.done(() => {
       // SignaR will take care of removing the series from the collection
@@ -173,7 +173,7 @@ export const actionHandlers = handleThunks({
 
 export const reducers = createHandleActions({
 
-  [SET_SERIES_EDITOR_SORT]: createSetClientSideCollectionSortReducer(section),
-  [SET_SERIES_EDITOR_FILTER]: createSetClientSideCollectionFilterReducer(section)
+  [SET_MOVIE_EDITOR_SORT]: createSetClientSideCollectionSortReducer(section),
+  [SET_MOVIE_EDITOR_FILTER]: createSetClientSideCollectionFilterReducer(section)
 
 }, defaultState, section);

frontend/src/Store/Actions/movieFileActions.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 movieEntities from 'Movie/movieEntities';
 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: '/movieFile/bulk',
       method: 'DELETE',
       dataType: 'json',
       data: JSON.stringify({ movieFileIds })
-    });
+    }).request;
 
     promise.done(() => {
       const movies = getState().movies.items;
@@ -157,12 +157,12 @@ export const actionHandlers = handleThunks({
       data.quality = quality;
     }
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/movieFile/editor',
       method: 'PUT',
       dataType: 'json',
       data: JSON.stringify(data)
-    });
+    }).request;
 
     promise.done(() => {
       dispatch(batchActions([

frontend/src/Store/Actions/movieHistoryActions.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_SERIES_HISTORY]: function(getState, payload, dispatch) {
     dispatch(set({ section, isFetching: true }));
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/history/series',
       data: payload
-    });
+    }).request;
 
     promise.done((data) => {
       dispatch(batchActions([
@@ -77,13 +77,13 @@ export const actionHandlers = handleThunks({
       seasonNumber
     } = payload;
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/history/failed',
       method: 'POST',
       data: {
         id: historyId
       }
-    });
+    }).request;
 
     promise.done(() => {
       dispatch(fetchMovieHistory({ seriesId, seasonNumber }));

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).request.then((data) => {
     return requestAction({
       action: 'continueOAuth',
       queryParams: {

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';
@@ -46,16 +46,18 @@ export const actionHandlers = handleThunks({
 
     const {
       path,
-      allowFoldersWithoutTrailingSlashes = false
+      allowFoldersWithoutTrailingSlashes = false,
+      includeFiles = false
     } = payload;
 
-    const promise = $.ajax({
+    const promise = createAjaxRequest({
       url: '/filesystem',
       data: {
         path,
-        allowFoldersWithoutTrailingSlashes
+        allowFoldersWithoutTrailingSlashes,
+        includeFiles
       }
-    });
+    }).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';
@@ -63,28 +63,11 @@ export const defaultState = {
         isModifiable: false
       },
       {
-        name: 'series.sortTitle',
-        label: 'Series',
+        name: 'movie.sortTitle',
+        label: 'Movie',
         isSortable: true,
         isVisible: true
       },
-      {
-        name: 'episode',
-        label: 'Episode',
-        isSortable: true,
-        isVisible: true
-      },
-      {
-        name: 'episode.title',
-        label: 'Episode Title',
-        isVisible: true
-      },
-      {
-        name: 'episode.airDateUtc',
-        label: 'Episode Air Date',
-        isSortable: true,
-        isVisible: false
-      },
       {
         name: 'quality',
         label: 'Quality',
@@ -109,6 +92,12 @@ export const defaultState = {
         isSortable: true,
         isVisible: false
       },
+      {
+        name: 'title',
+        label: 'Release Title',
+        isSortable: true,
+        isVisible: false
+      },
       {
         name: 'estimatedCompletionTime',
         label: 'Timeleft',
@@ -246,10 +235,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([
@@ -291,12 +280,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([
@@ -343,10 +332,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());
@@ -375,12 +364,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';
@@ -27,6 +27,9 @@ export const defaultState = {
   sortKey: 'releaseWeight',
   sortDirection: sortDirections.ASCENDING,
   sortPredicates: {
+    age: function(item, direction) {
+      return item.ageMinutes;
+    },
     peers: function(item, direction) {
       const seeders = item.seeders || 0;
       const leechers = item.leechers || 0;
@@ -210,12 +213,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/Middleware/middlewares.js

@@ -1,6 +1,6 @@
 import { applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
-import { routerMiddleware } from 'react-router-redux';
+import { routerMiddleware } from 'connected-react-router';
 import createSentryMiddleware from './createSentryMiddleware';
 import createPersistState from './createPersistState';
 

frontend/src/Store/Selectors/createDeepEqualSelector.js

@@ -0,0 +1,9 @@
+import { createSelectorCreator, defaultMemoize } from 'reselect';
+import _ from 'lodash';
+
+const createDeepEqualSelector = createSelectorCreator(
+  defaultMemoize,
+  _.isEqual
+);
+
+export default createDeepEqualSelector;

frontend/src/Store/Selectors/createExecutingCommandsSelector.js

@@ -0,0 +1,13 @@
+import { createSelector } from 'reselect';
+import { isCommandExecuting } from 'Utilities/Command';
+
+function createExecutingCommandsSelector() {
+  return createSelector(
+    (state) => state.commands.items,
+    (commands) => {
+      return commands.filter((command) => isCommandExecuting(command));
+    }
+  );
+}
+
+export default createExecutingCommandsSelector;

frontend/src/Store/Selectors/createMovieClientSideCollectionItemsSelector.js

@@ -0,0 +1,36 @@
+import { createSelector } from 'reselect';
+import createDeepEqualSelector from './createDeepEqualSelector';
+import createClientSideCollectionSelector from './createClientSideCollectionSelector';
+
+function createUnoptimizedSelector(uiSection) {
+  return createSelector(
+    createClientSideCollectionSelector('movies', uiSection),
+    (movies) => {
+      const items = movies.items.map((s) => {
+        const {
+          id,
+          sortTitle
+        } = s;
+
+        return {
+          id,
+          sortTitle
+        };
+      });
+
+      return {
+        ...movies,
+        items
+      };
+    }
+  );
+}
+
+function createMovieClientSideCollectionItemsSelector(uiSection) {
+  return createDeepEqualSelector(
+    createUnoptimizedSelector(uiSection),
+    (movies) => movies
+  );
+}
+
+export default createMovieClientSideCollectionItemsSelector;

frontend/src/Store/Selectors/createMovieQualityProfileSelector.js

@@ -0,0 +1,16 @@
+import { createSelector } from 'reselect';
+import createMovieSelector from './createMovieSelector';
+
+function createMovieQualityProfileSelector() {
+  return createSelector(
+    (state) => state.settings.qualityProfiles.items,
+    createMovieSelector(),
+    (qualityProfiles, movie) => {
+      return qualityProfiles.find((profile) => {
+        return profile.id === movie.qualityProfileId;
+      });
+    }
+  );
+}
+
+export default createMovieQualityProfileSelector;

frontend/src/Store/Selectors/createMovieSelector.js

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import { createSelector } from 'reselect';
 import createAllMoviesSelector from './createAllMoviesSelector';
 
@@ -6,8 +5,8 @@ function createMovieSelector() {
   return createSelector(
     (state, { movieId }) => movieId,
     createAllMoviesSelector(),
-    (movieId, movies) => {
-      return _.find(movies, { id: movieId });
+    (movieId, allMovies) => {
+      return allMovies.find((movie) => movie.id === movieId);
     }
   );
 }

frontend/src/Store/Selectors/createQualityProfileSelector.js

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import { createSelector } from 'reselect';
 
 function createQualityProfileSelector() {
@@ -6,7 +5,9 @@ function createQualityProfileSelector() {
     (state, { qualityProfileId }) => qualityProfileId,
     (state) => state.settings.qualityProfiles.items,
     (qualityProfileId, qualityProfiles) => {
-      return _.find(qualityProfiles, { id: qualityProfileId });
+      return qualityProfiles.find((profile) => {
+        return profile.id === qualityProfileId;
+      });
     }
   );
 }

frontend/src/Store/createAppStore.js

@@ -1,10 +1,10 @@
 import { createStore } from 'redux';
-import reducers, { defaultState } from 'Store/Actions/reducers';
+import createReducers, { defaultState } from 'Store/Actions/createReducers';
 import middlewares from 'Store/Middleware/middlewares';
 
 function createAppStore(history) {
   const appStore = createStore(
-    reducers,
+    createReducers(history),
     defaultState,
     middlewares(history)
   );