From 75b91b4fa6f7c3782989df1bc812ad573f8863bc Mon Sep 17 00:00:00 2001 From: jeffvli Date: Mon, 25 Oct 2021 15:24:23 -0700 Subject: [PATCH] Remember filter for album page --- src/__tests__/App.test.tsx | 8 ++++++++ src/components/library/AlbumList.tsx | 23 +++++++++++------------ src/redux/albumSlice.ts | 26 ++++++++++++++++++++++++++ src/redux/store.ts | 2 ++ 4 files changed, 47 insertions(+), 12 deletions(-) create mode 100644 src/redux/albumSlice.ts diff --git a/src/__tests__/App.test.tsx b/src/__tests__/App.test.tsx index 6149f50..d467b97 100644 --- a/src/__tests__/App.test.tsx +++ b/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, any, Dispatch>[] | 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', () => { diff --git a/src/components/library/AlbumList.tsx b/src/components/library/AlbumList.tsx index 31a3b9d..62ed996 100644 --- a/src/components/library/AlbumList.tsx +++ b/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(); 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 = () => { { - await queryClient.cancelQueries(['albumList', sortBy, musicFolder]); + await queryClient.cancelQueries(['albumList', album.active.filter, musicFolder]); setSearchQuery(''); - setSortBy(value); + dispatch(setActive({ filter: value })); }} /> diff --git a/src/redux/albumSlice.ts b/src/redux/albumSlice.ts new file mode 100644 index 0000000..4e797d6 --- /dev/null +++ b/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; diff --git a/src/redux/store.ts b/src/redux/store.ts index 4214e90..5b75665 100644 --- a/src/redux/store.ts +++ b/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({ reducer: { @@ -19,6 +20,7 @@ export const store = configureStore({ folder: folderReducer, config: configReducer, favorite: favoriteReducer, + album: albumReducer, }, middleware: [forwardToMain], });