fix: reset page after filters changed

src/pages/usage/tables/apikeys-table.tsx

@@ -5,7 +5,7 @@ import PageBox from '@/pages/_components/page-box';
 import { useIntl } from '@umijs/max';
 import { ConfigProvider, Table } from 'antd';
 import _ from 'lodash';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { FilterOptionType } from '../config/types';
 import useAPIKeys from '../hooks/use-apikeys-columns';
 import useQueryBreakdownList from '../services/use-query-breakdown-list';
@@ -15,8 +15,9 @@ const APIKeys: React.FC<{
   apiKeys: FilterOptionType[];
   dateRange: { start_date: string; end_date: string };
   scope: string;
+  pageResetKey?: number;
   refreshKey?: number;
-}> = ({ apiKeys, dateRange, scope, refreshKey = 0 }) => {
+}> = ({ apiKeys, dateRange, scope, pageResetKey = 0, refreshKey = 0 }) => {
   const intl = useIntl();
 
   const { loading, dataSource, fetchData } = useQueryBreakdownList({
@@ -31,6 +32,7 @@ const APIKeys: React.FC<{
     perPage: 10,
     sort_by: ''
   });
+  const pendingPageResetRef = useRef(false);
 
   const handleTableChange = (pagination: any, filters: any, sorter: any) => {
     let sort_by =
@@ -50,6 +52,16 @@ const APIKeys: React.FC<{
   };
   const columns = useAPIKeys();
 
+  useEffect(() => {
+    if (queryParams.page !== 1) {
+      pendingPageResetRef.current = true;
+      setQueryParams((prev) => ({
+        ...prev,
+        page: 1
+      }));
+    }
+  }, [pageResetKey]);
+
   const renderEmpty = (type?: string) => {
     if (type !== 'Table') return;
     return (
@@ -69,6 +81,11 @@ const APIKeys: React.FC<{
   };
 
   useEffect(() => {
+    if (pendingPageResetRef.current && queryParams.page !== 1) {
+      return;
+    }
+    pendingPageResetRef.current = false;
+
     fetchData({
       ...queryParams,
       group_by: ['api_key'],

src/pages/usage/tables/models-table.tsx

@@ -5,7 +5,7 @@ import PageBox from '@/pages/_components/page-box';
 import { useIntl } from '@umijs/max';
 import { ConfigProvider, Table } from 'antd';
 import _ from 'lodash';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { FilterOptionType } from '../config/types';
 import useUsersColumns from '../hooks/use-models-columns';
 import useQueryBreakdownList from '../services/use-query-breakdown-list';
@@ -15,8 +15,9 @@ const Models: React.FC<{
   models: FilterOptionType[];
   dateRange: { start_date: string; end_date: string };
   scope: string;
+  pageResetKey?: number;
   refreshKey?: number;
-}> = ({ models, dateRange, scope, refreshKey = 0 }) => {
+}> = ({ models, dateRange, scope, pageResetKey = 0, refreshKey = 0 }) => {
   const intl = useIntl();
 
   const { loading, dataSource, fetchData } = useQueryBreakdownList({
@@ -31,6 +32,7 @@ const Models: React.FC<{
     perPage: 10,
     sort_by: ''
   });
+  const pendingPageResetRef = useRef(false);
 
   const handleTableChange = (pagination: any, filters: any, sorter: any) => {
     console.log('pagination, filters, sorter: ', pagination, filters, sorter);
@@ -52,6 +54,16 @@ const Models: React.FC<{
 
   const columns = useUsersColumns();
 
+  useEffect(() => {
+    if (queryParams.page !== 1) {
+      pendingPageResetRef.current = true;
+      setQueryParams((prev) => ({
+        ...prev,
+        page: 1
+      }));
+    }
+  }, [pageResetKey]);
+
   const renderEmpty = (type?: string) => {
     if (type !== 'Table') return;
     return (
@@ -71,6 +83,11 @@ const Models: React.FC<{
   };
 
   useEffect(() => {
+    if (pendingPageResetRef.current && queryParams.page !== 1) {
+      return;
+    }
+    pendingPageResetRef.current = false;
+
     fetchData({
       ...queryParams,
       group_by: ['model'],

src/pages/usage/tables/users-table.tsx

@@ -5,7 +5,7 @@ import PageBox from '@/pages/_components/page-box';
 import { useIntl } from '@umijs/max';
 import { ConfigProvider, Table } from 'antd';
 import _ from 'lodash';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { FilterOptionType } from '../config/types';
 import useUsersColumns from '../hooks/use-users-columns';
 import useQueryBreakdownList from '../services/use-query-breakdown-list';
@@ -15,8 +15,9 @@ const Users: React.FC<{
   users: FilterOptionType[];
   dateRange: { start_date: string; end_date: string };
   scope: string;
+  pageResetKey?: number;
   refreshKey?: number;
-}> = ({ users, dateRange, scope, refreshKey = 0 }) => {
+}> = ({ users, dateRange, scope, pageResetKey = 0, refreshKey = 0 }) => {
   const intl = useIntl();
 
   const { loading, dataSource, fetchData } = useQueryBreakdownList({
@@ -31,6 +32,7 @@ const Users: React.FC<{
     perPage: 10,
     sort_by: ''
   });
+  const pendingPageResetRef = useRef(false);
 
   const handleTableChange = (pagination: any, filters: any, sorter: any) => {
     let sort_by =
@@ -70,6 +72,21 @@ const Users: React.FC<{
   };
 
   useEffect(() => {
+    if (queryParams.page !== 1) {
+      pendingPageResetRef.current = true;
+      setQueryParams((prev) => ({
+        ...prev,
+        page: 1
+      }));
+    }
+  }, [pageResetKey]);
+
+  useEffect(() => {
+    if (pendingPageResetRef.current && queryParams.page !== 1) {
+      return;
+    }
+    pendingPageResetRef.current = false;
+
     if (scope === 'all') {
       fetchData({
         ...queryParams,