Don't mutate state when sorting items
This commit is contained in:
parent
dd8d1b673e
commit
283f905d79
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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 {
|
|||
>
|
||||
<div className={styles.languageProfiles}>
|
||||
{
|
||||
items.sort(sortByName).map((item) => {
|
||||
items.map((item) => {
|
||||
return (
|
||||
<LanguageProfile
|
||||
key={item.id}
|
||||
|
|
|
@ -2,13 +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 { fetchLanguageProfiles, deleteLanguageProfile, cloneLanguageProfile } from 'Store/Actions/settingsActions';
|
||||
import LanguageProfiles from './LanguageProfiles';
|
||||
|
||||
function createMapStateToProps() {
|
||||
return createSelector(
|
||||
(state) => state.settings.advancedSettings,
|
||||
(state) => state.settings.languageProfiles,
|
||||
createSortedSectionSelector('settings.languageProfiles', sortByName),
|
||||
(advancedSettings, languageProfiles) => {
|
||||
return {
|
||||
advancedSettings,
|
||||
|
|
|
@ -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 {
|
|||
>
|
||||
<div className={styles.qualityProfiles}>
|
||||
{
|
||||
items.sort(sortByName).map((item) => {
|
||||
items.map((item) => {
|
||||
return (
|
||||
<QualityProfile
|
||||
key={item.id}
|
||||
|
|
|
@ -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
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
Loading…
Reference in New Issue