From 290dcf75872e10cdc67bf890b3589baa6e116347 Mon Sep 17 00:00:00 2001
From: QuentinHsu <xuquentinyang@gmail.com>
Date: Mon, 1 Apr 2024 13:51:07 +0800
Subject: [PATCH] perf(Setting): add useEffect and useNavigate hooks to Setting
 component

---
 web/src/pages/Setting/index.js | 35 ++++++++++++++++++++++++----------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/web/src/pages/Setting/index.js b/web/src/pages/Setting/index.js
index 00683e1..71e3cf8 100644
--- a/web/src/pages/Setting/index.js
+++ b/web/src/pages/Setting/index.js
@@ -1,18 +1,21 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import { Layout, TabPane, Tabs } from '@douyinfe/semi-ui';
+import { useNavigate, useLocation } from 'react-router-dom';
+
 import SystemSetting from '../../components/SystemSetting';
 import { isRoot } from '../../helpers';
 import OtherSetting from '../../components/OtherSetting';
 import PersonalSetting from '../../components/PersonalSetting';
 import OperationSetting from '../../components/OperationSetting';
-import { Layout, TabPane, Tabs } from '@douyinfe/semi-ui';
-
 const Setting = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
   const [tabActiveKey, setTabActiveKey] = useState('1');
   let panes = [
     {
       tab: '个人设置',
       content: <PersonalSetting />,
-      itemKey: '1',
+      itemKey: 'personal',
     },
   ];
 
@@ -20,28 +23,40 @@ const Setting = () => {
     panes.push({
       tab: '运营设置',
       content: <OperationSetting />,
-      itemKey: '2',
+      itemKey: 'operation',
     });
     panes.push({
       tab: '系统设置',
       content: <SystemSetting />,
-      itemKey: '3',
+      itemKey: 'system',
     });
     panes.push({
       tab: '其他设置',
       content: <OtherSetting />,
-      itemKey: '4',
+      itemKey: 'other',
     });
   }
-
+  const onChangeTab = (key) => {
+    setTabActiveKey(key);
+    navigate(`?tab=${key}`);
+  };
+  useEffect(() => {
+    const searchParams = new URLSearchParams(window.location.search);
+    const tab = searchParams.get('tab');
+    if (tab) {
+      setTabActiveKey(tab);
+    } else {
+      onChangeTab('personal');
+    }
+  }, [location.search]);
   return (
     <div>
       <Layout>
         <Layout.Content>
           <Tabs
             type='line'
-            defaultActiveKey='1'
-            onChange={(key) => setTabActiveKey(key)}
+            activeKey={tabActiveKey}
+            onChange={(key) => onChangeTab(key)}
           >
             {panes.map((pane) => (
               <TabPane itemKey={pane.itemKey} tab={pane.tab} key={pane.itemKey}>