diff --git a/frontend/src/Components/Form/MetadataProfileSelectInputConnector.js b/frontend/src/Components/Form/MetadataProfileSelectInputConnector.js
index 3fc6e593d..997c53977 100644
--- a/frontend/src/Components/Form/MetadataProfileSelectInputConnector.js
+++ b/frontend/src/Components/Form/MetadataProfileSelectInputConnector.js
@@ -4,12 +4,13 @@ import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import sortByName from 'Utilities/Array/sortByName';
+import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
import { metadataProfileNames } from 'Helpers/Props';
import SelectInput from './SelectInput';
function createMapStateToProps() {
return createSelector(
- (state) => state.settings.metadataProfiles,
+ createSortedSectionSelector('settings.metadataProfiles', sortByName),
(state, { includeNoChange }) => includeNoChange,
(state, { includeMixed }) => includeMixed,
(state, { includeNone }) => includeNone,
@@ -18,7 +19,7 @@ function createMapStateToProps() {
const profiles = metadataProfiles.items.filter((item) => item.name !== metadataProfileNames.NONE);
const noneProfile = metadataProfiles.items.find((item) => item.name === metadataProfileNames.NONE);
- const values = _.map(profiles.sort(sortByName), (metadataProfile) => {
+ const values = _.map(profiles, (metadataProfile) => {
return {
key: metadataProfile.id,
value: metadataProfile.name
diff --git a/frontend/src/Components/Form/QualityProfileSelectInputConnector.js b/frontend/src/Components/Form/QualityProfileSelectInputConnector.js
index 16e0e46f2..bdfaf4576 100644
--- a/frontend/src/Components/Form/QualityProfileSelectInputConnector.js
+++ b/frontend/src/Components/Form/QualityProfileSelectInputConnector.js
@@ -4,15 +4,16 @@ import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import sortByName from 'Utilities/Array/sortByName';
+import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
import SelectInput from './SelectInput';
function createMapStateToProps() {
return createSelector(
- (state) => state.settings.qualityProfiles,
+ createSortedSectionSelector('settings.qualityProfiles', sortByName),
(state, { includeNoChange }) => includeNoChange,
(state, { includeMixed }) => includeMixed,
(qualityProfiles, includeNoChange, includeMixed) => {
- const values = _.map(qualityProfiles.items.sort(sortByName), (qualityProfile) => {
+ const values = _.map(qualityProfiles.items, (qualityProfile) => {
return {
key: qualityProfile.id,
value: qualityProfile.name
diff --git a/frontend/src/InteractiveImport/Artist/SelectArtistModalContentConnector.js b/frontend/src/InteractiveImport/Artist/SelectArtistModalContentConnector.js
index 19a6002c9..a7b72b9d5 100644
--- a/frontend/src/InteractiveImport/Artist/SelectArtistModalContentConnector.js
+++ b/frontend/src/InteractiveImport/Artist/SelectArtistModalContentConnector.js
@@ -12,7 +12,7 @@ function createMapStateToProps() {
createAllArtistSelector(),
(items) => {
return {
- items: items.sort((a, b) => {
+ items: [...items].sort((a, b) => {
if (a.sortName < b.sortName) {
return -1;
}
diff --git a/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClients.js b/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClients.js
index 029845025..1753f065f 100644
--- a/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClients.js
+++ b/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClients.js
@@ -1,6 +1,5 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
-import sortByName from 'Utilities/Array/sortByName';
import { icons } from 'Helpers/Props';
import FieldSet from 'Components/FieldSet';
import Card from 'Components/Card';
@@ -66,7 +65,7 @@ class DownloadClients extends Component {
>
{
- items.sort(sortByName).map((item) => {
+ items.map((item) => {
return (
state.settings.downloadClients,
- (downloadClients) => {
- return {
- ...downloadClients
- };
- }
+ createSortedSectionSelector('settings.downloadClients', sortByName),
+ (downloadClients) => downloadClients
);
}
diff --git a/frontend/src/Settings/ImportLists/ImportLists/ImportLists.js b/frontend/src/Settings/ImportLists/ImportLists/ImportLists.js
index 7f654050e..e8ecd34f2 100644
--- a/frontend/src/Settings/ImportLists/ImportLists/ImportLists.js
+++ b/frontend/src/Settings/ImportLists/ImportLists/ImportLists.js
@@ -1,6 +1,5 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
-import sortByName from 'Utilities/Array/sortByName';
import { icons } from 'Helpers/Props';
import FieldSet from 'Components/FieldSet';
import Card from 'Components/Card';
@@ -68,7 +67,7 @@ class ImportLists extends Component {
>
{
- items.sort(sortByName).map((item) => {
+ items.map((item) => {
return (
state.settings.importLists,
- (importLists) => {
- return {
- ...importLists
- };
- }
+ createSortedSectionSelector('settings.importLists', sortByName),
+ (importLists) => importLists
);
}
diff --git a/frontend/src/Settings/Indexers/Indexers/Indexers.js b/frontend/src/Settings/Indexers/Indexers/Indexers.js
index f5fea9aac..3f020d7ac 100644
--- a/frontend/src/Settings/Indexers/Indexers/Indexers.js
+++ b/frontend/src/Settings/Indexers/Indexers/Indexers.js
@@ -1,6 +1,5 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
-import sortByName from 'Utilities/Array/sortByName';
import { icons } from 'Helpers/Props';
import FieldSet from 'Components/FieldSet';
import Card from 'Components/Card';
@@ -66,7 +65,7 @@ class Indexers extends Component {
>
{
- items.sort(sortByName).map((item) => {
+ items.map((item) => {
return (
state.settings.indexers,
- (indexers) => {
- return {
- ...indexers
- };
- }
+ createSortedSectionSelector('settings.indexers', sortByName),
+ (indexers) => indexers
);
}
diff --git a/frontend/src/Settings/Metadata/Metadata/Metadatas.js b/frontend/src/Settings/Metadata/Metadata/Metadatas.js
index faf7e9613..2fe3d8fb8 100644
--- a/frontend/src/Settings/Metadata/Metadata/Metadatas.js
+++ b/frontend/src/Settings/Metadata/Metadata/Metadatas.js
@@ -1,6 +1,5 @@
import PropTypes from 'prop-types';
import React from 'react';
-import sortByName from 'Utilities/Array/sortByName';
import FieldSet from 'Components/FieldSet';
import PageSectionContent from 'Components/Page/PageSectionContent';
import Metadata from './Metadata';
@@ -20,7 +19,7 @@ function Metadatas(props) {
>
{
- items.sort(sortByName).map((item) => {
+ items.map((item) => {
return (
state.settings.metadata,
- (metadata) => {
- return {
- ...metadata
- };
- }
+ createSortedSectionSelector('settings.metadata', sortByName),
+ (metadata) => metadata
);
}
diff --git a/frontend/src/Settings/Notifications/Notifications/Notifications.js b/frontend/src/Settings/Notifications/Notifications/Notifications.js
index 0296c2ed4..77a7c11e8 100644
--- a/frontend/src/Settings/Notifications/Notifications/Notifications.js
+++ b/frontend/src/Settings/Notifications/Notifications/Notifications.js
@@ -1,6 +1,5 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
-import sortByName from 'Utilities/Array/sortByName';
import { icons } from 'Helpers/Props';
import FieldSet from 'Components/FieldSet';
import Card from 'Components/Card';
@@ -66,7 +65,7 @@ class Notifications extends Component {
>
{
- items.sort(sortByName).map((item) => {
+ items.map((item) => {
return (
state.settings.notifications,
- (notifications) => {
- return {
- ...notifications
- };
- }
+ createSortedSectionSelector('settings.notifications', sortByName),
+ (notifications) => notifications
);
}
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfiles.js b/frontend/src/Settings/Profiles/Quality/QualityProfiles.js
index 2e9f123c4..29ab70b1d 100644
--- a/frontend/src/Settings/Profiles/Quality/QualityProfiles.js
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfiles.js
@@ -1,6 +1,5 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
-import sortByName from 'Utilities/Array/sortByName';
import { icons } from 'Helpers/Props';
import FieldSet from 'Components/FieldSet';
import Card from 'Components/Card';
@@ -58,7 +57,7 @@ class QualityProfiles extends Component {
>
{
- items.sort(sortByName).map((item) => {
+ items.map((item) => {
return (
state.settings.qualityProfiles,
- (qualityProfiles) => {
- return {
- ...qualityProfiles
- };
- }
+ createSortedSectionSelector('settings.qualityProfiles', sortByName),
+ (qualityProfiles) => qualityProfiles
);
}
diff --git a/frontend/src/Store/Selectors/createSortedSectionSelector.js b/frontend/src/Store/Selectors/createSortedSectionSelector.js
new file mode 100644
index 000000000..716737ca6
--- /dev/null
+++ b/frontend/src/Store/Selectors/createSortedSectionSelector.js
@@ -0,0 +1,16 @@
+import { createSelector } from 'reselect';
+import getSectionState from 'Utilities/State/getSectionState';
+function createSortedSectionSelector(section, comparer) {
+ return createSelector(
+ (state) => state,
+ (state) => {
+ const sectionState = getSectionState(state, section, true);
+ return {
+ ...sectionState,
+ items: [...sectionState.items].sort(comparer)
+ };
+ }
+ );
+}
+
+export default createSortedSectionSelector;