New: Use natural sorting for lists of items in the UI

Closes #6955

frontend/src/Components/Filter/Builder/FilterBuilderRow.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import SelectInput from 'Components/Form/SelectInput';
 import IconButton from 'Components/Link/IconButton';
 import { filterBuilderTypes, filterBuilderValueTypes, icons } from 'Helpers/Props';
+import sortByProp from 'Utilities/Array/sortByProp';
 import BoolFilterBuilderRowValue from './BoolFilterBuilderRowValue';
 import DateFilterBuilderRowValue from './DateFilterBuilderRowValue';
 import FilterBuilderRowValueConnector from './FilterBuilderRowValueConnector';
@@ -224,7 +225,7 @@ class FilterBuilderRow extends Component {
         key: name,
         value: typeof label === 'function' ? label() : label
       };
-    }).sort((a, b) => a.value.localeCompare(b.value));
+    }).sort(sortByProp('value'));
 
     const ValueComponent = getRowValueConnector(selectedFilterBuilderProp);
 

frontend/src/Components/Filter/Builder/FilterBuilderRowValueConnector.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { filterBuilderTypes } from 'Helpers/Props';
 import * as filterTypes from 'Helpers/Props/filterTypes';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import FilterBuilderRowValue from './FilterBuilderRowValue';
 
 function createTagListSelector() {
@@ -38,7 +38,7 @@ function createTagListSelector() {
           }
 
           return acc;
-        }, []).sort(sortByName);
+        }, []).sort(sortByProp('name'));
       }
 
       return _.uniqBy(items, 'id');

frontend/src/Components/Filter/Builder/SeriesFilterBuilderRowValue.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import Series from 'Series/Series';
 import createAllSeriesSelector from 'Store/Selectors/createAllSeriesSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import FilterBuilderRowValue from './FilterBuilderRowValue';
 import FilterBuilderRowValueProps from './FilterBuilderRowValueProps';
 
@@ -11,7 +11,7 @@ function SeriesFilterBuilderRowValue(props: FilterBuilderRowValueProps) {
 
   const tagList = allSeries
     .map((series) => ({ id: series.id, name: series.title }))
-    .sort(sortByName);
+    .sort(sortByProp('name'));
 
   return <FilterBuilderRowValue {...props} tagList={tagList} />;
 }

frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.js

@@ -5,6 +5,7 @@ import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import CustomFilter from './CustomFilter';
 import styles from './CustomFiltersModalContent.css';
@@ -31,7 +32,7 @@ function CustomFiltersModalContent(props) {
       <ModalBody>
         {
           customFilters
-            .sort((a, b) => a.label.localeCompare(b.label))
+            .sort((a, b) => sortByProp(a, b, 'label'))
             .map((customFilter) => {
               return (
                 <CustomFilter

frontend/src/Components/Form/DownloadClientSelectInputConnector.js

@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { fetchDownloadClients } from 'Store/Actions/settingsActions';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import EnhancedSelectInput from './EnhancedSelectInput';
 
@@ -23,7 +23,7 @@ function createMapStateToProps() {
 
       const filteredItems = items.filter((item) => item.protocol === protocolFilter);
 
-      const values = _.map(filteredItems.sort(sortByName), (downloadClient) => {
+      const values = _.map(filteredItems.sort(sortByProp('name')), (downloadClient) => {
         return {
           key: downloadClient.id,
           value: downloadClient.name,

frontend/src/Components/Form/IndexerSelectInputConnector.js

@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { fetchIndexers } from 'Store/Actions/settingsActions';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import EnhancedSelectInput from './EnhancedSelectInput';
 
@@ -20,7 +20,7 @@ function createMapStateToProps() {
         items
       } = indexers;
 
-      const values = _.map(items.sort(sortByName), (indexer) => {
+      const values = _.map(items.sort(sortByProp('name')), (indexer) => {
         return {
           key: indexer.id,
           value: indexer.name

frontend/src/Components/Form/QualityProfileSelectInputConnector.js

@@ -4,13 +4,13 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import EnhancedSelectInput from './EnhancedSelectInput';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.qualityProfiles', sortByName),
+    createSortedSectionSelector('settings.qualityProfiles', sortByProp('name')),
     (state, { includeNoChange }) => includeNoChange,
     (state, { includeNoChangeDisabled }) => includeNoChangeDisabled,
     (state, { includeMixed }) => includeMixed,

frontend/src/Components/Menu/FilterMenuContent.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import FilterMenuItem from './FilterMenuItem';
 import MenuContent from './MenuContent';
@@ -47,7 +48,7 @@ class FilterMenuContent extends Component {
 
         {
           customFilters
-            .sort((a, b) => a.label.localeCompare(b.label))
+            .sort(sortByProp('label'))
             .map((filter) => {
               return (
                 <FilterMenuItem

frontend/src/Components/TagList.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { kinds } from 'Helpers/Props';
+import sortByProp from 'Utilities/Array/sortByProp';
 import Label from './Label';
 import styles from './TagList.css';
 
@@ -8,7 +9,7 @@ function TagList({ tags, tagList }) {
   const sortedTags = tags
     .map((tagId) => tagList.find((tag) => tag.id === tagId))
     .filter((tag) => !!tag)
-    .sort((a, b) => a.label.localeCompare(b.label));
+    .sort(sortByProp('label'));
 
   return (
     <div className={styles.tags}>

frontend/src/InteractiveImport/Series/SelectSeriesModalContent.tsx

@@ -21,6 +21,7 @@ import { scrollDirections } from 'Helpers/Props';
 import Series from 'Series/Series';
 import createAllSeriesSelector from 'Store/Selectors/createAllSeriesSelector';
 import dimensions from 'Styles/Variables/dimensions';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import SelectSeriesModalTableHeader from './SelectSeriesModalTableHeader';
 import SelectSeriesRow from './SelectSeriesRow';
@@ -163,9 +164,7 @@ function SelectSeriesModalContent(props: SelectSeriesModalContentProps) {
   );
 
   const items = useMemo(() => {
-    const sorted = [...allSeries].sort((a, b) =>
-      a.sortTitle.localeCompare(b.sortTitle)
-    );
+    const sorted = [...allSeries].sort(sortByProp('sortTitle'));
 
     return sorted.filter(
       (item) =>

frontend/src/Series/Details/SeriesTagsConnector.js

@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createSeriesSelector from 'Store/Selectors/createSeriesSelector';
 import createTagsSelector from 'Store/Selectors/createTagsSelector';
+import sortByProp from 'Utilities/Array/sortByProp';
 import SeriesTags from './SeriesTags';
 
 function createMapStateToProps() {
@@ -12,8 +13,8 @@ function createMapStateToProps() {
       const tags = series.tags
         .map((tagId) => tagList.find((tag) => tag.id === tagId))
         .filter((tag) => !!tag)
-        .map((tag) => tag.label)
-        .sort((a, b) => a.localeCompare(b));
+        .sort(sortByProp('label'))
+        .map((tag) => tag.label);
 
       return {
         tags

frontend/src/Settings/CustomFormats/CustomFormats/CustomFormatsConnector.js

@@ -4,12 +4,12 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { cloneCustomFormat, deleteCustomFormat, fetchCustomFormats } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import CustomFormats from './CustomFormats';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.customFormats', sortByName),
+    createSortedSectionSelector('settings.customFormats', sortByProp('name')),
     (customFormats) => customFormats
   );
 }

frontend/src/Settings/DownloadClients/DownloadClients/DownloadClientsConnector.js

@@ -5,12 +5,12 @@ import { createSelector } from 'reselect';
 import { deleteDownloadClient, fetchDownloadClients } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
 import createTagsSelector from 'Store/Selectors/createTagsSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import DownloadClients from './DownloadClients';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.downloadClients', sortByName),
+    createSortedSectionSelector('settings.downloadClients', sortByProp('name')),
     createTagsSelector(),
     (downloadClients, tagList) => {
       return {

frontend/src/Settings/ImportLists/ImportLists/ImportListsConnector.js

@@ -5,12 +5,12 @@ import { createSelector } from 'reselect';
 import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
 import { deleteImportList, fetchImportLists } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import ImportLists from './ImportLists';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.importLists', sortByName),
+    createSortedSectionSelector('settings.importLists', sortByProp('name')),
     (importLists) => importLists
   );
 }

frontend/src/Settings/Indexers/Indexers/IndexersConnector.js

@@ -5,12 +5,12 @@ import { createSelector } from 'reselect';
 import { cloneIndexer, deleteIndexer, fetchIndexers } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
 import createTagsSelector from 'Store/Selectors/createTagsSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import Indexers from './Indexers';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.indexers', sortByName),
+    createSortedSectionSelector('settings.indexers', sortByProp('name')),
     createTagsSelector(),
     (indexers, tagList) => {
       return {

frontend/src/Settings/Metadata/Metadata/MetadatasConnector.js

@@ -4,12 +4,12 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { fetchMetadata } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import Metadatas from './Metadatas';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.metadata', sortByName),
+    createSortedSectionSelector('settings.metadata', sortByProp('name')),
     (metadata) => metadata
   );
 }

frontend/src/Settings/Notifications/Notifications/NotificationsConnector.js

@@ -5,12 +5,12 @@ import { createSelector } from 'reselect';
 import { deleteNotification, fetchNotifications } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
 import createTagsSelector from 'Store/Selectors/createTagsSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import Notifications from './Notifications';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.notifications', sortByName),
+    createSortedSectionSelector('settings.notifications', sortByProp('name')),
     createTagsSelector(),
     (notifications, tagList) => {
       return {

frontend/src/Settings/Profiles/Quality/QualityProfileFormatItems.js

@@ -20,7 +20,8 @@ function calcOrder(profileFormatItems) {
     if (b.score !== a.score) {
       return b.score - a.score;
     }
-    return a.name > b.name ? 1 : -1;
+
+    return a.localeCompare(b.name, undefined, { numeric: true });
   }).map((x) => items[x.format]);
 }
 

frontend/src/Settings/Profiles/Quality/QualityProfilesConnector.js

@@ -4,12 +4,12 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { cloneQualityProfile, deleteQualityProfile, fetchQualityProfiles } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import QualityProfiles from './QualityProfiles';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.qualityProfiles', sortByName),
+    createSortedSectionSelector('settings.qualityProfiles', sortByProp('name')),
     (qualityProfiles) => qualityProfiles
   );
 }

frontend/src/Settings/Tags/AutoTagging/AutoTaggings.js

@@ -9,7 +9,7 @@ import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
 import { cloneAutoTagging, deleteAutoTagging, fetchAutoTaggings } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
 import createTagsSelector from 'Store/Selectors/createTagsSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import AutoTagging from './AutoTagging';
 import EditAutoTaggingModal from './EditAutoTaggingModal';
@@ -23,7 +23,7 @@ export default function AutoTaggings() {
     isFetching,
     isPopulated
   } = useSelector(
-    createSortedSectionSelector('settings.autoTaggings', sortByName)
+    createSortedSectionSelector('settings.autoTaggings', sortByProp('name'))
   );
 
   const tagList = useSelector(createTagsSelector());

frontend/src/Store/Actions/releaseActions.js

@@ -1,7 +1,7 @@
 import { createAction } from 'redux-actions';
 import { filterBuilderTypes, filterBuilderValueTypes, filterTypePredicates, filterTypes, sortDirections } from 'Helpers/Props';
 import { createThunk, handleThunks } from 'Store/thunks';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import createAjaxRequest from 'Utilities/createAjaxRequest';
 import translate from 'Utilities/String/translate';
 import createFetchHandler from './Creators/createFetchHandler';
@@ -232,7 +232,7 @@ export const defaultState = {
           return acc;
         }, []);
 
-        return genreList.sort(sortByName);
+        return genreList.sort(sortByProp('name'));
       }
     },
     {

frontend/src/Store/Actions/seriesActions.js

@@ -3,7 +3,7 @@ import { createAction } from 'redux-actions';
 import { batchActions } from 'redux-batched-actions';
 import { filterBuilderTypes, filterBuilderValueTypes, filterTypePredicates, filterTypes, sortDirections } from 'Helpers/Props';
 import { createThunk, handleThunks } from 'Store/thunks';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import createAjaxRequest from 'Utilities/createAjaxRequest';
 import dateFilterPredicate from 'Utilities/Date/dateFilterPredicate';
 import translate from 'Utilities/String/translate';
@@ -254,7 +254,7 @@ export const filterBuilderProps = [
         return acc;
       }, []);
 
-      return tagList.sort(sortByName);
+      return tagList.sort(sortByProp('name'));
     }
   },
   {
@@ -323,7 +323,7 @@ export const filterBuilderProps = [
         return acc;
       }, []);
 
-      return tagList.sort(sortByName);
+      return tagList.sort(sortByProp('name'));
     }
   },
   {
@@ -342,7 +342,7 @@ export const filterBuilderProps = [
         return acc;
       }, []);
 
-      return languageList.sort(sortByName);
+      return languageList.sort(sortByProp('name'));
     }
   },
   {

frontend/src/Store/Selectors/createEnabledDownloadClientsSelector.ts

@@ -2,13 +2,17 @@ import { createSelector } from 'reselect';
 import { DownloadClientAppState } from 'App/State/SettingsAppState';
 import DownloadProtocol from 'DownloadClient/DownloadProtocol';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import DownloadClient from 'typings/DownloadClient';
+import sortByProp from 'Utilities/Array/sortByProp';
 
 export default function createEnabledDownloadClientsSelector(
   protocol: DownloadProtocol
 ) {
   return createSelector(
-    createSortedSectionSelector('settings.downloadClients', sortByName),
+    createSortedSectionSelector<DownloadClient>(
+      'settings.downloadClients',
+      sortByProp('name')
+    ),
     (downloadClients: DownloadClientAppState) => {
       const { isFetching, isPopulated, error, items } = downloadClients;
 

frontend/src/Store/Selectors/createRootFoldersSelector.ts

@@ -2,12 +2,11 @@ import { createSelector } from 'reselect';
 import RootFolderAppState from 'App/State/RootFolderAppState';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
 import RootFolder from 'typings/RootFolder';
+import sortByProp from 'Utilities/Array/sortByProp';
 
 export default function createRootFoldersSelector() {
   return createSelector(
-    createSortedSectionSelector('rootFolders', (a: RootFolder, b: RootFolder) =>
-      a.path.localeCompare(b.path)
-    ),
+    createSortedSectionSelector<RootFolder>('rootFolders', sortByProp('path')),
     (rootFolders: RootFolderAppState) => rootFolders
   );
 }

frontend/src/Store/Selectors/createSortedSectionSelector.ts

@@ -1,14 +1,18 @@
 import { createSelector } from 'reselect';
 import getSectionState from 'Utilities/State/getSectionState';
 
-function createSortedSectionSelector(section, comparer) {
+function createSortedSectionSelector<T>(
+  section: string,
+  comparer: (a: T, b: T) => number
+) {
   return createSelector(
     (state) => state,
     (state) => {
       const sectionState = getSectionState(state, section, true);
+
       return {
         ...sectionState,
-        items: [...sectionState.items].sort(comparer)
+        items: [...sectionState.items].sort(comparer),
       };
     }
   );

frontend/src/System/Tasks/Queued/QueuedTaskRowNameCell.tsx

@@ -3,6 +3,7 @@ import { useSelector } from 'react-redux';
 import { CommandBody } from 'Commands/Command';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import createMultiSeriesSelector from 'Store/Selectors/createMultiSeriesSelector';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import styles from './QueuedTaskRowNameCell.css';
 
@@ -39,9 +40,7 @@ export default function QueuedTaskRowNameCell(
   }
 
   const series = useSelector(createMultiSeriesSelector(seriesIds));
-  const sortedSeries = series.sort((a, b) =>
-    a.sortTitle.localeCompare(b.sortTitle)
-  );
+  const sortedSeries = series.sort(sortByProp('sortTitle'));
 
   return (
     <TableRowCell>

frontend/src/Utilities/Array/sortByName.js

@@ -1,5 +0,0 @@
-function sortByName(a, b) {
-  return a.name.localeCompare(b.name);
-}
-
-export default sortByName;

frontend/src/Utilities/Array/sortByProp.ts

@@ -0,0 +1,13 @@
+import { StringKey } from 'typings/Helpers/KeysMatching';
+
+export function sortByProp<
+  // eslint-disable-next-line no-use-before-define
+  T extends Record<K, string>,
+  K extends StringKey<T>
+>(sortKey: K) {
+  return (a: T, b: T) => {
+    return a[sortKey].localeCompare(b[sortKey], undefined, { numeric: true });
+  };
+}
+
+export default sortByProp;

frontend/src/typings/Helpers/KeysMatching.ts

@@ -0,0 +1,7 @@
+type KeysMatching<T, V> = {
+  [K in keyof T]-?: T[K] extends V ? K : never;
+}[keyof T];
+
+export type StringKey<T> = KeysMatching<T, string>;
+
+export default KeysMatching;