Removing custom sorter, we now use Lodash orderBy, one less responsibility

src/js/views/library/LibraryAlbums.js

@@ -215,10 +215,10 @@ class LibraryAlbums extends React.Component {
       return (
         <section className="content-wrapper">
           <List
-            handleContextMenu={(e, item) => this.handleContextMenu(e, item)}
+            handleContextMenu={this.handleContextMenu}
             rows={albums}
             thumbnail
-            details={['artists', 'tracks_uris.length', 'last_modified']}
+            details={['artists', 'tracks_total', 'last_modified']}
             right_column={['added_at']}
             className="albums"
             link_prefix="/album/"
@@ -234,7 +234,7 @@ class LibraryAlbums extends React.Component {
     return (
       <section className="content-wrapper">
         <AlbumGrid
-          handleContextMenu={(e, item) => this.handleContextMenu(e, item)}
+          handleContextMenu={this.handleContextMenu}
           albums={albums}
         />
         <LazyLoadListener
@@ -309,7 +309,7 @@ class LibraryAlbums extends React.Component {
         label: i18n('fields.filters.name'),
       },
       {
-        value: 'artists.first.name',
+        value: 'artist',
         label: i18n('fields.filters.artist'),
       },
       {
@@ -317,7 +317,7 @@ class LibraryAlbums extends React.Component {
         label: i18n('fields.filters.updated'),
       },
       {
-        value: 'tracks_uris.length',
+        value: 'tracks',
         label: i18n('fields.filters.tracks'),
       },
       {
@@ -327,7 +327,7 @@ class LibraryAlbums extends React.Component {
     ];
 
     const options = (
-      <div className="header__options__wrapper">
+      <>
         <FilterField
           initialValue={filter}
           handleChange={(value) => this.setState({ filter: value, limit: per_page })}
@@ -367,7 +367,7 @@ class LibraryAlbums extends React.Component {
           {loading ? <Icon name="close" /> : <Icon name="refresh" /> }
           {loading ? <I18n path="actions.cancel" /> : <I18n path="actions.refresh" /> }
         </Button>
-      </div>
+      </>
     );
 
     return (

src/js/views/library/LibraryArtists.js

@@ -286,7 +286,7 @@ class LibraryArtists extends React.Component {
     ];
 
     const options = (
-      <span>
+      <>
         <FilterField
           initialValue={this.state.filter}
           handleChange={(value) => this.setState({ filter: value, limit: this.state.per_page })}
@@ -326,7 +326,7 @@ class LibraryArtists extends React.Component {
           {loading ? <Icon name="close" /> : <Icon name="refresh" /> }
           {loading ? <I18n path="actions.cancel" /> : <I18n path="actions.refresh" /> }
         </Button>
-      </span>
+      </>
     );
 
     return (

src/js/views/library/LibraryBrowseDirectory.js

@@ -217,7 +217,7 @@ class LibraryBrowseDirectory extends React.Component {
     ];
 
     const options = (
-      <span>
+      <>
         <DropdownField
           icon="visibility"
           name="View"
@@ -245,7 +245,7 @@ class LibraryBrowseDirectory extends React.Component {
           <Icon name="keyboard_backspace" />
           <I18n path="actions.back" />
         </Button>
-      </span>
+      </>
     );
 
     return (

src/js/views/library/LibraryPlaylists.js

@@ -274,11 +274,11 @@ class LibraryPlaylists extends React.Component {
         label: i18n('fields.filters.editable'),
       },
       {
-        value: 'owner.id',
+        value: 'owner',
         label: i18n('fields.filters.owner'),
       },
       {
-        value: 'tracks_total',
+        value: 'tracks',
         label: i18n('fields.filters.tracks'),
       },
       {
@@ -288,7 +288,7 @@ class LibraryPlaylists extends React.Component {
     ];
 
     const options = (
-      <span>
+      <>
         <FilterField
           initialValue={filter}
           handleChange={(value) => this.setState({ filter: value })}
@@ -337,7 +337,7 @@ class LibraryPlaylists extends React.Component {
           <Icon name="add_box" />
           <I18n path="actions.add" />
         </Button>
-      </span>
+      </>
     );
 
     return (

src/js/views/library/LibraryTracks.js

@@ -244,17 +244,17 @@ class LibraryTracks extends React.Component {
         label: i18n('fields.filters.name'),
       },
       {
-        value: 'artists.first.name',
+        value: 'artist',
         label: i18n('fields.filters.artist'),
       },
       {
-        value: 'album.name',
+        value: 'album',
         label: i18n('fields.filters.album'),
       },
     ];
 
     const options = (
-      <div className="header__options__wrapper">
+      <>
         <FilterField
           initialValue={filter}
           handleChange={(value) => this.setState({ filter: value, limit: per_page })}
@@ -286,7 +286,7 @@ class LibraryTracks extends React.Component {
           {loading ? <Icon name="close" /> : <Icon name="refresh" /> }
           {loading ? <I18n path="actions.cancel" /> : <I18n path="actions.refresh" /> }
         </Button>
-      </div>
+      </>
     );
 
     return (