🐛 fix: fix mobile route (lobehub#165)

vincentngo · Sep 9, 2023 · d5e03b6 · d5e03b6
1 parent 444d9ec
commit d5e03b6
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 17 deletions.
diff --git a/src/layout/AppMobileLayout.tsx b/src/layout/AppMobileLayout.tsx
@@ -6,7 +6,6 @@ import { Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import MobileTabBar from '@/features/MobileTabBar';
-import { useOnFinishHydrationSession, useSessionStore } from '@/store/session';
 
 const useStyles = createStyles(({ css, cx, stylish }) => ({
   container: cx(
@@ -49,10 +48,6 @@ const AppMobileLayout = memo<AppMobileLayoutProps>(
   ({ children, showTabBar, navBar, style, className }) => {
     const { styles, cx } = useStyles();
 
-    useOnFinishHydrationSession(() => {
-      useSessionStore.setState({ isMobile: true });
-    }, []);
-
     return (
       <>
         <Head>

diff --git a/src/pages/chat/index.page.tsx b/src/pages/chat/index.page.tsx
@@ -4,6 +4,7 @@ import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { useSessionStore } from '@/store/session';
+import { useEffectAfterSessionHydrated } from '@/store/session/hooks';
 import { agentSelectors } from '@/store/session/selectors';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
@@ -22,6 +23,13 @@ const Chat = memo(() => {
   const pageTitle = genSiteHeadTitle([avatar, title].filter(Boolean).join(' '));
   const RenderLayout = mobile ? MobileLayout : DesktopLayout;
 
+  useEffectAfterSessionHydrated(
+    (store) => {
+      store.setState({ isMobile: mobile });
+    },
+    [mobile],
+  );
+
   return (
     <>
       <Head>

diff --git a/src/store/session/hooks/index.ts b/src/store/session/hooks/index.ts
@@ -1,3 +1,4 @@
+export * from './useEffectAfterHydrated';
 export * from './useOnFinishHydrationSession';
 export * from './useSessionChatInit';
 export * from './useSessionHydrated';
diff --git a/src/store/session/hooks/useEffectAfterHydrated.ts b/src/store/session/hooks/useEffectAfterHydrated.ts
@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+
+import { useSessionStore } from '../store';
+
+export const useEffectAfterSessionHydrated = (
+  fn: (session: typeof useSessionStore) => void,
+  deps: any[] = [],
+) => {
+  useEffect(() => {
+    const hasRehydrated = useSessionStore.persist.hasHydrated();
+
+    if (hasRehydrated) {
+      // 等价 useEffect 多次触发
+      fn(useSessionStore);
+    } else {
+      // 等价于 useEffect 第一次触发
+      useSessionStore.persist.onFinishHydration(() => {
+        fn(useSessionStore);
+      });
+    }
+  }, deps);
+};
diff --git a/src/store/session/hooks/useOnFinishHydrationSession.ts b/src/store/session/hooks/useOnFinishHydrationSession.ts
@@ -5,16 +5,12 @@ import { SessionStore, useSessionStore } from '../store';
 /**
  * 当 Session 水合完毕后才会执行的 useEffect
  * @param fn
- * @param deps
  */
-export const useOnFinishHydrationSession = (
-  fn: (state: SessionStore) => void,
-  deps: any[] = [],
-) => {
+export const useOnFinishHydrationSession = (fn: (state: SessionStore) => void) => {
   useEffect(() => {
     // 只有当水合完毕后再开始做操作
     useSessionStore.persist.onFinishHydration(() => {
       fn(useSessionStore.getState());
     });
-  }, deps);
+  }, []);
 };
diff --git a/src/store/session/hooks/useSessionHydrated.ts b/src/store/session/hooks/useSessionHydrated.ts
@@ -1,18 +1,17 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { useSessionStore } from '../store';
+import { useOnFinishHydrationSession } from './useOnFinishHydrationSession';
 
 export const useSessionHydrated = () => {
   // 根据 sessions 是否有值来判断是否已经初始化
   const hasInited = !!Object.values(useSessionStore.getState().sessions).length;
 
   const [isInit, setInit] = useState(hasInited);
 
-  useEffect(() => {
-    useSessionStore.persist.onFinishHydration(() => {
-      if (!isInit) setInit(true);
-    });
-  }, []);
+  useOnFinishHydrationSession(() => {
+    if (!isInit) setInit(true);
+  });
 
   return isInit;
 };