Merge pull request #427 from QuentinHsu/fix-log-pagination

fix log pagination

web/package.json

@@ -50,7 +50,7 @@
     ]
   },
   "devDependencies": {
-    "@so1ve/prettier-config": "^2.0.0",
+    "@so1ve/prettier-config": "^3.1.0",
     "@vitejs/plugin-react": "^4.2.1",
     "prettier": "^3.0.0",
     "typescript": "4.4.2",

web/pnpm-lock.yaml

@@ -13,10 +13,10 @@ importers:
         version: 2.53.2(react@18.2.0)
       '@douyinfe/semi-ui':
         specifier: ^2.55.3
-        version: 2.55.3(react-dom@18.2.0)(react@18.2.0)
+        version: 2.55.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@visactor/react-vchart':
         specifier: ~1.8.8
-        version: 1.8.11(react-dom@18.2.0)(react@18.2.0)
+        version: 1.8.11(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@visactor/vchart':
         specifier: ~1.8.8
         version: 1.8.11
@@ -49,26 +49,26 @@ importers:
         version: 1.0.4
       react-router-dom:
         specifier: ^6.3.0
-        version: 6.22.2(react-dom@18.2.0)(react@18.2.0)
+        version: 6.22.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react-telegram-login:
         specifier: ^1.1.2
         version: 1.1.2(react@18.2.0)
       react-toastify:
         specifier: ^9.0.8
-        version: 9.1.3(react-dom@18.2.0)(react@18.2.0)
+        version: 9.1.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react-turnstile:
         specifier: ^1.0.5
-        version: 1.1.3(react-dom@18.2.0)(react@18.2.0)
+        version: 1.1.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       semantic-ui-offline:
         specifier: ^2.5.0
         version: 2.5.0
       semantic-ui-react:
         specifier: ^2.1.3
-        version: 2.1.5(react-dom@18.2.0)(react@18.2.0)
+        version: 2.1.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
     devDependencies:
       '@so1ve/prettier-config':
-        specifier: ^2.0.0
+        specifier: ^3.1.0
-        version: 2.0.0(prettier@3.2.5)
+        version: 3.1.0(prettier@3.2.5)
       '@vitejs/plugin-react':
         specifier: ^4.2.1
         version: 4.2.1(vite@5.2.5)
@@ -88,8 +88,8 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
-  '@astrojs/compiler@1.8.2':
+  '@astrojs/compiler@2.10.2':
-    resolution: {integrity: sha512-o/ObKgtMzl8SlpIdzaxFnt7SATKPxu4oIP/1NL+HDJRzxfJcAkOTAb/ZKMRyULbz4q+1t2/DAebs2Z1QairkZw==}
+    resolution: {integrity: sha512-bvH+v8AirwpRWCkYJEyWYdc5Cs/BjG2ZTxIJzttHilXgfKJAdW2496KsUQKzf5j2tOHtaHXKKn9hb9WZiBGpEg==}
 
   '@babel/code-frame@7.23.5':
     resolution: {integrity: sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==}
@@ -578,13 +578,13 @@ packages:
       react: ^16.0.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
 
-  '@so1ve/prettier-config@2.0.0':
+  '@so1ve/prettier-config@3.1.0':
-    resolution: {integrity: sha512-s6qsH5Rf4Bl+J0LU9rKmSWe/rYRdsYw0ELyXhDDDqEaTWtah4NpHKJuVWARuKqj0TWLBeWmyWUoIH/Bkp/DHaw==}
+    resolution: {integrity: sha512-9GJ1yXKBC4DzqCTTaZoBf8zw7WWkVuXcccZt1Aqk4lj6ab/GiNUnjPGajUVYLjaqAEOKqM7jUSUfTjk2JTjCAg==}
     peerDependencies:
       prettier: ^3.0.0
 
-  '@so1ve/prettier-plugin-toml@2.0.0':
+  '@so1ve/prettier-plugin-toml@3.1.0':
-    resolution: {integrity: sha512-GvuFdTqhs3qxbhKTiCXWMXITmNLSdndUp7ql1yJbzzWaGqAdb3UH+R+0ZhtAEctBSx90MWAWW3kkW/Iba02tCg==}
+    resolution: {integrity: sha512-8WZAGjAVNIJlkfWL6wHKxlUuEBY45fdd5qY5bR/Z6r/txgzKXk/r9qi1DTwc17gi/WcNuRrcRugecRT+mWbIYg==}
     peerDependencies:
       prettier: ^3.0.0
 
@@ -1127,12 +1127,12 @@ packages:
     resolution: {integrity: sha512-WxtodH/wWavfw3MR7yK/GrS4pASEQ+iSTkdtSxPJWvqzG55ir5nvbLt9rw5AOiEcqqPCRM92WCtR1rk3TG3JSQ==}
     hasBin: true
 
-  prettier-plugin-astro@0.13.0:
+  prettier-plugin-astro@0.14.1:
-    resolution: {integrity: sha512-5HrJNnPmZqTUNoA97zn4gNQv9BgVhv+et03314WpQ9H9N8m2L9OSV798olwmG2YLXPl1iSstlJCR1zB3x5xG4g==}
+    resolution: {integrity: sha512-RiBETaaP9veVstE4vUwSIcdATj6dKmXljouXc/DDNwBSPTp8FRkLGDSGFClKsAFeeg+13SB0Z1JZvbD76bigJw==}
     engines: {node: ^14.15.0 || >=16.0.0}
 
-  prettier-plugin-curly-and-jsdoc@2.0.0:
+  prettier-plugin-curly-and-jsdoc@3.1.0:
-    resolution: {integrity: sha512-uSjWOWmX8+yrCrfhJSI58ODqtX7lXx07M8JYeOC1hfRv+vCttfiDlZoM27mNChGitJNKI+pCBvMMBYh8JiV0HQ==}
+    resolution: {integrity: sha512-4QMOHnLlkP2jTRWS0MFH6j+cuOiXLvXOqCLKbtwwVd8PPyq8NenW5AAwfwqiTNHBQG/DmzViPphRrwgN0XkUVQ==}
     peerDependencies:
       prettier: ^3.0.0
 
@@ -1442,7 +1442,7 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.24
 
-  '@astrojs/compiler@1.8.2': {}
+  '@astrojs/compiler@2.10.2': {}
 
   '@babel/code-frame@7.23.5':
     dependencies:
@@ -1590,7 +1590,7 @@ snapshots:
       react: 18.2.0
       tslib: 2.6.2
 
-  '@dnd-kit/core@6.1.0(react-dom@18.2.0)(react@18.2.0)':
+  '@dnd-kit/core@6.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@dnd-kit/accessibility': 3.1.0(react@18.2.0)
       '@dnd-kit/utilities': 3.2.2(react@18.2.0)
@@ -1598,9 +1598,9 @@ snapshots:
       react-dom: 18.2.0(react@18.2.0)
       tslib: 2.6.2
 
-  '@dnd-kit/sortable@7.0.2(@dnd-kit/core@6.1.0)(react@18.2.0)':
+  '@dnd-kit/sortable@7.0.2(@dnd-kit/core@6.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@dnd-kit/core': 6.1.0(react-dom@18.2.0)(react@18.2.0)
+      '@dnd-kit/core': 6.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@dnd-kit/utilities': 3.2.2(react@18.2.0)
       react: 18.2.0
       tslib: 2.6.2
@@ -1652,10 +1652,10 @@ snapshots:
     dependencies:
       glob: 7.2.3
 
-  '@douyinfe/semi-ui@2.55.3(react-dom@18.2.0)(react@18.2.0)':
+  '@douyinfe/semi-ui@2.55.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@dnd-kit/core': 6.1.0(react-dom@18.2.0)(react@18.2.0)
+      '@dnd-kit/core': 6.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@dnd-kit/sortable': 7.0.2(@dnd-kit/core@6.1.0)(react@18.2.0)
+      '@dnd-kit/sortable': 7.0.2(@dnd-kit/core@6.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)
       '@dnd-kit/utilities': 3.2.2(react@18.2.0)
       '@douyinfe/semi-animation': 2.55.3
       '@douyinfe/semi-animation-react': 2.55.3
@@ -1673,8 +1673,8 @@ snapshots:
       prop-types: 15.8.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      react-resizable: 3.0.5(react-dom@18.2.0)(react@18.2.0)
+      react-resizable: 3.0.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react-window: 1.8.10(react-dom@18.2.0)(react@18.2.0)
+      react-window: 1.8.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       scroll-into-view-if-needed: 2.2.31
       utility-types: 3.11.0
 
@@ -1747,13 +1747,13 @@ snapshots:
   '@esbuild/win32-x64@0.20.2':
     optional: true
 
-  '@fluentui/react-component-event-listener@0.63.1(react-dom@18.2.0)(react@18.2.0)':
+  '@fluentui/react-component-event-listener@0.63.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.0
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@fluentui/react-component-ref@0.63.1(react-dom@18.2.0)(react@18.2.0)':
+  '@fluentui/react-component-ref@0.63.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.0
       react: 18.2.0
@@ -1871,22 +1871,22 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.13.0':
     optional: true
 
-  '@semantic-ui-react/event-stack@3.1.3(react-dom@18.2.0)(react@18.2.0)':
+  '@semantic-ui-react/event-stack@3.1.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       exenv: 1.2.2
       prop-types: 15.8.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@so1ve/prettier-config@2.0.0(prettier@3.2.5)':
+  '@so1ve/prettier-config@3.1.0(prettier@3.2.5)':
     dependencies:
-      '@so1ve/prettier-plugin-toml': 2.0.0(prettier@3.2.5)
+      '@so1ve/prettier-plugin-toml': 3.1.0(prettier@3.2.5)
       prettier: 3.2.5
-      prettier-plugin-astro: 0.13.0
+      prettier-plugin-astro: 0.14.1
-      prettier-plugin-curly-and-jsdoc: 2.0.0(prettier@3.2.5)
+      prettier-plugin-curly-and-jsdoc: 3.1.0(prettier@3.2.5)
       prettier-plugin-pkgsort: 0.2.1(prettier@3.2.5)
 
-  '@so1ve/prettier-plugin-toml@2.0.0(prettier@3.2.5)':
+  '@so1ve/prettier-plugin-toml@3.1.0(prettier@3.2.5)':
     dependencies:
       prettier: 3.2.5
 
@@ -1951,7 +1951,7 @@ snapshots:
 
   '@types/parse-json@4.0.2': {}
 
-  '@visactor/react-vchart@1.8.11(react-dom@18.2.0)(react@18.2.0)':
+  '@visactor/react-vchart@1.8.11(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@visactor/vchart': 1.8.11
       '@visactor/vgrammar-core': 0.10.11
@@ -2528,13 +2528,13 @@ snapshots:
       sort-object-keys: 1.1.3
       sort-order: 1.1.2
 
-  prettier-plugin-astro@0.13.0:
+  prettier-plugin-astro@0.14.1:
     dependencies:
-      '@astrojs/compiler': 1.8.2
+      '@astrojs/compiler': 2.10.2
       prettier: 3.2.5
       sass-formatter: 0.7.9
 
-  prettier-plugin-curly-and-jsdoc@2.0.0(prettier@3.2.5):
+  prettier-plugin-curly-and-jsdoc@3.1.0(prettier@3.2.5):
     dependencies:
       prettier: 3.2.5
 
@@ -2559,7 +2559,7 @@ snapshots:
       react: 18.2.0
       scheduler: 0.23.0
 
-  react-draggable@4.4.6(react-dom@18.2.0)(react@18.2.0):
+  react-draggable@4.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       clsx: 1.2.1
       prop-types: 15.8.1
@@ -2581,7 +2581,7 @@ snapshots:
 
   react-is@18.2.0: {}
 
-  react-popper@2.3.0(@popperjs/core@2.11.8)(react-dom@18.2.0)(react@18.2.0):
+  react-popper@2.3.0(@popperjs/core@2.11.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       '@popperjs/core': 2.11.8
       react: 18.2.0
@@ -2591,15 +2591,15 @@ snapshots:
 
   react-refresh@0.14.0: {}
 
-  react-resizable@3.0.5(react-dom@18.2.0)(react@18.2.0):
+  react-resizable@3.0.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       prop-types: 15.8.1
       react: 18.2.0
-      react-draggable: 4.4.6(react-dom@18.2.0)(react@18.2.0)
+      react-draggable: 4.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
     transitivePeerDependencies:
       - react-dom
 
-  react-router-dom@6.22.2(react-dom@18.2.0)(react@18.2.0):
+  react-router-dom@6.22.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       '@remix-run/router': 1.15.2
       react: 18.2.0
@@ -2615,18 +2615,18 @@ snapshots:
     dependencies:
       react: 18.2.0
 
-  react-toastify@9.1.3(react-dom@18.2.0)(react@18.2.0):
+  react-toastify@9.1.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       clsx: 1.2.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  react-turnstile@1.1.3(react-dom@18.2.0)(react@18.2.0):
+  react-turnstile@1.1.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  react-window@1.8.10(react-dom@18.2.0)(react@18.2.0):
+  react-window@1.8.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       '@babel/runtime': 7.24.0
       memoize-one: 5.2.1
@@ -2708,13 +2708,13 @@ snapshots:
       fs-extra: 4.0.3
       jquery: 3.7.1
 
-  semantic-ui-react@2.1.5(react-dom@18.2.0)(react@18.2.0):
+  semantic-ui-react@2.1.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       '@babel/runtime': 7.24.0
-      '@fluentui/react-component-event-listener': 0.63.1(react-dom@18.2.0)(react@18.2.0)
+      '@fluentui/react-component-event-listener': 0.63.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@fluentui/react-component-ref': 0.63.1(react-dom@18.2.0)(react@18.2.0)
+      '@fluentui/react-component-ref': 0.63.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@popperjs/core': 2.11.8
-      '@semantic-ui-react/event-stack': 3.1.3(react-dom@18.2.0)(react@18.2.0)
+      '@semantic-ui-react/event-stack': 3.1.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       clsx: 1.2.1
       keyboard-key: 1.1.0
       lodash: 4.17.21
@@ -2723,7 +2723,7 @@ snapshots:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       react-is: 18.2.0
-      react-popper: 2.3.0(@popperjs/core@2.11.8)(react-dom@18.2.0)(react@18.2.0)
+      react-popper: 2.3.0(@popperjs/core@2.11.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       shallowequal: 1.1.0
 
   semver@6.3.1: {}

web/src/components/LogsTable.js

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import {
   API,
-  copy, getTodayStartTimestamp,
+  copy,
+  getTodayStartTimestamp,
   isAdmin,
   showError,
   showSuccess,
-  timestamp2string
+  timestamp2string,
 } from '../helpers';
 
 import {
@@ -29,7 +30,7 @@ import {
   stringToColor,
 } from '../helpers/render';
 import Paragraph from '@douyinfe/semi-ui/lib/es/typography/paragraph';
-import {getLogOther} from "../helpers/other.js";
+import { getLogOther } from '../helpers/other.js';
 
 const { Header } = Layout;
 
@@ -144,7 +145,7 @@ function renderUseTime(type) {
 
 function renderFirstUseTime(type) {
   let time = parseFloat(type) / 1000.0;
-  time = time.toFixed(1)
+  time = time.toFixed(1);
   if (time < 3) {
     return (
       <Tag color='green' size='large'>
@@ -344,7 +345,7 @@ const LogsTable = () => {
         if (record.other !== '') {
           let other = JSON.parse(record.other);
           if (other === null) {
-            return <></>
+            return <></>;
           }
           if (other.admin_info !== undefined) {
             if (
@@ -414,8 +415,6 @@ const LogsTable = () => {
   const [activePage, setActivePage] = useState(1);
   const [logCount, setLogCount] = useState(ITEMS_PER_PAGE);
   const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
-  const [searchKeyword, setSearchKeyword] = useState('');
-  const [searching, setSearching] = useState(false);
   const [logType, setLogType] = useState(0);
   const isAdminUser = isAdmin();
   let now = new Date();
@@ -451,9 +450,7 @@ const LogsTable = () => {
     let localEndTimestamp = Date.parse(end_timestamp) / 1000;
     let url = `/api/log/self/stat?type=${logType}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
     url = encodeURI(url);
-    let res = await API.get(
+    let res = await API.get(url);
-      url,
-    );
     const { success, message, data } = res.data;
     if (success) {
       setStat(data);
@@ -467,9 +464,7 @@ const LogsTable = () => {
     let localEndTimestamp = Date.parse(end_timestamp) / 1000;
     let url = `/api/log/stat?type=${logType}&username=${username}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&channel=${channel}`;
     url = encodeURI(url);
-    let res = await API.get(
+    let res = await API.get(url);
-      url,
-    );
     const { success, message, data } = res.data;
     if (success) {
       setStat(data);
@@ -521,10 +516,7 @@ const LogsTable = () => {
       logs[i].timestamp2string = timestamp2string(logs[i].created_at);
       logs[i].key = '' + logs[i].id;
     }
-    // data.key = '' + data.id
     setLogs(logs);
-    setLogCount(logs.length + ITEMS_PER_PAGE);
-    // console.log(logCount);
   };
 
   const loadLogs = async (startIdx, pageSize, logType = 0) => {
@@ -542,37 +534,28 @@ const LogsTable = () => {
     const res = await API.get(url);
     const { success, message, data } = res.data;
     if (success) {
-      if (startIdx === 0) {
+      const newPageData = data.items;
-        setLogsFormat(data);
+      setActivePage(data.page);
-      } else {
+      setPageSize(data.page_size);
-        let newLogs = [...logs];
+      setLogCount(data.total);
-        newLogs.splice(startIdx * pageSize, data.length, ...data);
+
-        setLogsFormat(newLogs);
+      setLogsFormat(newPageData);
-      }
     } else {
       showError(message);
     }
     setLoading(false);
   };
 
-  const pageData = logs.slice(
-    (activePage - 1) * pageSize,
-    activePage * pageSize,
-  );
-
   const handlePageChange = (page) => {
     setActivePage(page);
-    if (page === Math.ceil(logs.length / pageSize) + 1) {
+    loadLogs(page, pageSize, logType).then((r) => {});
-      // In this case we have to load more data and then append them.
-      loadLogs(page - 1, pageSize, logType).then((r) => {});
-    }
   };
 
   const handlePageSizeChange = async (size) => {
     localStorage.setItem('page-size', size + '');
     setPageSize(size);
     setActivePage(1);
-    loadLogs(0, size)
+    loadLogs(activePage, size)
       .then()
       .catch((reason) => {
         showError(reason);
@@ -580,27 +563,24 @@ const LogsTable = () => {
   };
 
   const refresh = async () => {
-    // setLoading(true);
     setActivePage(1);
     handleEyeClick();
-    await loadLogs(0, pageSize, logType);
+    await loadLogs(activePage, pageSize, logType);
   };
 
   const copyText = async (text) => {
     if (await copy(text)) {
       showSuccess('已复制：' + text);
     } else {
-      // setSearchKeyword(text);
       Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text });
     }
   };
 
   useEffect(() => {
-    // console.log('default effect')
     const localPageSize =
       parseInt(localStorage.getItem('page-size')) || ITEMS_PER_PAGE;
     setPageSize(localPageSize);
-    loadLogs(0, localPageSize)
+    loadLogs(activePage, localPageSize)
       .then()
       .catch((reason) => {
         showError(reason);
@@ -608,25 +588,6 @@ const LogsTable = () => {
     handleEyeClick();
   }, []);
 
-  const searchLogs = async () => {
-    if (searchKeyword === '') {
-      // if keyword is blank, load files instead.
-      await loadLogs(0, pageSize);
-      setActivePage(1);
-      return;
-    }
-    setSearching(true);
-    const res = await API.get(`/api/log/self/search?keyword=${searchKeyword}`);
-    const { success, message, data } = res.data;
-    if (success) {
-      setLogs(data);
-      setActivePage(1);
-    } else {
-      showError(message);
-    }
-    setSearching(false);
-  };
-
   return (
     <>
       <Layout>
@@ -719,15 +680,13 @@ const LogsTable = () => {
             >
               查询
             </Button>
-            <Form.Section>
+            <Form.Section></Form.Section>
-
-            </Form.Section>
           </>
         </Form>
         <Table
           style={{ marginTop: 5 }}
           columns={columns}
-          dataSource={pageData}
+          dataSource={logs}
           pagination={{
             currentPage: activePage,
             pageSize: pageSize,
@@ -735,7 +694,7 @@ const LogsTable = () => {
             pageSizeOpts: [10, 20, 50, 100],
             showSizeChanger: true,
             onPageSizeChange: (size) => {
-              handlePageSizeChange(size).then();
+              handlePageSizeChange(size);
             },
             onPageChange: handlePageChange,
           }}