Fixed page size stale state on LogTable component (#3516)

web/components/admin/LogTable.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 import { Table, Tag, Typography } from 'antd';
 import Linkify from 'react-linkify';
-import { SortOrder } from 'antd/lib/table/interface';
+import { SortOrder, TablePaginationConfig } from 'antd/lib/table/interface';
 import format from 'date-fns/format';
 
 const { Title } = Typography;
@@ -24,13 +24,19 @@ function renderMessage(text) {
 
 export type LogTableProps = {
   logs: object[];
-  pageSize: number;
+  initialPageSize: number;
 };
 
-export const LogTable: FC<LogTableProps> = ({ logs, pageSize }) => {
+export const LogTable: FC<LogTableProps> = ({ logs, initialPageSize }) => {
   if (!logs?.length) {
     return null;
   }
+
+  const [pageSize, setPageSize] = useState(initialPageSize);
+  const handleTableChange = (pagination: TablePaginationConfig) => {
+    setPageSize(pagination.pageSize);
+  };
+
   const columns = [
     {
       title: 'Level',
@@ -81,7 +87,10 @@ export const LogTable: FC<LogTableProps> = ({ logs, pageSize }) => {
         dataSource={logs}
         columns={columns}
         rowKey={row => row.time}
-        pagination={{ pageSize: pageSize || 20 }}
+        pagination={{
+          pageSize,
+        }}
+        onChange={handleTableChange}
       />
     </div>
   );

web/components/admin/Offline.tsx

@@ -170,7 +170,7 @@ export const Offline: FC<OfflineProps> = ({ logs = [], config }) => {
           <NewsFeed />
         </Col>
       </Row>
-      <LogTable logs={logs} pageSize={5} />
+      <LogTable logs={logs} initialPageSize={5} />
     </>
   );
 };

web/pages/admin/index.tsx

@@ -187,7 +187,7 @@ export default function Home() {
         </Row>
       </div>
       <br />
-      <LogTable logs={logsData} pageSize={5} />
+      <LogTable logs={logsData} initialPageSize={5} />
     </div>
   );
 }

web/pages/admin/logs.tsx

@@ -32,7 +32,7 @@ export default function Logs() {
     };
   }, []);
 
-  return <LogTable logs={logs} pageSize={20} />;
+  return <LogTable logs={logs} initialPageSize={20} />;
 }
 
 Logs.getLayout = function getLayout(page: ReactElement) {