Use react-query for Blocklist UI

frontend/src/Activity/Queue/Queue.tsx

@@ -54,17 +54,13 @@ import useQueue, {
   useRemoveQueueItems,
 } from './useQueue';
 
-const DEFAULT_DATA = {
-  records: [],
-  totalPages: 0,
-  totalRecords: 0,
-};
-
 function Queue() {
   const dispatch = useDispatch();
 
   const {
-    data,
+    records,
+    totalPages,
+    totalRecords,
     error,
     isFetching,
     isFetched,
@@ -74,8 +70,6 @@ function Queue() {
     refetch,
   } = useQueue();
 
-  const { records, totalPages = 0, totalRecords } = data ?? DEFAULT_DATA;
-
   const { columns, pageSize, sortKey, sortDirection, selectedFilterKey } =
     useQueueOptions();
 

frontend/src/Activity/Queue/QueueFilterModal.tsx

@@ -6,8 +6,7 @@ import useQueue, { FILTER_BUILDER } from './useQueue';
 type QueueFilterModalProps = FilterModalProps<History>;
 
 export default function QueueFilterModal(props: QueueFilterModalProps) {
-  const { data } = useQueue();
-  const customFilterType = 'queue';
+  const { records } = useQueue();
 
   const dispatchSetFilter = useCallback(
     ({ selectedFilterKey }: { selectedFilterKey: string | number }) => {
@@ -19,9 +18,9 @@ export default function QueueFilterModal(props: QueueFilterModalProps) {
   return (
     <FilterModal
       {...props}
-      sectionItems={data?.records ?? []}
+      sectionItems={records}
       filterBuilderProps={FILTER_BUILDER}
-      customFilterType={customFilterType}
+      customFilterType="queue"
       dispatchSetFilter={dispatchSetFilter}
     />
   );

frontend/src/Activity/Queue/queueOptionsStore.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import Icon from 'Components/Icon';
-import Column from 'Components/Table/Column';
-import { createOptionsStore } from 'Helpers/Hooks/useOptionsStore';
+import {
+  createOptionsStore,
+  PageableOptions,
+} from 'Helpers/Hooks/useOptionsStore';
 import { icons } from 'Helpers/Props';
-import { SortDirection } from 'Helpers/Props/sortDirections';
 import translate from 'Utilities/String/translate';
 
 interface QueueRemovalOptions {
@@ -11,13 +12,8 @@ interface QueueRemovalOptions {
   blocklistMethod: 'blocklistAndSearch' | 'blocklistOnly' | 'doNotBlocklist';
 }
 
-export interface QueueOptions {
+export interface QueueOptions extends PageableOptions {
   includeUnknownSeriesItems: boolean;
-  pageSize: number;
-  selectedFilterKey: string | number;
-  sortKey: string;
-  sortDirection: SortDirection;
-  columns: Column[];
   removalOptions: QueueRemovalOptions;
 }
 

frontend/src/Activity/Queue/useQueue.ts

@@ -1,5 +1,5 @@
 import { keepPreviousData, useQueryClient } from '@tanstack/react-query';
-import { useCallback, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { CustomFilter, Filter, FilterBuilderProp } from 'App/State/AppState';
 import useApiMutation from 'Helpers/Hooks/useApiMutation';
@@ -90,16 +90,9 @@ const useQueue = () => {
     },
   });
 
-  const handleGoToPage = useCallback(
-    (page: number) => {
-      goToPage(page);
-    },
-    [goToPage]
-  );
-
   return {
     ...query,
-    goToPage: handleGoToPage,
+    goToPage,
     page,
     refetch,
   };