diff --git a/src/__tests__/App.test.tsx b/src/__tests__/App.test.tsx index e5c962e..4308c36 100644 --- a/src/__tests__/App.test.tsx +++ b/src/__tests__/App.test.tsx @@ -8,6 +8,7 @@ import { PlayQueue } from '../redux/playQueueSlice'; import { Player } from '../redux/playerSlice'; import { General } from '../redux/miscSlice'; import App from '../App'; +import { FolderSelection } from '../redux/folderSlice'; const middlewares: Middleware, any, Dispatch>[] | undefined = []; const mockStore = configureMockStore(middlewares); @@ -83,10 +84,15 @@ const miscState: General = { titleBar: 'windows', }; +const folderState: FolderSelection = { + id: undefined, +}; + const mockInitialState = { playQueue: playQueueState, player: playerState, misc: miscState, + folder: folderState, }; describe('App', () => { diff --git a/src/components/library/FolderList.tsx b/src/components/library/FolderList.tsx index c8d5a1c..829c56a 100644 --- a/src/components/library/FolderList.tsx +++ b/src/components/library/FolderList.tsx @@ -5,7 +5,7 @@ import { ButtonToolbar, Icon } from 'rsuite'; import { getIndexes, getMusicDirectory } from '../../api/api'; import PageLoader from '../loader/PageLoader'; import ListViewType from '../viewtypes/ListViewType'; -import { useAppDispatch } from '../../redux/hooks'; +import { useAppDispatch, useAppSelector } from '../../redux/hooks'; import { clearSelected, setRangeSelected, @@ -18,19 +18,20 @@ import { StyledButton, StyledInputPicker } from '../shared/styled'; import { fixPlayer2Index, setPlayQueueByRowClick } from '../../redux/playQueueSlice'; import { setStatus } from '../../redux/playerSlice'; import useSearchQuery from '../../hooks/useSearchQuery'; +import { setFolder } from '../../redux/folderSlice'; const FolderList = () => { const dispatch = useAppDispatch(); - const [folderId, setFolderId] = useState(''); + const folder = useAppSelector((state) => state.folder); const { isLoading, isError, data, error }: any = useQuery(['folders'], () => getIndexes(), { refetchOnReconnect: false, refetchOnWindowFocus: false, }); const { data: folderData }: any = useQuery( - ['folder', folderId], - () => getMusicDirectory({ id: folderId }), + ['folder', folder.id], + () => getMusicDirectory({ id: folder.id }), { - enabled: folderId !== '', + enabled: folder.id !== '', refetchOnReconnect: false, refetchOnWindowFocus: false, } @@ -67,7 +68,7 @@ const FolderList = () => { dispatch(clearSelected()); if (rowData.isDir) { - setFolderId(rowData.id); + dispatch(setFolder({ id: rowData.id })); } else { dispatch( setPlayQueueByRowClick({ @@ -106,7 +107,9 @@ const FolderList = () => { labelKey="name" valueKey="id" virtualized - onChange={(e: string) => setFolderId(e)} + onChange={(e: string) => { + dispatch(setFolder({ id: e })); + }} /> { disabled={!folderData?.parent} onClick={() => { if (folderData?.parent) { - setFolderId(folderData?.parent); + dispatch(setFolder({ id: folderData?.parent })); } }} > diff --git a/src/redux/folderSlice.ts b/src/redux/folderSlice.ts new file mode 100644 index 0000000..574df18 --- /dev/null +++ b/src/redux/folderSlice.ts @@ -0,0 +1,22 @@ +import { createSlice, PayloadAction } from '@reduxjs/toolkit'; + +export interface FolderSelection { + id?: string; +} + +const initialState: FolderSelection = { + id: undefined, +}; + +const folderSlice = createSlice({ + name: 'folder', + initialState, + reducers: { + setFolder: (state, action: PayloadAction) => { + state.id = action.payload.id; + }, + }, +}); + +export const { setFolder } = folderSlice.actions; +export default folderSlice.reducer; diff --git a/src/redux/store.ts b/src/redux/store.ts index 3f83c90..9f999e6 100644 --- a/src/redux/store.ts +++ b/src/redux/store.ts @@ -5,6 +5,7 @@ import playQueueReducer, { PlayQueue } from './playQueueSlice'; import multiSelectReducer from './multiSelectSlice'; import miscReducer from './miscSlice'; import playlistReducer from './playlistSlice'; +import folderReducer from './folderSlice'; export const store = configureStore({ reducer: { @@ -13,6 +14,7 @@ export const store = configureStore({ multiSelect: multiSelectReducer, misc: miscReducer, playlist: playlistReducer, + folder: folderReducer, }, middleware: [forwardToMain], });