secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Consistency for sorting and state storage

Browse Source
This commit is contained in:
James Barnsley
2021-08-08 14:21:28 +12:00
parent 56c394f106
commit 53da654578
16 changed files with 594 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/js/views/Album.js
View File

@ -13,7 +13,7 @@ import FollowButton from '../components/Fields/FollowButton';
import { nice_number } from '../components/NiceNumber';
import { Dater } from '../components/Dater';
import ContextMenuTrigger from '../components/ContextMenuTrigger';
import Icon, { SourceIcon } from '../components/Icon';
import { SourceIcon } from '../components/Icon';
import DropdownField from '../components/Fields/DropdownField';
import FilterField from '../components/Fields/FilterField';
import { i18n, I18n } from '../locale';
@ -22,15 +22,13 @@ import * as uiActions from '../services/ui/actions';
import * as mopidyActions from '../services/mopidy/actions';
import * as spotifyActions from '../services/spotify/actions';
import * as lastfmActions from '../services/lastfm/actions';
import {
uriSource,
sourceIcon,
} from '../util/helpers';
import { uriSource } from '../util/helpers';
import Button from '../components/Button';
import { makeLoadingSelector, makeItemSelector } from '../util/selectors';
import { makeLoadingSelector, makeItemSelector, getSortSelector } from '../util/selectors';
import { applyFilter, sortItems } from '../util/arrays';
import { trackEvent } from '../components/Trackable';
import { encodeUri, decodeUri } from '../util/format';
import { decodeUri } from '../util/format';
const SORT_KEY = 'album_tracks';
class Album extends React.Component {
constructor(props) {
@ -149,27 +147,23 @@ class Album extends React.Component {
playURIs([uri], uri);
}
onChangeSort = (value) => {
onChangeSort = (field) => {
const {
sort,
sort_reverse,
sortField,
sortReverse,
uiActions: {
set,
setSort,
hideContextMenu,
},
} = this.props;
let reverse = false;
if (value !== null && sort === value) {
reverse = !sort_reverse;
if (field !== null && sortField === field) {
reverse = !sortReverse;
}
set({
album_tracks_sort_reverse: reverse,
album_tracks_sort: value,
});
setSort(SORT_KEY, field, reverse);
hideContextMenu();
trackEvent({ category: 'Album', action: 'SortTracks', label: `${value} ${reverse ? 'DESC' : 'ASC'}` });
}
inLibrary = () => {
@ -184,8 +178,8 @@ class Album extends React.Component {
album,
loading,
slim_mode,
sort,
sort_reverse,
sortField,
sortReverse,
} = this.props;
let {
album: {
@ -209,8 +203,8 @@ class Album extends React.Component {
);
}
if (sort && tracks) {
tracks = sortItems(tracks, sort, sort_reverse);
if (sortField && tracks) {
tracks = sortItems(tracks, sortField, sortReverse);
}
if (filter && filter !== '') {
@ -314,10 +308,10 @@ class Album extends React.Component {
<DropdownField
icon="swap_vert"
name="Sort"
value={sort}
value={sortField}
valueAsLabel
options={sort_options}
selected_icon={sort ? (sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null}
selected_icon={sortField ? (sortReverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null}
handleChange={this.onChangeSort}
/>
</div>
@ -351,6 +345,8 @@ const mapStateToProps = (state, ownProps) => {
const uri = decodeUri(ownProps.match.params.uri);
const itemSelector = makeItemSelector(uri);
const loadingSelector = makeLoadingSelector([`(.*)${uri}(.*)`, '^((?!contains).)*$', '^((?!me\/albums).)*$', '^((?!followers).)*$']);
const [sortField, sortReverse] = getSortSelector(state, SORT_KEY, 'disc_track');
return {
uri,
slim_mode: state.ui.slim_mode,
@ -360,8 +356,8 @@ const mapStateToProps = (state, ownProps) => {
spotify_library_albums: state.spotify.library_albums,
local_library_albums: state.mopidy.library_albums,
spotify_authorized: state.spotify.authorization,
sort: (state.ui.album_tracks_sort ? state.ui.album_tracks_sort : 'disc_track'),
sort_reverse: (!!state.ui.album_tracks_sort_reverse),
sortField,
sortReverse,
};
};

61
src/js/views/Artist.js
View File

@ -33,9 +33,13 @@ import { trackEvent } from '../components/Trackable';
import {
makeItemSelector,
makeLoadingSelector,
getSortSelector,
} from '../util/selectors';
import { nice_number } from '../components/NiceNumber';
const ALBUM_SORT_KEY = 'artist_albums';
const TRACK_SORT_KEY = 'artist_tracks';
class Artist extends React.Component {
constructor(props) {
super(props);
@ -93,34 +97,31 @@ class Artist extends React.Component {
}
onChangeTracksSort = (value) => {
this.onChangeSort('tracks', value);
this.onChangeSort(TRACK_SORT_KEY, value);
}
onChangeAlbumsSort = (value) => {
this.onChangeSort('albums', value);
this.onChangeSort(ALBUM_SORT_KEY, value);
}
onChangeSort = (type, value) => {
onChangeSort = (key, field) => {
const prefix = key.replace('artist_');
const {
[`${type}_sort`]: sort,
[`${type}_sort_reverse`]: sort_reverse,
[`${prefix}SortField`]: sortField,
[`${prefix}SortReverse`]: sortReverse,
uiActions: {
set,
setSort,
hideContextMenu,
},
} = this.props;
let reverse = false;
if (value !== null && sort === value) {
reverse = !sort_reverse;
if (field !== null && sortField === field) {
reverse = !sortReverse;
}
set({
[`artist_${type}_sort_reverse`]: reverse,
[`artist_${type}_sort`]: value,
});
setSort(key, field, reverse);
hideContextMenu();
trackEvent({ category: 'Artist', action: `Sort${type}`, label: `${value} ${reverse ? 'DESC' : 'ASC'}` });
}
onPlayAll = () => {
@ -184,8 +185,8 @@ class Artist extends React.Component {
uri,
uiActions,
artist,
albums_sort: sort,
albums_sort_reverse: sort_reverse,
albumSortField,
albumSortReverse,
filterType,
} = this.props;
const {
@ -197,8 +198,8 @@ class Artist extends React.Component {
} = artist;
let { albums } = this.props;
if (sort && albums) {
albums = sortItems(albums, sort, sort_reverse);
if (albumSortField && albums) {
albums = sortItems(albums, albumSortField, albumSortReverse);
}
if (filterType && albums) {
@ -286,10 +287,10 @@ class Artist extends React.Component {
<DropdownField
icon="swap_vert"
name="Sort"
value={sort}
value={albumSortField}
valueAsLabel
options={sort_options}
selected_icon={sort ? (sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null}
selected_icon={albumSortField ? (albumSortReverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null}
handleChange={this.onChangeAlbumsSort}
/>
<DropdownField
@ -316,14 +317,14 @@ class Artist extends React.Component {
artist: {
uri,
},
tracks_sort: sort,
tracks_sort_reverse: sort_reverse,
trackSortField,
trackSortReverse,
} = this.props;
const { tracksFilter: filter } = this.state;
let { artist: { tracks } } = this.props;
if (sort && tracks) {
tracks = sortItems(tracks, sort, sort_reverse);
if (trackSortField && tracks) {
tracks = sortItems(tracks, trackSortField, trackSortReverse);
}
if (filter && filter !== '') {
@ -355,10 +356,10 @@ class Artist extends React.Component {
<DropdownField
icon="swap_vert"
name="Sort"
value={sort}
value={trackSortField}
valueAsLabel
options={sort_options}
selected_icon={sort ? (sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null}
selected_icon={trackSortField ? (trackSortReverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null}
handleChange={this.onChangeTracksSort}
/>
</div>
@ -612,6 +613,8 @@ const mapStateToProps = (state, props) => {
const albumsSelector = makeItemSelector(artist.albums_uris);
albums = albumsSelector(state);
}
const [albumSortField, albumSortReverse] = getSortSelector(state, ALBUM_SORT_KEY, null);
const [trackSortField, trackSortReverse] = getSortSelector(state, TRACK_SORT_KEY, null);
return {
uri,
@ -621,10 +624,10 @@ const mapStateToProps = (state, props) => {
theme: state.ui.theme,
slim_mode: state.ui.slim_mode,
filterType: state.ui.artist_albums_filter,
albums_sort: state.ui.artist_albums_sort,
albums_sort_reverse: (!!state.ui.artist_albums_sort_reverse),
tracks_sort: state.ui.artist_tracks_sort,
tracks_sort_reverse: (!!state.ui.artist_tracks_sort_reverse),
albumSortField,
albumSortReverse,
trackSortField,
trackSortReverse,
spotify_authorized: state.spotify.authorization,
};
};

36
src/js/views/Playlist.js
View File

@ -26,6 +26,8 @@ import { makeItemSelector, makeLoadingSelector, getSortSelector } from '../util/
import { sortItems, applyFilter } from '../util/arrays';
import { decodeUri, encodeUri } from '../util/format';
const SORT_KEY = 'playlist_tracks';
class Playlist extends React.Component {
constructor(props) {
super(props);
@ -136,27 +138,23 @@ class Playlist extends React.Component {
deletePlaylist(uri);
}
onChangeSort = (value) => {
onChangeSort = (field) => {
const {
sortField,
sortReverse,
uiActions: {
set,
setSort,
hideContextMenu,
},
} = this.props;
let reverse = false;
if (value !== null && sortField === value) {
if (field !== null && sortField === field) {
reverse = !sortReverse;
}
set({
playlist_tracks_sort_reverse: reverse,
playlist_tracks_sort: value,
});
setSort(SORT_KEY, field, reverse);
hideContextMenu();
trackEvent({ category: 'Playlist', action: 'SortTracks', label: `${value} ${reverse ? 'DESC' : 'ASC'}` });
}
reorderTracks = (indexes, index) => {
@ -172,12 +170,12 @@ class Playlist extends React.Component {
snapshot_id,
tracks,
},
sort,
sort_reverse,
sortField,
sortReverse,
} = this.props;
const { filter } = this.state;
if (sort !== 'sort_id' || filter !== '') {
if (sortField !== 'sort_id' || filter !== '') {
createNotification({
content: i18n('errors.cannot_reorder.title'),
description: i18n('errors.cannot_reorder.description'),
@ -186,7 +184,7 @@ class Playlist extends React.Component {
return;
}
if (sort_reverse) {
if (sortReverse) {
const count = tracks.length - 1;
index = count - index + 1;
indexes = indexes.map((index) => count - index);
@ -331,8 +329,8 @@ class Playlist extends React.Component {
loading,
loading_tracks,
slim_mode,
sort,
sort_reverse,
sortField,
sortReverse,
} = this.props;
const {
filter,
@ -361,8 +359,8 @@ class Playlist extends React.Component {
},
} = this.props;
if (sort && tracks) {
tracks = sortItems(tracks, sort, sort_reverse);
if (sortField && tracks) {
tracks = sortItems(tracks, sortField, sortReverse);
}
if (filter && filter !== '') {
@ -453,10 +451,10 @@ class Playlist extends React.Component {
<DropdownField
icon="swap_vert"
name="Sort"
value={sort}
value={sortField}
valueAsLabel
options={sort_options}
selected_icon={sort ? (sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null}
selected_icon={sortField ? (sortReverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null}
handleChange={this.onChangeSort}
/>
</div>
@ -498,7 +496,7 @@ const mapStateToProps = (state, ownProps) => {
const itemSelector = makeItemSelector(uri);
const loadingSelector = makeLoadingSelector([`(.*)${uri}(.*)`, '^((?!contains).)*$', '^((?!tracks).)*$', '^((?!followers).)*$']);
const loadingTracksSelector = makeLoadingSelector([`(.*)${uri}(.*)tracks(.*)`]);
const { sortField, sortReverse } = getSortSelector(state, 'playlist_tracks');
const [sortField, sortReverse] = getSortSelector(state, SORT_KEY);
return {
uri,

63
src/js/views/library/LibraryAlbums.js
View File

@ -20,8 +20,10 @@ import {
makeProcessProgressSelector,
getLibrarySource,
makeProvidersSelector,
getSortSelector,
} from '../../util/selectors';
const SORT_KEY = 'library_albums';
const processKeys = [
'MOPIDY_GET_LIBRARY_ALBUMS',
'SPOTIFY_GET_LIBRARY_ALBUMS',
@ -102,28 +104,29 @@ class LibraryAlbums extends React.Component {
});
}
setSort = (value) => {
onSortChange = (field) => {
const {
sort,
sort_reverse,
sortField,
sortReverse,
uiActions: {
set,
setSort,
hideContextMenu,
},
} = this.props;
let reverse = false;
if (sort === value) reverse = !sort_reverse;
if (field !== null && sortField === field) {
reverse = !sortReverse;
}
set({
library_albums_sort_reverse: reverse,
library_albums_sort: value,
});
setSort(SORT_KEY, field, reverse);
hideContextMenu();
}
renderView = () => {
const {
sort,
sort_reverse,
sortField,
sortReverse,
view,
loading_progress,
} = this.props;
@ -136,8 +139,8 @@ class LibraryAlbums extends React.Component {
return <Loader body loading progress={loading_progress} />;
}
if (sort) {
albums = sortItems(albums, sort, sort_reverse);
if (sortField) {
albums = sortItems(albums, sortField, sortReverse);
}
if (filter && filter !== '') {
@ -165,11 +168,11 @@ class LibraryAlbums extends React.Component {
render = () => {
const {
sort,
view,
source,
providers,
sort_reverse,
sortField,
sortReverse,
uiActions,
loading_progress,
} = this.props;
@ -226,11 +229,11 @@ class LibraryAlbums extends React.Component {
<DropdownField
icon="swap_vert"
name={i18n('fields.sort')}
value={sort}
value={sortField}
valueAsLabel
options={sort_options}
selected_icon={sort ? (sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null}
handleChange={(val) => { this.setSort(val); uiActions.hideContextMenu(); }}
selected_icon={sortField ? (sortReverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null}
handleChange={this.onSortChange}
/>
<DropdownField
icon="visibility"
@ -281,16 +284,20 @@ class LibraryAlbums extends React.Component {
const librarySelector = makeLibrarySelector('albums');
const processProgressSelector = makeProcessProgressSelector(processKeys);
const providersSelector = makeProvidersSelector('albums');
const mapStateToProps = (state) => ({
loading_progress: processProgressSelector(state),
uri_schemes: state.mopidy.uri_schemes,
albums: librarySelector(state, 'albums'),
providers: providersSelector(state),
view: state.ui.library_albums_view,
source: getLibrarySource(state, 'albums'),
sort: state.ui.library_albums_sort,
sort_reverse: state.ui.library_albums_sort_reverse,
});
const mapStateToProps = (state) => {
const [sortField, sortReverse] = getSortSelector(state, SORT_KEY, null);
return {
loading_progress: processProgressSelector(state),
uri_schemes: state.mopidy.uri_schemes,
albums: librarySelector(state, 'albums'),
providers: providersSelector(state),
view: state.ui.library_albums_view,
source: getLibrarySource(state, 'albums'),
sortField,
sortReverse,
};
};
const mapDispatchToProps = (dispatch) => ({
coreActions: bindActionCreators(coreActions, dispatch),
uiActions: bindActionCreators(uiActions, dispatch),

65
src/js/views/library/LibraryArtists.js
View File

@ -18,8 +18,10 @@ import {
makeProcessProgressSelector,
getLibrarySource,
makeProvidersSelector,
getSortSelector,
} from '../../util/selectors';
const SORT_KEY = 'library_artists';
const processKeys = [
'MOPIDY_GET_LIBRARY_ARTISTS',
'SPOTIFY_GET_LIBRARY_ARTISTS',
@ -67,14 +69,23 @@ class LibraryArtists extends React.Component {
cancelProcess(processKeys);
}
setSort = (value) => {
const { sort, sort_reverse, uiActions: { set } } = this.props;
onSortChange = (field) => {
const {
sortField,
sortReverse,
uiActions: {
setSort,
hideContextMenu,
},
} = this.props;
let reverse = false;
if (sort === value) reverse = !sort_reverse;
set({
library_artists_sort_reverse: reverse,
library_artists_sort: value,
});
if (field !== null && sortField === field) {
reverse = !sortReverse;
}
setSort(SORT_KEY, field, reverse);
hideContextMenu();
}
handleContextMenu = (e, item) => {
@ -107,8 +118,8 @@ class LibraryArtists extends React.Component {
renderView = () => {
const {
sort,
sort_reverse,
sortField,
sortReverse,
view,
loading_progress,
} = this.props;
@ -123,8 +134,8 @@ class LibraryArtists extends React.Component {
);
}
if (sort) {
artists = sortItems(artists, sort, sort_reverse);
if (sortField) {
artists = sortItems(artists, sortField, sortReverse);
}
if (filter !== '') {
@ -154,6 +165,8 @@ class LibraryArtists extends React.Component {
const {
loading_progress,
providers,
sortField,
sortReverse,
} = this.props;
const view_options = [
@ -196,11 +209,11 @@ class LibraryArtists extends React.Component {
<DropdownField
icon="swap_vert"
name={i18n('fields.sort')}
value={this.props.sort}
value={sortField}
valueAsLabel
options={sort_options}
selected_icon={this.props.sort ? (this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null}
handleChange={(value) => { this.setSort(value); this.props.uiActions.hideContextMenu(); }}
selected_icon={sortField ? (sortReverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null}
handleChange={this.onSortChange}
/>
<DropdownField
icon="visibility"
@ -251,16 +264,20 @@ class LibraryArtists extends React.Component {
const librarySelector = makeLibrarySelector('artists');
const processProgressSelector = makeProcessProgressSelector(processKeys);
const providersSelector = makeProvidersSelector('artists');
const mapStateToProps = (state) => ({
loading_progress: processProgressSelector(state),
uri_schemes: state.mopidy.uri_schemes,
providers: providersSelector(state),
artists: librarySelector(state, 'artists'),
source: getLibrarySource(state, 'artists'),
sort: (state.ui.library_artists_sort ? state.ui.library_artists_sort : null),
sort_reverse: (state.ui.library_artists_sort_reverse ? state.ui.library_artists_sort_reverse : false),
view: state.ui.library_artists_view,
});
const mapStateToProps = (state) => {
const [sortField, sortReverse] = getSortSelector(state, SORT_KEY, null);
return {
loading_progress: processProgressSelector(state),
uri_schemes: state.mopidy.uri_schemes,
providers: providersSelector(state),
artists: librarySelector(state, 'artists'),
source: getLibrarySource(state, 'artists'),
sortField,
sortReverse,
view: state.ui.library_artists_view,
};
};
const mapDispatchToProps = (dispatch) => ({
uiActions: bindActionCreators(uiActions, dispatch),

49
src/js/views/library/LibraryPlaylists.js
View File

@ -20,8 +20,10 @@ import {
makeProcessProgressSelector,
makeProvidersSelector,
getLibrarySource,
getSortSelector,
} from '../../util/selectors';
const SORT_KEY = 'library_playlists';
const processKeys = [
'MOPIDY_GET_LIBRARY_PLAYLISTS',
'SPOTIFY_GET_LIBRARY_PLAYLISTS',
@ -88,15 +90,23 @@ class LibraryPlaylists extends React.Component {
uris.forEach((uri) => loadLibrary(uri, 'playlists', { forceRefetch }));
};
setSort(value) {
let reverse = false;
if (this.props.sort === value) reverse = !this.props.sort_reverse;
onSortChange = (field) => {
const {
sortField,
sortReverse,
uiActions: {
setSort,
hideContextMenu,
},
} = this.props;
const data = {
library_playlists_sort_reverse: reverse,
library_playlists_sort: value,
};
this.props.uiActions.set(data);
let reverse = false;
if (field !== null && sortField === field) {
reverse = !sortReverse;
}
setSort(SORT_KEY, field, reverse);
hideContextMenu();
}
handleContextMenu(e, item) {
@ -111,8 +121,8 @@ class LibraryPlaylists extends React.Component {
renderView = () => {
const {
sort,
sort_reverse,
sortField,
sortReverse,
view,
loading_progress,
playlists: playlistsProp,
@ -126,8 +136,8 @@ class LibraryPlaylists extends React.Component {
}
let playlists = [...playlistsProp];
if (sort) {
playlists = sortItems(playlists, sort, sort_reverse);
if (sortField) {
playlists = sortItems(playlists, sortField, sortReverse);
}
playlists = removeDuplicates(playlists);
@ -159,8 +169,8 @@ class LibraryPlaylists extends React.Component {
uiActions,
providers,
source,
sort,
sort_reverse,
sortField,
sortReverse,
view,
loading_progress,
} = this.props;
@ -220,11 +230,11 @@ class LibraryPlaylists extends React.Component {
<DropdownField
icon="swap_vert"
name={i18n('fields.sort')}
value={sort}
value={sortField}
valueAsLabel
options={sort_options}
selected_icon={sort ? (sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null}
handleChange={(value) => { this.setSort(value); uiActions.hideContextMenu(); }}
selected_icon={sortField ? (sortReverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null}
handleChange={this.onSortChange}
/>
<DropdownField
icon="visibility"
@ -292,6 +302,7 @@ const mapStateToProps = (state) => {
} = {},
},
} = state;
const [sortField, sortReverse] = getSortSelector(state, SORT_KEY, null);
return {
slim_mode: state.ui.slim_mode,
@ -301,8 +312,8 @@ const mapStateToProps = (state) => {
source: getLibrarySource(state, 'playlists'),
me_id,
view: state.ui.library_playlists_view,
sort: (state.ui.library_playlists_sort ? state.ui.library_playlists_sort : null),
sort_reverse: (state.ui.library_playlists_sort_reverse ? state.ui.library_playlists_sort_reverse : false),
sortField,
sortReverse,
};
};

71
src/js/views/library/LibraryTracks.js
View File

@ -20,8 +20,10 @@ import {
makeProcessProgressSelector,
getLibrarySource,
makeProvidersSelector,
getSortSelector,
} from '../../util/selectors';
const SORT_KEY = 'library_tracks';
const processKeys = [
'MOPIDY_GET_LIBRARY_TRACKS',
'SPOTIFY_GET_LIBRARY_TRACKS',
@ -102,28 +104,29 @@ class LibraryTracks extends React.Component {
});
}
setSort = (value) => {
onSortChange = (field) => {
const {
sort,
sort_reverse,
sortField,
sortReverse,
uiActions: {
set,
setSort,
hideContextMenu,
},
} = this.props;
let reverse = false;
if (sort === value) reverse = !sort_reverse;
if (field !== null && sortField === field) {
reverse = !sortReverse;
}
set({
library_tracks_sort_reverse: reverse,
library_tracks_sort: value,
});
setSort(SORT_KEY, field, reverse);
hideContextMenu();
}
playAll = () => {
const {
sort,
sort_reverse,
sortField,
sortReverse,
mopidyActions: {
playURIs,
},
@ -136,8 +139,8 @@ class LibraryTracks extends React.Component {
if (!tracks || !tracks.length) return;
if (sort) {
tracks = sortItems(tracks, sort, sort_reverse);
if (sortField) {
tracks = sortItems(tracks, sortField, sortReverse);
}
if (filter && filter !== '') {
@ -150,8 +153,8 @@ class LibraryTracks extends React.Component {
renderView = () => {
const {
sort,
sort_reverse,
sortField,
sortReverse,
loading_progress,
} = this.props;
const {
@ -163,8 +166,8 @@ class LibraryTracks extends React.Component {
return <Loader body loading progress={loading_progress} />;
}
if (sort) {
tracks = sortItems(tracks, sort, sort_reverse);
if (sortField) {
tracks = sortItems(tracks, sortField, sortReverse);
}
if (filter && filter !== '') {
@ -180,10 +183,10 @@ class LibraryTracks extends React.Component {
render = () => {
const {
sort,
source,
providers,
sort_reverse,
sortField,
sortReverse,
uiActions,
loading_progress,
} = this.props;
@ -220,11 +223,11 @@ class LibraryTracks extends React.Component {
<DropdownField
icon="swap_vert"
name={i18n('fields.sort')}
value={sort}
value={sortField}
valueAsLabel
options={sort_options}
selected_icon={sort ? (sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null}
handleChange={(val) => { this.setSort(val); uiActions.hideContextMenu(); }}
selected_icon={sortField ? (sortReverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null}
handleChange={this.onSortChange}
/>
<DropdownField
icon="cloud"
@ -281,16 +284,20 @@ class LibraryTracks extends React.Component {
const librarySelector = makeLibrarySelector('tracks');
const processProgressSelector = makeProcessProgressSelector(processKeys);
const providersSelector = makeProvidersSelector('tracks');
const mapStateToProps = (state) => ({
loading_progress: processProgressSelector(state),
mopidy_uri_schemes: state.mopidy.uri_schemes,
tracks: librarySelector(state, 'tracks'),
view: state.ui.library_tracks_view,
source: getLibrarySource(state, 'tracks'),
providers: providersSelector(state),
sort: state.ui.library_tracks_sort,
sort_reverse: state.ui.library_tracks_sort_reverse,
});
const mapStateToProps = (state) => {
const [sortField, sortReverse] = getSortSelector(state, SORT_KEY, null);
return {
loading_progress: processProgressSelector(state),
mopidy_uri_schemes: state.mopidy.uri_schemes,
tracks: librarySelector(state, 'tracks'),
view: state.ui.library_tracks_view,
source: getLibrarySource(state, 'tracks'),
providers: providersSelector(state),
sortField,
sortReverse,
};
};
const mapDispatchToProps = (dispatch) => ({
coreActions: bindActionCreators(coreActions, dispatch),