Move folder selection to redux store

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<Record<string, unknown>, any, Dispatch<AnyAction>>[] | 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', () => {

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 }));
+                      }}
                     />
 
                     <StyledButton
@@ -114,7 +117,7 @@ const FolderList = () => {
                       disabled={!folderData?.parent}
                       onClick={() => {
                         if (folderData?.parent) {
-                          setFolderId(folderData?.parent);
+                          dispatch(setFolder({ id: folderData?.parent }));
                         }
                       }}
                     >

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<FolderSelection>) => {
+      state.id = action.payload.id;
+    },
+  },
+});
+
+export const { setFolder } = folderSlice.actions;
+export default folderSlice.reducer;

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<PlayQueue | any>({
   reducer: {
@@ -13,6 +14,7 @@ export const store = configureStore<PlayQueue | any>({
     multiSelect: multiSelectReducer,
     misc: miscReducer,
     playlist: playlistReducer,
+    folder: folderReducer,
   },
   middleware: [forwardToMain],
 });