From b592b11b97a1b29dc7c8de587d47bf985f5d6e2e Mon Sep 17 00:00:00 2001
From: ta264 <ta264@users.noreply.github.com>
Date: Mon, 3 Feb 2020 21:45:48 +0000
Subject: [PATCH] Fixed: Editing provider/profile settings appearing to affect
 wrong item

---
 .../Form/MetadataProfileSelectInputConnector.js  |  5 +++--
 .../Form/QualityProfileSelectInputConnector.js   |  5 +++--
 .../Artist/SelectArtistModalContentConnector.js  |  2 +-
 .../DownloadClients/DownloadClients.js           |  3 +--
 .../DownloadClients/DownloadClientsConnector.js  | 10 ++++------
 .../ImportLists/ImportLists/ImportLists.js       |  3 +--
 .../ImportLists/ImportListsConnector.js          | 10 ++++------
 .../src/Settings/Indexers/Indexers/Indexers.js   |  3 +--
 .../Indexers/Indexers/IndexersConnector.js       | 10 ++++------
 .../src/Settings/Metadata/Metadata/Metadatas.js  |  3 +--
 .../Metadata/Metadata/MetadatasConnector.js      | 10 ++++------
 .../Notifications/Notifications/Notifications.js |  3 +--
 .../Notifications/NotificationsConnector.js      | 10 ++++------
 .../Settings/Profiles/Quality/QualityProfiles.js |  3 +--
 .../Profiles/Quality/QualityProfilesConnector.js | 10 ++++------
 .../Selectors/createSortedSectionSelector.js     | 16 ++++++++++++++++
 16 files changed, 53 insertions(+), 53 deletions(-)
 create mode 100644 frontend/src/Store/Selectors/createSortedSectionSelector.js

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 {
         >
           <div className={styles.downloadClients}>
             {
-              items.sort(sortByName).map((item) => {
+              items.map((item) => {
                 return (
                   <DownloadClient
                     key={item.id}
diff --git a/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClientsConnector.js b/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClientsConnector.js
index d318bc163..f0328154b 100644
--- a/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClientsConnector.js
+++ b/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClientsConnector.js
@@ -2,17 +2,15 @@ import PropTypes from 'prop-types';
 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 { fetchDownloadClients, deleteDownloadClient } from 'Store/Actions/settingsActions';
 import DownloadClients from './DownloadClients';
 
 function createMapStateToProps() {
   return createSelector(
-    (state) => 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 {
         >
           <div className={styles.lists}>
             {
-              items.sort(sortByName).map((item) => {
+              items.map((item) => {
                 return (
                   <ImportList
                     key={item.id}
diff --git a/frontend/src/Settings/ImportLists/ImportLists/ImportListsConnector.js b/frontend/src/Settings/ImportLists/ImportLists/ImportListsConnector.js
index 3938da4ae..5aa8411b0 100644
--- a/frontend/src/Settings/ImportLists/ImportLists/ImportListsConnector.js
+++ b/frontend/src/Settings/ImportLists/ImportLists/ImportListsConnector.js
@@ -2,18 +2,16 @@ import PropTypes from 'prop-types';
 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 { fetchImportLists, deleteImportList } from 'Store/Actions/settingsActions';
 import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
 import ImportLists from './ImportLists';
 
 function createMapStateToProps() {
   return createSelector(
-    (state) => 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 {
         >
           <div className={styles.indexers}>
             {
-              items.sort(sortByName).map((item) => {
+              items.map((item) => {
                 return (
                   <Indexer
                     key={item.id}
diff --git a/frontend/src/Settings/Indexers/Indexers/IndexersConnector.js b/frontend/src/Settings/Indexers/Indexers/IndexersConnector.js
index 415dae32b..f26907d6d 100644
--- a/frontend/src/Settings/Indexers/Indexers/IndexersConnector.js
+++ b/frontend/src/Settings/Indexers/Indexers/IndexersConnector.js
@@ -2,17 +2,15 @@ import PropTypes from 'prop-types';
 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 { fetchIndexers, deleteIndexer } from 'Store/Actions/settingsActions';
 import Indexers from './Indexers';
 
 function createMapStateToProps() {
   return createSelector(
-    (state) => 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) {
       >
         <div className={styles.metadatas}>
           {
-            items.sort(sortByName).map((item) => {
+            items.map((item) => {
               return (
                 <Metadata
                   key={item.id}
diff --git a/frontend/src/Settings/Metadata/Metadata/MetadatasConnector.js b/frontend/src/Settings/Metadata/Metadata/MetadatasConnector.js
index fb7153950..ab7de599d 100644
--- a/frontend/src/Settings/Metadata/Metadata/MetadatasConnector.js
+++ b/frontend/src/Settings/Metadata/Metadata/MetadatasConnector.js
@@ -2,17 +2,15 @@ import PropTypes from 'prop-types';
 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 { fetchMetadata } from 'Store/Actions/settingsActions';
 import Metadatas from './Metadatas';
 
 function createMapStateToProps() {
   return createSelector(
-    (state) => 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 {
         >
           <div className={styles.notifications}>
             {
-              items.sort(sortByName).map((item) => {
+              items.map((item) => {
                 return (
                   <Notification
                     key={item.id}
diff --git a/frontend/src/Settings/Notifications/Notifications/NotificationsConnector.js b/frontend/src/Settings/Notifications/Notifications/NotificationsConnector.js
index b2b5e5166..6f4138627 100644
--- a/frontend/src/Settings/Notifications/Notifications/NotificationsConnector.js
+++ b/frontend/src/Settings/Notifications/Notifications/NotificationsConnector.js
@@ -2,17 +2,15 @@ import PropTypes from 'prop-types';
 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 { fetchNotifications, deleteNotification } from 'Store/Actions/settingsActions';
 import Notifications from './Notifications';
 
 function createMapStateToProps() {
   return createSelector(
-    (state) => 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 {
         >
           <div className={styles.qualityProfiles}>
             {
-              items.sort(sortByName).map((item) => {
+              items.map((item) => {
                 return (
                   <QualityProfile
                     key={item.id}
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfilesConnector.js b/frontend/src/Settings/Profiles/Quality/QualityProfilesConnector.js
index c7596ad63..f7fd9832a 100644
--- a/frontend/src/Settings/Profiles/Quality/QualityProfilesConnector.js
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfilesConnector.js
@@ -2,17 +2,15 @@ import PropTypes from 'prop-types';
 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 { fetchQualityProfiles, deleteQualityProfile, cloneQualityProfile } from 'Store/Actions/settingsActions';
 import QualityProfiles from './QualityProfiles';
 
 function createMapStateToProps() {
   return createSelector(
-    (state) => 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;