From d0ca56c54c806779ee55b287b53e6ff57bd4d206 Mon Sep 17 00:00:00 2001
From: Larvan2 <78135608+Larvan2@users.noreply.github.com>
Date: Sun, 23 Jun 2024 21:26:53 +0800
Subject: [PATCH] feat: store sort state

---
 src/components/ConnectionTable.tsx | 22 ++++++++++++++--------
 src/custom.d.ts                    |  1 +
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/ConnectionTable.tsx b/src/components/ConnectionTable.tsx
index d5c50a7c9..c66700308 100644
--- a/src/components/ConnectionTable.tsx
+++ b/src/components/ConnectionTable.tsx
@@ -23,13 +23,15 @@ const sortById = { id: 'id', desc: true };
 function Table({ data, columns, hiddenColumns, apiConfig }) {
   const [operationId, setOperationId] = useState('');
   const [showModalDisconnect, setShowModalDisconnect] = useState(false);
+
+  // 从本地存储加载排序状态
+  const savedSortBy = JSON.parse(localStorage.getItem('tableSortBy')) || [sortById];
+
   const tableState = {
-    sortBy: [
-      // maintain a more stable order
-      sortById,
-    ],
+    sortBy: savedSortBy,
     hiddenColumns,
   };
+
   const table = useTable(
     {
       columns,
@@ -41,10 +43,12 @@ function Table({ data, columns, hiddenColumns, apiConfig }) {
   );
 
   const { getTableProps, setHiddenColumns, headerGroups, rows, prepareRow } = table;
+  const state = table.state;
 
   useEffect(() => {
     setHiddenColumns(hiddenColumns);
   }, [setHiddenColumns, hiddenColumns]);
+
   const { t, i18n } = useTranslation();
 
   let locale: Locale;
@@ -67,10 +71,7 @@ function Table({ data, columns, hiddenColumns, apiConfig }) {
     setShowModalDisconnect(true);
   };
 
-  const renderCell = (
-    cell: { column: { id: string }; row: { original: { id: string } }; value: number },
-    locale: Locale
-  ) => {
+  const renderCell = (cell, locale) => {
     switch (cell.column.id) {
       case 'ctrl':
         return (
@@ -92,6 +93,11 @@ function Table({ data, columns, hiddenColumns, apiConfig }) {
     }
   };
 
+  // 当排序状态改变时，将新状态保存到本地存储
+  useEffect(() => {
+    localStorage.setItem('tableSortBy', JSON.stringify(state.sortBy));
+  }, [state.sortBy]);
+
   return (
     <div style={{ marginTop: '5px' }}>
       <table {...getTableProps()} className={cx(s.table, 'connections-table')}>
diff --git a/src/custom.d.ts b/src/custom.d.ts
index 6eb527a5c..518de3098 100644
--- a/src/custom.d.ts
+++ b/src/custom.d.ts
@@ -60,6 +60,7 @@ declare module 'react-table' {
     options: TableOptions,
     useSortBy: useSortBy
   ): {
+    state: any;
     headerGroups: HeaderGroup[];
     getTableProps(): { role?: string };
     setHiddenColumns: (columns: string[]) => void;