Remember active tab for favorites page

src/__tests__/App.test.tsx

@@ -9,8 +9,9 @@ import { Player } from '../redux/playerSlice';
 import { General } from '../redux/miscSlice';
 import { Playlist } from '../redux/playlistSlice';
 import { ConfigPage } from '../redux/configSlice';
-import App from '../App';
 import { FolderSelection } from '../redux/folderSlice';
+import { FavoritePage } from '../redux/favoriteSlice';
+import App from '../App';
 
 const middlewares: Middleware<Record<string, unknown>, any, Dispatch<AnyAction>>[] | undefined = [];
 const mockStore = configureMockStore(middlewares);
@@ -109,6 +110,12 @@ const configState: ConfigPage = {
   },
 };
 
+const favoriteState: FavoritePage = {
+  active: {
+    tab: 'tracks',
+  },
+};
+
 const mockInitialState = {
   player: playerState,
   playQueue: playQueueState,
@@ -116,6 +123,7 @@ const mockInitialState = {
   playlist: playlistState,
   folder: folderState,
   config: configState,
+  favorite: favoriteState,
 };
 
 describe('App', () => {

src/components/starred/StarredView.tsx

@@ -20,16 +20,15 @@ import ListViewType from '../viewtypes/ListViewType';
 import GridViewType from '../viewtypes/GridViewType';
 import { setStatus } from '../../redux/playerSlice';
 import { StyledNavItem } from '../shared/styled';
-import useRouterQuery from '../../hooks/useRouterQuery';
+import { setActive } from '../../redux/favoriteSlice';
 
 const StarredView = () => {
   const history = useHistory();
   const dispatch = useAppDispatch();
-  const query = useRouterQuery();
   const queryClient = useQueryClient();
   const multiSelect = useAppSelector((state) => state.multiSelect);
   const folder = useAppSelector((state) => state.folder);
-  const [page, setPage] = useState(query.get('page') || 'tracks');
+  const favorite = useAppSelector((state) => state.favorite);
   const [viewType, setViewType] = useState(settings.getSync('albumViewType') || 'list');
   const [musicFolder, setMusicFolder] = useState(undefined);
 
@@ -49,10 +48,14 @@ const StarredView = () => {
   const [searchQuery, setSearchQuery] = useState('');
   const filteredData = useSearchQuery(
     searchQuery,
-    page === 'tracks' ? data?.song : page === 'albums' ? data?.album : data?.artist,
-    page === 'tracks'
+    favorite.active.tab === 'tracks'
+      ? data?.song
+      : favorite.active.tab === 'albums'
+      ? data?.album
+      : data?.artist,
+    favorite.active.tab === 'tracks'
       ? ['title', 'artist', 'album', 'name', 'genre']
-      : page === 'albums'
+      : favorite.active.tab === 'albums'
       ? ['name', 'artist', 'genre', 'year']
       : ['name']
   );
@@ -66,14 +69,14 @@ const StarredView = () => {
         if (e.ctrlKey) {
           dispatch(toggleSelected(rowData));
         } else if (e.shiftKey) {
-          if (page === 'tracks') {
+          if (favorite.active.tab === 'tracks') {
             dispatch(setRangeSelected(rowData));
             if (searchQuery !== '') {
               dispatch(toggleRangeSelected(filteredData));
             } else {
               dispatch(toggleRangeSelected(data.song));
             }
-          } else if (page === 'albums') {
+          } else if (favorite.active.tab === 'albums') {
             dispatch(setRangeSelected(rowData));
             dispatch(toggleRangeSelected(searchQuery !== '' ? filteredData : data?.album));
           }
@@ -87,7 +90,7 @@ const StarredView = () => {
     timeout = null;
     dispatch(clearSelected());
 
-    if (page === 'tracks') {
+    if (favorite.active.tab === 'tracks') {
       dispatch(
         setPlayQueueByRowClick({
           entries: data.song,
@@ -98,7 +101,7 @@ const StarredView = () => {
       );
       dispatch(setStatus('PLAYING'));
       dispatch(fixPlayer2Index());
-    } else if (page === 'albums') {
+    } else if (favorite.active.tab === 'albums') {
       history.push(`/library/album/${e.id}`);
     } else {
       history.push(`/library/artist/${e.id}`);
@@ -138,7 +141,7 @@ const StarredView = () => {
         <GenericPageHeader
           title="Favorites"
           subtitle={
-            <Nav activeKey={page} onSelect={(e) => setPage(e)}>
+            <Nav activeKey={favorite.active.tab} onSelect={(e) => dispatch(setActive({ tab: e }))}>
               <StyledNavItem eventKey="tracks">Tracks</StyledNavItem>
               <StyledNavItem eventKey="albums">Albums</StyledNavItem>
               <StyledNavItem eventKey="artists">Artists</StyledNavItem>
@@ -147,7 +150,7 @@ const StarredView = () => {
           searchQuery={searchQuery}
           handleSearch={(e: any) => setSearchQuery(e)}
           clearSearchQuery={() => setSearchQuery('')}
-          showViewTypeButtons={page !== 'tracks'}
+          showViewTypeButtons={favorite.active.tab !== 'tracks'}
           viewTypeSetting="album"
           showSearchBar
           handleListClick={() => setViewType('list')}
@@ -159,7 +162,7 @@ const StarredView = () => {
         <PageLoader />
       ) : (
         <>
-          {page === 'tracks' && (
+          {favorite.active.tab === 'tracks' && (
             <ListViewType
               data={searchQuery !== '' ? filteredData : data.song}
               tableColumns={settings.getSync('musicListColumns')}
@@ -183,7 +186,7 @@ const StarredView = () => {
               handleFavorite={handleRowFavorite}
             />
           )}
-          {page === 'albums' && (
+          {favorite.active.tab === 'albums' && (
             <>
               {viewType === 'list' && (
                 <ListViewType
@@ -230,7 +233,7 @@ const StarredView = () => {
               )}
             </>
           )}
-          {page === 'artists' && (
+          {favorite.active.tab === 'artists' && (
             <>
               {viewType === 'list' && (
                 <ListViewType

src/redux/favoriteSlice.ts

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

src/redux/store.ts

@@ -7,6 +7,7 @@ import miscReducer from './miscSlice';
 import playlistReducer from './playlistSlice';
 import folderReducer from './folderSlice';
 import configReducer from './configSlice';
+import favoriteReducer from './favoriteSlice';
 
 export const store = configureStore<PlayQueue | any>({
   reducer: {
@@ -17,6 +18,7 @@ export const store = configureStore<PlayQueue | any>({
     playlist: playlistReducer,
     folder: folderReducer,
     config: configReducer,
+    favorite: favoriteReducer,
   },
   middleware: [forwardToMain],
 });