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

Closes #6955

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),
       };
     }
   );