Remember filter for album page

src/__tests__/App.test.tsx

@@ -12,6 +12,7 @@ import { ConfigPage } from '../redux/configSlice';
 import { FolderSelection } from '../redux/folderSlice';
 import { FavoritePage } from '../redux/favoriteSlice';
 import App from '../App';
+import { AlbumPage } from '../redux/albumSlice';
 
 const middlewares: Middleware<Record<string, unknown>, any, Dispatch<AnyAction>>[] | undefined = [];
 const mockStore = configureMockStore(middlewares);
@@ -116,6 +117,12 @@ const favoriteState: FavoritePage = {
   },
 };
 
+const albumState: AlbumPage = {
+  active: {
+    filter: 'random',
+  },
+};
+
 const mockInitialState = {
   player: playerState,
   playQueue: playQueueState,
@@ -124,6 +131,7 @@ const mockInitialState = {
   folder: folderState,
   config: configState,
   favorite: favoriteState,
+  album: albumState,
 };
 
 describe('App', () => {

src/components/library/AlbumList.tsx

@@ -20,25 +20,24 @@ import {
 } from '../../redux/multiSelectSlice';
 import { StyledInputPicker } from '../shared/styled';
 import { RefreshButton } from '../shared/ToolbarButtons';
-import useRouterQuery from '../../hooks/useRouterQuery';
+import { setActive } from '../../redux/albumSlice';
 
 const ALBUM_SORT_TYPES = [
   { label: 'A-Z (Name)', value: 'alphabeticalByName', role: 'Default' },
   { label: 'A-Z (Artist)', value: 'alphabeticalByArtist', role: 'Default' },
   { label: 'Most Played', value: 'frequent', role: 'Default' },
-  { label: 'Newly Added', value: 'newest', role: 'Default' },
   { label: 'Random', value: 'random', role: 'Default' },
+  { label: 'Recently Added', value: 'newest', role: 'Default' },
   { label: 'Recently Played', value: 'recent', role: 'Default' },
 ];
 
 const AlbumList = () => {
   const dispatch = useAppDispatch();
   const history = useHistory();
-  const query = useRouterQuery();
   const queryClient = useQueryClient();
   const folder = useAppSelector((state) => state.folder);
+  const album = useAppSelector((state) => state.album);
   const [isRefreshing, setIsRefreshing] = useState(false);
-  const [sortBy, setSortBy] = useState(query.get('sortType') || 'random');
   const [sortTypes, setSortTypes] = useState<any[]>();
   const [viewType, setViewType] = useState(settings.getSync('albumViewType'));
   const [musicFolder, setMusicFolder] = useState(undefined);
@@ -50,16 +49,16 @@ const AlbumList = () => {
   }, [folder]);
 
   const { isLoading, isError, data: albums, error }: any = useQuery(
-    ['albumList', sortBy, musicFolder],
+    ['albumList', album.active.filter, musicFolder],
     () =>
-      sortBy === 'random'
+      album.active.filter === 'random'
         ? getAlbumsDirect({
             type: 'random',
             size: Number(settings.getSync('gridCardSize')),
             musicFolderId: musicFolder,
           })
         : getAllAlbums({
-            type: sortBy,
+            type: album.active.filter,
             size: 500,
             offset: 0,
             musicFolderId: musicFolder,
@@ -127,7 +126,7 @@ const AlbumList = () => {
   const handleRowFavorite = async (rowData: any) => {
     if (!rowData.starred) {
       await star(rowData.id, 'album');
-      queryClient.setQueryData(['albumList', sortBy, musicFolder], (oldData: any) => {
+      queryClient.setQueryData(['albumList', album.active.filter, musicFolder], (oldData: any) => {
         const starredIndices = _.keys(_.pickBy(oldData, { id: rowData.id }));
         starredIndices.forEach((index) => {
           oldData[index].starred = Date.now();
@@ -137,7 +136,7 @@ const AlbumList = () => {
       });
     } else {
       await unstar(rowData.id, 'album');
-      queryClient.setQueryData(['albumList', sortBy, musicFolder], (oldData: any) => {
+      queryClient.setQueryData(['albumList', album.active.filter, musicFolder], (oldData: any) => {
         const starredIndices = _.keys(_.pickBy(oldData, { id: rowData.id }));
         starredIndices.forEach((index) => {
           oldData[index].starred = undefined;
@@ -159,15 +158,15 @@ const AlbumList = () => {
               <StyledInputPicker
                 size="sm"
                 width={180}
-                defaultValue={sortBy}
+                defaultValue={album.active.filter}
                 groupBy="role"
                 data={sortTypes}
                 cleanable={false}
                 placeholder="Sort Type"
                 onChange={async (value: string) => {
-                  await queryClient.cancelQueries(['albumList', sortBy, musicFolder]);
+                  await queryClient.cancelQueries(['albumList', album.active.filter, musicFolder]);
                   setSearchQuery('');
-                  setSortBy(value);
+                  dispatch(setActive({ filter: value }));
                 }}
               />
               <RefreshButton onClick={handleRefresh} size="sm" loading={isRefreshing} width={100} />

src/redux/albumSlice.ts

@@ -0,0 +1,26 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+export interface AlbumPage {
+  active: {
+    filter: string;
+  };
+}
+
+const initialState: AlbumPage = {
+  active: {
+    filter: 'random',
+  },
+};
+
+const albumSlice = createSlice({
+  name: 'album',
+  initialState,
+  reducers: {
+    setActive: (state, action: PayloadAction<{ filter: string }>) => {
+      state.active.filter = action.payload.filter;
+    },
+  },
+});
+
+export const { setActive } = albumSlice.actions;
+export default albumSlice.reducer;

src/redux/store.ts

@@ -8,6 +8,7 @@ import playlistReducer from './playlistSlice';
 import folderReducer from './folderSlice';
 import configReducer from './configSlice';
 import favoriteReducer from './favoriteSlice';
+import albumReducer from './albumSlice';
 
 export const store = configureStore<PlayQueue | any>({
   reducer: {
@@ -19,6 +20,7 @@ export const store = configureStore<PlayQueue | any>({
     folder: folderReducer,
     config: configReducer,
     favorite: favoriteReducer,
+    album: albumReducer,
   },
   middleware: [forwardToMain],
 });