From 283f905d7951e1026d1897ffba405051f7c44d76 Mon Sep 17 00:00:00 2001 From: ta264 Date: Wed, 19 Feb 2020 21:44:36 +0000 Subject: [PATCH] Don't mutate state when sorting items --- .../Form/LanguageProfileSelectInputConnector.js | 5 +++-- .../Form/QualityProfileSelectInputConnector.js | 5 +++-- .../Series/SelectSeriesModalContentConnector.js | 2 +- .../DownloadClients/DownloadClients.js | 3 +-- .../DownloadClients/DownloadClientsConnector.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 ++++------ .../Profiles/Language/LanguageProfiles.js | 3 +-- .../Language/LanguageProfilesConnector.js | 4 +++- .../Settings/Profiles/Quality/QualityProfiles.js | 3 +-- .../Profiles/Quality/QualityProfilesConnector.js | 10 ++++------ .../Selectors/createSortedSectionSelector.js | 16 ++++++++++++++++ 16 files changed, 52 insertions(+), 48 deletions(-) create mode 100644 frontend/src/Store/Selectors/createSortedSectionSelector.js diff --git a/frontend/src/Components/Form/LanguageProfileSelectInputConnector.js b/frontend/src/Components/Form/LanguageProfileSelectInputConnector.js index 970400a64..af40db47f 100644 --- a/frontend/src/Components/Form/LanguageProfileSelectInputConnector.js +++ b/frontend/src/Components/Form/LanguageProfileSelectInputConnector.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.languageProfiles, + createSortedSectionSelector('settings.languageProfiles', sortByName), (state, { includeNoChange }) => includeNoChange, (state, { includeMixed }) => includeMixed, (languageProfiles, includeNoChange, includeMixed) => { - const values = _.map(languageProfiles.items.sort(sortByName), (languageProfile) => { + const values = _.map(languageProfiles.items, (languageProfile) => { return { key: languageProfile.id, value: languageProfile.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/Series/SelectSeriesModalContentConnector.js b/frontend/src/InteractiveImport/Series/SelectSeriesModalContentConnector.js index a534e6cdd..f2ebeebf8 100644 --- a/frontend/src/InteractiveImport/Series/SelectSeriesModalContentConnector.js +++ b/frontend/src/InteractiveImport/Series/SelectSeriesModalContentConnector.js @@ -11,7 +11,7 @@ function createMapStateToProps() { createAllSeriesSelector(), (items) => { return { - items: items.sort((a, b) => { + items: [...items].sort((a, b) => { if (a.sortTitle < b.sortTitle) { 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/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 8659c5799..afe33ab4c 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/Language/LanguageProfiles.js b/frontend/src/Settings/Profiles/Language/LanguageProfiles.js index eb8286dfc..5ee75ecd2 100644 --- a/frontend/src/Settings/Profiles/Language/LanguageProfiles.js +++ b/frontend/src/Settings/Profiles/Language/LanguageProfiles.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'; @@ -59,7 +58,7 @@ class LanguageProfiles extends Component { >
{ - items.sort(sortByName).map((item) => { + items.map((item) => { return ( state.settings.advancedSettings, - (state) => state.settings.languageProfiles, + createSortedSectionSelector('settings.languageProfiles', sortByName), (advancedSettings, languageProfiles) => { return { advancedSettings, diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfiles.js b/frontend/src/Settings/Profiles/Quality/QualityProfiles.js index cf1a21422..2449a80ff 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'; @@ -59,7 +58,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;