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

(cherry picked from commit 1a1c8e6c08a6db5fcd2b5d17e65fa1f943d2e746)

Closes #4912
Closes #4921
This commit is contained in:
Mark McDowall 2024-07-16 21:34:43 -07:00 committed by Bogdan
commit 7f73a2e23a
29 changed files with 94 additions and 63 deletions

View file

@ -1,6 +1,6 @@
import { createAction } from 'redux-actions';
import { filterBuilderTypes, filterBuilderValueTypes, filterTypePredicates, sortDirections } from 'Helpers/Props';
import sortByName from 'Utilities/Array/sortByName';
import sortByProp from 'Utilities/Array/sortByProp';
import translate from 'Utilities/String/translate';
import { filterPredicates, filters, sortPredicates } from './artistActions';
import createHandleActions from './Creators/createHandleActions';
@ -334,7 +334,7 @@ export const defaultState = {
return acc;
}, []);
return tagList.sort(sortByName);
return tagList.sort(sortByProp('name'));
}
},
{

View file

@ -1,11 +1,12 @@
import { createSelector } from 'reselect';
import { RootFolderAppState } from 'App/State/SettingsAppState';
import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
import sortByName from 'Utilities/Array/sortByName';
import RootFolder from 'typings/RootFolder';
import sortByProp from 'Utilities/Array/sortByProp';
export default function createRootFoldersSelector() {
return createSelector(
createSortedSectionSelector('settings.rootFolders', sortByName),
createSortedSectionSelector<RootFolder>('rootFolders', sortByProp('name')),
(rootFolders: RootFolderAppState) => rootFolders
);
}

View file

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