Use react-query for Blocklist UI

frontend/src/System/Events/LogsTable.tsx

@@ -28,10 +28,17 @@ import useEvents, { useFilters } from './useEvents';
 
 function LogsTable() {
   const dispatch = useDispatch();
-  const { data, error, isFetching, isFetched, isLoading, page, goToPage } =
-    useEvents();
-
-  const { records = [], totalPages = 0, totalRecords } = data ?? {};
+  const {
+    records,
+    totalPages,
+    totalRecords,
+    error,
+    isFetching,
+    isFetched,
+    isLoading,
+    page,
+    goToPage,
+  } = useEvents();
 
   const { columns, pageSize, sortKey, sortDirection, selectedFilterKey } =
     useEventOptions();

frontend/src/System/Events/eventOptionsStore.tsx

@@ -1,15 +1,10 @@
-import Column from 'Components/Table/Column';
-import { createOptionsStore } from 'Helpers/Hooks/useOptionsStore';
-import { SortDirection } from 'Helpers/Props/sortDirections';
+import {
+  createOptionsStore,
+  PageableOptions,
+} from 'Helpers/Hooks/useOptionsStore';
 import translate from 'Utilities/String/translate';
 
-export interface EventOptions {
-  pageSize: number;
-  selectedFilterKey: string | number;
-  sortKey: string;
-  sortDirection: SortDirection;
-  columns: Column[];
-}
+export type EventOptions = PageableOptions;
 
 const { useOptions, setOptions, setOption } = createOptionsStore<EventOptions>(
   'event_options',

frontend/src/System/Events/useEvents.ts

@@ -1,5 +1,5 @@
 import { keepPreviousData } from '@tanstack/react-query';
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';
 import { Filter } from 'App/State/AppState';
 import usePage from 'Helpers/Hooks/usePage';
 import usePagedApiQuery from 'Helpers/Hooks/usePagedApiQuery';
@@ -69,17 +69,9 @@ const useEvents = () => {
     },
   });
 
-  const handleGoToPage = useCallback(
-    (page: number) => {
-      goToPage(page);
-      refetch();
-    },
-    [goToPage, refetch]
-  );
-
   return {
     ...query,
-    goToPage: handleGoToPage,
+    goToPage,
     page,
     refetch,
   };