From 6c644330e7811e497daccd22d68413ef18775152 Mon Sep 17 00:00:00 2001
From: Aziz Rmadi <46684200+armadi1809@users.noreply.github.com>
Date: Mon, 22 Jan 2024 22:31:23 -0600
Subject: [PATCH] Fixed page size stale state on LogTable component (#3516)

---
 web/components/admin/LogTable.tsx | 19 ++++++++++++++-----
 web/components/admin/Offline.tsx  |  2 +-
 web/pages/admin/index.tsx         |  2 +-
 web/pages/admin/logs.tsx          |  2 +-
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/web/components/admin/LogTable.tsx b/web/components/admin/LogTable.tsx
index 5f89d3967..aad62658b 100644
--- a/web/components/admin/LogTable.tsx
+++ b/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>
   );
diff --git a/web/components/admin/Offline.tsx b/web/components/admin/Offline.tsx
index 905259fce..515a872b9 100644
--- a/web/components/admin/Offline.tsx
+++ b/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} />
     </>
   );
 };
diff --git a/web/pages/admin/index.tsx b/web/pages/admin/index.tsx
index 5f9adf14d..ddb36989e 100644
--- a/web/pages/admin/index.tsx
+++ b/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>
   );
 }
diff --git a/web/pages/admin/logs.tsx b/web/pages/admin/logs.tsx
index bacb8531f..f02d71e33 100644
--- a/web/pages/admin/logs.tsx
+++ b/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) {