Migrate filters to rtk query

src/components/Dialogs/FiltersModal.tsx

@@ -4,20 +4,24 @@ import ModalPanel from '../Panels/ModalPanel';
 import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from '../../core/store';
 import { setStatus } from '../../core/slices/modals/filters';
-import Events from '../../core/events';
+import { useLazyGetTopFiltersQuery } from '../../core/rtkQuery/collectionApi';
+
+import type { CollectionFilterType } from '../../core/types/api/collection';
 
 function FiltersModal() {
   const dispatch = useDispatch();
   const status = useSelector((state: RootState) => state.modals.filters.status);
-  const filters = useSelector((state: RootState) => state.modals.filters.filters);
-
-  const handleClose = () => dispatch(setStatus(false));
+  const [trigger, filtersResult] = useLazyGetTopFiltersQuery({});
+  const filters: Array<CollectionFilterType> = filtersResult?.data?.List ?? [] as Array<CollectionFilterType>;
 
   useEffect(() => {
-    dispatch({ type: Events.FILTERS_GET });
-  }, []);
+    if (!status) { return; }
+    trigger({}).catch(() => {});
+  }, [status]);
+
+  const handleClose = () => dispatch(setStatus(false));
 
-  const renderItem = item => (
+  const renderItem = (item: CollectionFilterType) => (
     <div className="flex justify-between font-semibold">
       <span>{item.Name}</span>
       <span className="text-highlight-2">{item.Size}</span>

src/core/events.ts

@@ -19,8 +19,6 @@ export default {
   FIRSTRUN_TEST_DATABASE: 'EVENT_FIRSTRUN_TEST_DATABASE',
   // DASHBOARD
   DASHBOARD_UPCOMING_ANIME: 'EVENT_DASHBOARD_UPCOMING_ANIME',
-  // FILTERS
-  FILTERS_GET: 'EVENT_FILTERS_GET',
   // FOLDER
   FOLDER_BROWSE: 'EVENT_FOLDER_BROWSE',
   // QUICK ACTIONS

src/core/middlewares/rtkQueryError.ts

@@ -11,7 +11,7 @@ const rtkQueryErrorLogger: Middleware =
       if (action.payload.status === 401) {
         toast.error('Unauthorized!');
       } else {
-        toast.error(action.payload?.data?.title ?? action.payload.error);
+        toast.error(action.payload?.data?.title ?? action.payload.error ?? `${action.payload.status} - ${action.error.message}`);
       }
     }
 

src/core/rtkQuery/collectionApi.ts

@@ -1,7 +1,7 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 import { RootState } from '../store';
 
-import { CollectionGroupType } from '../types/api/collection';
+import { CollectionFilterType, CollectionGroupType } from '../types/api/collection';
 import { ListResultType, PaginationType } from '../types/api';
 import { SeriesType } from '../types/api/series';
 
@@ -22,10 +22,14 @@ export const collectionApi = createApi({
     getGroupSeries: build.query<Array<SeriesType>, { groupId?: string }>({
       query: ({ groupId }) => ({ url: `Group/${groupId}/Series` }),
     }),
+    getTopFilters: build.query<ListResultType<Array<CollectionFilterType>>, PaginationType>({
+      query: params => ({ url: 'Filter', params: { page: params.page ?? 1, pageSize: params.pageSize ?? 0 } }),
+    }),
   }),
 });
 
 export const {
   useLazyGetGroupsQuery,
   useGetGroupSeriesQuery,
+  useLazyGetTopFiltersQuery,
 } = collectionApi;

src/core/sagas/index.ts

@@ -9,7 +9,6 @@ import ApiCommon from '../api/common';
 import Events from '../events';
 
 import SagaAuth from './auth';
-import SagaCollection from './collection';
 import SagaFile from './file';
 import SagaFolder from './folder';
 import SagaImportFolder from './import-folder';
@@ -58,8 +57,6 @@ export default function* rootSaga() {
     takeEvery(Events.FIRSTRUN_START_SERVER, SagaInit.startServer),
     takeEvery(Events.FIRSTRUN_TEST_ANIDB, SagaInit.testAniDB),
     takeEvery(Events.FIRSTRUN_TEST_DATABASE, SagaInit.testDatabase),
-    // FILTERS
-    takeEvery(Events.FILTERS_GET, SagaCollection.getFilters),
     // FOLDER
     takeEvery(Events.FOLDER_BROWSE, SagaFolder.folderBrowse),
     // QUICK ACTIONS

src/core/types/api.ts

@@ -39,7 +39,7 @@ export type QueueStatusType = {
 };
 
 export type PaginationType = {
-  pageSize: number;
+  pageSize?: number;
   page?: number;
 };
 

src/core/types/api/collection.ts

@@ -29,4 +29,17 @@ export type GroupSizesSeriesTypesType = {
   Web: number;
   Movie: number;
   OVA: number;
+};
+
+export type CollectionFilterType = {
+  IDs: {
+    ParentFilter: number | null;
+    ID: number;
+  },
+  Locked: boolean;
+  ApplyAtSeriesLevel: boolean;
+  Directory: boolean;
+  Hidden: boolean;
+  Name: string;
+  Size: number;
 };