Move sortBy/sortOrder state out of useFilteredTracks

Author: martpie

src/hooks/useFilteredTracks.ts

@@ -1,6 +1,6 @@
 import { useEffect, useMemo } from 'react';
 
-import type { Track } from '../generated/typings';
+import type { SortBy, SortOrder, Track } from '../generated/typings';
 import {
   filterTracks,
   getSortOrder,
@@ -15,17 +15,16 @@ import useLibraryStore, { useLibraryAPI } from '../stores/useLibraryStore';
  */
 export default function useFilteredTracks(
   tracks: Track[],
-  enableSort = true,
+  sortBy?: SortBy,
+  sortOrder?: SortOrder,
 ): Track[] {
   const search = useLibraryStore((state) => stripAccents(state.search));
-  const sortBy = useLibraryStore((state) => state.sortBy);
-  const sortOrder = useLibraryStore((state) => state.sortOrder);
   const libraryAPI = useLibraryAPI();
 
   const filteredTracks = useMemo(() => {
     let searchedTracks = filterTracks(tracks, search);
 
-    if (enableSort) {
+    if (sortBy && sortOrder) {
       // sorting being a costly operation, do it after filtering, ignore it if not needed
       searchedTracks = sortTracks(
         searchedTracks,
@@ -35,7 +34,7 @@ export default function useFilteredTracks(
     }
 
     return searchedTracks;
-  }, [tracks, search, sortBy, sortOrder, enableSort]);
+  }, [tracks, search, sortBy, sortOrder]);
 
   // Update the footer status based on the displayed tracks
   useEffect(() => {

src/views/ViewLibrary.tsx

@@ -18,6 +18,8 @@ export default function ViewLibrary() {
   const trackPlayingID = usePlayingTrackID();
   const refreshing = useLibraryStore((state) => state.refreshing);
   const search = useLibraryStore((state) => state.search);
+  const sortBy = useLibraryStore((state) => state.sortBy);
+  const sortOrder = useLibraryStore((state) => state.sortOrder);
 
   const { playlists, tracksDensity } = useLoaderData() as LibraryLoaderData;
 
@@ -31,7 +33,7 @@ export default function ViewLibrary() {
     refetchOnReconnect: false,
   });
 
-  const filteredTracks = useFilteredTracks(tracks ?? []);
+  const filteredTracks = useFilteredTracks(tracks ?? [], sortBy, sortOrder);
 
   const getLibraryComponent = useMemo(() => {
     // Refreshing library

src/views/ViewPlaylistDetails.tsx

@@ -28,7 +28,7 @@ export default function ViewPlaylistDetails() {
   const invalidate = useInvalidate();
 
   const search = useLibraryStore((state) => state.search);
-  const filteredTracks = useFilteredTracks(playlistTracks, false);
+  const filteredTracks = useFilteredTracks(playlistTracks);
 
   const onReorder = useCallback(
     async (