From bbad38f8fe83eb8299a93483d88eee4e19f6e1b3 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Sat, 12 Aug 2023 11:18:41 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20=E6=94=B6?=
 =?UTF-8?q?=E6=95=9B=E5=88=87=E6=8D=A2=20SideBar=20=E6=96=B9=E6=B3=95?=
 =?UTF-8?q?=E4=B8=BA=20useSwitchSideBarOnInit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/chat/[id]/layout.tsx                  |  9 ++-------
 src/pages/settings/layout.tsx                   |  9 ++-------
 src/store/global/hooks/index.ts                 |  2 ++
 .../global/hooks/useSwitchSideBarOnInit.ts      | 17 +++++++++++++++++
 src/store/global/index.ts                       |  1 +
 src/store/global/store.ts                       | 13 ++++++++-----
 6 files changed, 32 insertions(+), 19 deletions(-)
 create mode 100644 src/store/global/hooks/index.ts
 create mode 100644 src/store/global/hooks/useSwitchSideBarOnInit.ts

diff --git a/src/pages/chat/[id]/layout.tsx b/src/pages/chat/[id]/layout.tsx
index 1b9a89ffae16..c6273182cadf 100644
--- a/src/pages/chat/[id]/layout.tsx
+++ b/src/pages/chat/[id]/layout.tsx
@@ -4,7 +4,7 @@ import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
 import AppLayout from '@/layout/AppLayout';
-import { useGlobalStore } from '@/store/global';
+import { useSwitchSideBarOnInit } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 
 import { Sessions } from '../SessionList';
@@ -31,12 +31,7 @@ const ChatLayout = memo<PropsWithChildren>(({ children }) => {
     toggleTopic();
   }, [id]);
 
-  useEffect(() => {
-    const hasRehydrated = useGlobalStore.persist.hasHydrated();
-    if (hasRehydrated) {
-      useGlobalStore.setState({ sidebarKey: 'chat' });
-    }
-  }, []);
+  useSwitchSideBarOnInit('chat');
 
   return (
     <AppLayout>
diff --git a/src/pages/settings/layout.tsx b/src/pages/settings/layout.tsx
index 2133e34647e0..bf60a80ed5a1 100644
--- a/src/pages/settings/layout.tsx
+++ b/src/pages/settings/layout.tsx
@@ -5,7 +5,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import SideBar from '@/features/SideBar';
 import { createI18nNext } from '@/locales/create';
-import { useGlobalStore } from '@/store/global';
+import { useSwitchSideBarOnInit } from '@/store/global';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 const initI18n = createI18nNext('setting');
@@ -18,12 +18,7 @@ const SettingLayout = memo<{ children: ReactNode }>(({ children }) => {
     initI18n.finally();
   }, []);
 
-  useEffect(() => {
-    const hasRehydrated = useGlobalStore.persist.hasHydrated();
-    if (hasRehydrated) {
-      useGlobalStore.setState({ sidebarKey: 'settings' });
-    }
-  }, []);
+  useSwitchSideBarOnInit('settings');
 
   return (
     <>
diff --git a/src/store/global/hooks/index.ts b/src/store/global/hooks/index.ts
new file mode 100644
index 000000000000..e48e49e5d3b7
--- /dev/null
+++ b/src/store/global/hooks/index.ts
@@ -0,0 +1,2 @@
+export * from './useHydrated';
+export * from './useSwitchSideBarOnInit';
diff --git a/src/store/global/hooks/useSwitchSideBarOnInit.ts b/src/store/global/hooks/useSwitchSideBarOnInit.ts
new file mode 100644
index 000000000000..bd9d7019cfa5
--- /dev/null
+++ b/src/store/global/hooks/useSwitchSideBarOnInit.ts
@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+
+import { SidebarTabKey } from '../initialState';
+import { useGlobalStore } from '../store';
+
+/**
+ * 切换侧边栏选项
+ * @desc 只会在应用初始化时（且水合后）执行一次
+ */
+export const useSwitchSideBarOnInit = (key: SidebarTabKey) => {
+  useEffect(() => {
+    const hasRehydrated = useGlobalStore.persist.hasHydrated();
+    if (hasRehydrated) {
+      useGlobalStore.getState().switchSideBar(key);
+    }
+  }, []);
+};
diff --git a/src/store/global/index.ts b/src/store/global/index.ts
index 669f05650ebf..8b5465b4d647 100644
--- a/src/store/global/index.ts
+++ b/src/store/global/index.ts
@@ -1,2 +1,3 @@
+export * from './hooks';
 export * from './selectors';
 export * from './store';
diff --git a/src/store/global/store.ts b/src/store/global/store.ts
index daa94da5e8e9..55c465e02c48 100644
--- a/src/store/global/store.ts
+++ b/src/store/global/store.ts
@@ -22,11 +22,14 @@ const createStore: StateCreator<GlobalStore, [['zustand/devtools', never]]> = (.
 });
 
 //  ===============  persist 本地缓存中间件配置 ============ //
-
-const LOBE_SETTINGS = 'LOBE_SETTINGS';
-
-const persistOptions: PersistOptions<GlobalStore> = {
-  name: LOBE_SETTINGS,
+type GlobalPersist = Pick<GlobalStore, 'preference' | 'settings'>;
+
+const persistOptions: PersistOptions<GlobalStore, GlobalPersist> = {
+  name: 'LOBE_SETTINGS',
+  partialize: (s) => ({
+    preference: s.preference,
+    settings: s.settings,
+  }),
   skipHydration: true,
 };