♻️ refactor: refactor the sidebar to fix first render state (lobehub#…

…1301)
bentwnghk · Feb 14, 2024 · c477491 · c477491
1 parent 9593382
commit c477491
Show file tree

Hide file tree

Showing 19 changed files with 40 additions and 102 deletions.
diff --git a/src/app/chat/(desktop)/layout.desktop.tsx b/src/app/chat/(desktop)/layout.desktop.tsx
@@ -4,15 +4,13 @@ import { PropsWithChildren, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import AppLayoutDesktop from '@/layout/AppLayout.desktop';
-import { useSwitchSideBarOnInit } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
 import ResponsiveSessionList from './features/SessionList';
 
 export default memo(({ children }: PropsWithChildren) => {
-  useSwitchSideBarOnInit(SidebarTabKey.Chat);
   return (
-    <AppLayoutDesktop>
+    <AppLayoutDesktop sidebarKey={SidebarTabKey.Chat}>
       <ResponsiveSessionList />
       <Flexbox
         flex={1}

diff --git a/src/app/chat/(mobile)/index.tsx b/src/app/chat/(mobile)/index.tsx
@@ -4,24 +4,21 @@ import { useRouter } from 'next/navigation';
 import { memo, useEffect } from 'react';
 
 import AppLayoutMobile from '@/layout/AppLayout.mobile';
-import { useSwitchSideBarOnInit } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/slices/common/initialState';
+import { SidebarTabKey } from '@/store/global/initialState';
 
 import PageTitle from '../features/PageTitle';
 import SessionHeader from './features/SessionHeader';
 import SessionList from './features/SessionList';
 
 const ChatMobilePage = memo(() => {
-  useSwitchSideBarOnInit(SidebarTabKey.Chat);
-
   const router = useRouter();
   useEffect(() => {
     router.prefetch('/chat/mobile');
     router.prefetch('/settings');
   }, []);
 
   return (
-    <AppLayoutMobile navBar={<SessionHeader />} showTabBar>
+    <AppLayoutMobile navBar={<SessionHeader />} showTabBar tabBarKey={SidebarTabKey.Chat}>
       <PageTitle />
       <SessionList />
     </AppLayoutMobile>

diff --git a/src/app/chat/features/ChatHeader/SettingButton.tsx b/src/app/chat/features/ChatHeader/SettingButton.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import { DESKTOP_HEADER_ICON_SIZE, MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/slices/common/initialState';
+import { SidebarTabKey } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 import { pathString } from '@/utils/url';

diff --git a/src/app/home/Redirect.tsx b/src/app/home/Redirect.tsx
@@ -5,8 +5,6 @@ import { memo, useEffect } from 'react';
 
 import { messageService } from '@/services/message';
 import { sessionService } from '@/services/session';
-import { useGlobalStore } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 
 const checkHasConversation = async () => {
@@ -21,8 +19,6 @@ const Redirect = memo(() => {
 
   useEffect(() => {
     checkHasConversation().then((hasData) => {
-      useGlobalStore.getState().switchSideBar(SidebarTabKey.Chat);
-
       if (hasData) {
         router.replace('/chat');
 

diff --git a/src/app/market/(desktop)/layout.desktop.tsx b/src/app/market/(desktop)/layout.desktop.tsx
@@ -7,7 +7,6 @@ import { Center, Flexbox } from 'react-layout-kit';
 import SafeSpacing from '@/components/SafeSpacing';
 import { MAX_WIDTH } from '@/const/layoutTokens';
 import AppLayoutDesktop from '@/layout/AppLayout.desktop';
-import { useSwitchSideBarOnInit } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
 import Header from './features/Header';
@@ -30,10 +29,8 @@ const useStyles = createStyles(({ css }) => ({
 const MarketLayout = memo<PropsWithChildren>(({ children }) => {
   const { theme, styles } = useStyles();
 
-  useSwitchSideBarOnInit(SidebarTabKey.Market);
-
   return (
-    <AppLayoutDesktop>
+    <AppLayoutDesktop sidebarKey={SidebarTabKey.Market}>
       <Flexbox
         flex={1}
         height={'100%'}

diff --git a/src/app/market/(mobile)/layout.mobile.tsx b/src/app/market/(mobile)/layout.mobile.tsx
@@ -5,18 +5,15 @@ import { PropsWithChildren } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import AppLayoutMobile from '@/layout/AppLayout.mobile';
-import { useSwitchSideBarOnInit } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
 import Header from './features/Header';
 
 const DetailModal = dynamic(() => import('./features/AgentDetail'));
 
 const MarketLayout = ({ children }: PropsWithChildren) => {
-  useSwitchSideBarOnInit(SidebarTabKey.Market);
-
   return (
-    <AppLayoutMobile navBar={<Header />} showTabBar>
+    <AppLayoutMobile navBar={<Header />} showTabBar tabBarKey={SidebarTabKey.Market}>
       <Flexbox flex={1} gap={16} style={{ padding: 16 }}>
         {children}
       </Flexbox>

diff --git a/src/app/market/features/AgentDetailContent/AgentInfo/Header.tsx b/src/app/market/features/AgentDetailContent/AgentInfo/Header.tsx
@@ -5,8 +5,6 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center } from 'react-layout-kit';
 
-import { useGlobalStore } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/initialState';
 import { agentMarketSelectors, useMarketStore } from '@/store/market';
 import { useSessionStore } from '@/store/session';
 
@@ -18,7 +16,6 @@ const Header = memo(() => {
   const { t } = useTranslation('market');
   const { styles, theme } = useStyles();
   const createSession = useSessionStore((s) => s.createSession);
-  const switchSideBar = useGlobalStore((s) => s.switchSideBar);
   const agentItem = useMarketStore(agentMarketSelectors.currentAgentItem);
   const { message } = App.useApp();
 
@@ -56,7 +53,6 @@ const Header = memo(() => {
           if (!agentItem) return;
 
           createSession({ config, meta });
-          switchSideBar(SidebarTabKey.Chat);
         }}
         type={'primary'}
       >

diff --git a/src/app/settings/(desktop)/layout.desktop.tsx b/src/app/settings/(desktop)/layout.desktop.tsx
@@ -5,7 +5,6 @@ import { Center, Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import AppLayoutDesktop from '@/layout/AppLayout.desktop';
-import { useSwitchSideBarOnInit } from '@/store/global';
 import { SettingsTabs, SidebarTabKey } from '@/store/global/initialState';
 
 import Header from './features/Header';
@@ -17,10 +16,8 @@ export interface DesktopLayoutProps {
 }
 
 const DesktopLayout = memo<DesktopLayoutProps>(({ children, activeTab }) => {
-  useSwitchSideBarOnInit(SidebarTabKey.Setting);
-
   return (
-    <AppLayoutDesktop>
+    <AppLayoutDesktop sidebarKey={SidebarTabKey.Setting}>
       <SideBar activeTab={activeTab} />
       <Flexbox flex={1} height={'100%'} style={{ position: 'relative' }}>
         <Header activeTab={activeTab} />

diff --git a/src/app/settings/(mobile)/layout.mobile.tsx b/src/app/settings/(mobile)/layout.mobile.tsx
@@ -4,7 +4,6 @@ import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import AppLayoutMobile from '@/layout/AppLayout.mobile';
-import { useSwitchSideBarOnInit } from '@/store/global';
 import { SettingsTabs, SidebarTabKey } from '@/store/global/initialState';
 
 import Header from './features/Header';
@@ -14,9 +13,8 @@ export interface SettingLayoutProps {
   children: ReactNode;
 }
 export default memo(({ children, activeTab }: SettingLayoutProps) => {
-  useSwitchSideBarOnInit(SidebarTabKey.Setting);
   return (
-    <AppLayoutMobile navBar={<Header activeTab={activeTab} />}>
+    <AppLayoutMobile navBar={<Header activeTab={activeTab} />} tabBarKey={SidebarTabKey.Setting}>
       <Flexbox style={{ overflow: 'auto' }}>{children}</Flexbox>
     </AppLayoutMobile>
   );

diff --git a/src/features/MobileTabBar/index.tsx b/src/features/MobileTabBar/index.tsx
@@ -6,7 +6,6 @@ import { rgba } from 'polished';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useGlobalStore } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
 const useStyles = createStyles(({ css, token }) => ({
@@ -17,8 +16,12 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-export default memo<{ className?: string }>(({ className }) => {
-  const [tab, setTab] = useGlobalStore((s) => [s.sidebarKey, s.switchSideBar]);
+interface Props {
+  className?: string;
+  tabBarKey?: SidebarTabKey;
+}
+
+export default memo<Props>(({ className, tabBarKey }) => {
   const { t } = useTranslation('common');
   const { styles } = useStyles();
   const router = useRouter();
@@ -30,7 +33,6 @@ export default memo<{ className?: string }>(({ className }) => {
         ),
         key: SidebarTabKey.Chat,
         onClick: () => {
-          setTab(SidebarTabKey.Chat);
           router.push('/chat');
         },
         title: t('tab.chat'),
@@ -39,7 +41,6 @@ export default memo<{ className?: string }>(({ className }) => {
         icon: (active) => <Icon className={active ? styles.active : undefined} icon={Bot} />,
         key: SidebarTabKey.Market,
         onClick: () => {
-          setTab(SidebarTabKey.Market);
           router.push('/market');
         },
         title: t('tab.market'),
@@ -48,20 +49,12 @@ export default memo<{ className?: string }>(({ className }) => {
         icon: (active) => <Icon className={active ? styles.active : undefined} icon={User} />,
         key: SidebarTabKey.Setting,
         onClick: () => {
-          setTab(SidebarTabKey.Setting);
           router.push('/settings');
         },
         title: t('tab.setting'),
       },
     ],
     [t],
   );
-  return (
-    <MobileTabBar
-      activeKey={tab}
-      className={className}
-      items={items}
-      onChange={(key) => setTab(key as any)}
-    />
-  );
+  return <MobileTabBar activeKey={tabBarKey} className={className} items={items} />;
 });
diff --git a/src/features/SideBar/BottomActions.tsx b/src/features/SideBar/BottomActions.tsx
@@ -23,11 +23,10 @@ import { GlobalStore, useGlobalStore } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
 export interface BottomActionProps {
-  setTab: GlobalStore['switchSideBar'];
-  tab: GlobalStore['sidebarKey'];
+  tab?: GlobalStore['sidebarKey'];
 }
 
-const BottomActions = memo<BottomActionProps>(({ tab, setTab }) => {
+const BottomActions = memo<BottomActionProps>(({ tab }) => {
   const router = useRouter();
   const { t } = useTranslation('common');
 
@@ -113,10 +112,6 @@ const BottomActions = memo<BottomActionProps>(({ tab, setTab }) => {
         </Flexbox>
       ),
       onClick: () => {
-        setTab(SidebarTabKey.Setting);
-        useGlobalStore.setState({
-          sidebarKey: SidebarTabKey.Setting,
-        });
         router.push('/settings/common');
       },
     },

diff --git a/src/features/SideBar/TopActions.tsx b/src/features/SideBar/TopActions.tsx
@@ -9,11 +9,10 @@ import { SidebarTabKey } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 
 export interface TopActionProps {
-  setTab: GlobalStore['switchSideBar'];
-  tab: GlobalStore['sidebarKey'];
+  tab?: GlobalStore['sidebarKey'];
 }
 
-const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
+const TopActions = memo<TopActionProps>(({ tab }) => {
   const { t } = useTranslation('common');
   const switchBackToChat = useGlobalStore((s) => s.switchBackToChat);
 
@@ -24,7 +23,6 @@ const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
         onClick={(e) => {
           e.preventDefault();
           switchBackToChat(useSessionStore.getState().activeId);
-          setTab(SidebarTabKey.Chat);
         }}
       >
         <ActionIcon
@@ -39,9 +37,6 @@ const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
         <ActionIcon
           active={tab === SidebarTabKey.Market}
           icon={Compass}
-          onClick={() => {
-            setTab(SidebarTabKey.Market);
-          }}
           placement={'right'}
           size="large"
           title={t('tab.market')}

diff --git a/src/features/SideBar/index.tsx b/src/features/SideBar/index.tsx
@@ -2,20 +2,22 @@ import { SideNav } from '@lobehub/ui';
 import { memo } from 'react';
 
 import AvatarWithUpload from '@/features/AvatarWithUpload';
-import { useGlobalStore } from '@/store/global';
+import { SidebarTabKey } from '@/store/global/initialState';
 
 import BottomActions from './BottomActions';
 import TopActions from './TopActions';
 
-export default memo(() => {
-  const [tab, setTab] = useGlobalStore((s) => [s.sidebarKey, s.switchSideBar]);
+interface Props {
+  sidebarKey?: SidebarTabKey;
+}
 
+export default memo<Props>(({ sidebarKey }) => {
   return (
     <SideNav
       avatar={<AvatarWithUpload id={'avatar'} />}
-      bottomActions={<BottomActions setTab={setTab} tab={tab} />}
+      bottomActions={<BottomActions tab={sidebarKey} />}
       style={{ height: '100%' }}
-      topActions={<TopActions setTab={setTab} tab={tab} />}
+      topActions={<TopActions tab={sidebarKey} />}
     />
   );
 });
diff --git a/src/layout/AppLayout.desktop.tsx b/src/layout/AppLayout.desktop.tsx
@@ -1,11 +1,16 @@
 import { useTheme } from 'antd-style';
-import { PropsWithChildren, memo } from 'react';
+import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import SideBar from '@/features/SideBar';
 import { useIsPWA } from '@/hooks/useIsPWA';
+import { SidebarTabKey } from '@/store/global/initialState';
 
-const AppLayoutDesktop = memo<PropsWithChildren>(({ children }) => {
+interface AppLayoutDesktopProps {
+  children: ReactNode;
+  sidebarKey?: SidebarTabKey;
+}
+const AppLayoutDesktop = memo<AppLayoutDesktopProps>(({ children, sidebarKey }) => {
   const isPWA = useIsPWA();
   const theme = useTheme();
 
@@ -16,7 +21,7 @@ const AppLayoutDesktop = memo<PropsWithChildren>(({ children }) => {
       style={isPWA ? { borderTop: `1px solid ${theme.colorBorder}` } : {}}
       width={'100%'}
     >
-      <SideBar />
+      <SideBar sidebarKey={sidebarKey} />
       {children}
     </Flexbox>
   );

diff --git a/src/layout/AppLayout.mobile.tsx b/src/layout/AppLayout.mobile.tsx
@@ -5,6 +5,7 @@ import { CSSProperties, PropsWithChildren, ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
+import { SidebarTabKey } from '@/store/global/slices/common/initialState';
 
 const MobileTabBar = dynamic(() => import('@/features/MobileTabBar'));
 
@@ -39,11 +40,12 @@ interface AppMobileLayoutProps extends PropsWithChildren {
   navBar?: ReactNode;
   showTabBar?: boolean;
   style?: CSSProperties;
+  tabBarKey?: SidebarTabKey;
   title?: MobileNavBarTitleProps;
 }
 
 const AppLayoutMobile = memo<AppMobileLayoutProps>(
-  ({ children, showTabBar, navBar, style, className }) => {
+  ({ children, showTabBar, tabBarKey, navBar, style, className }) => {
     const { styles, cx } = useStyles();
 
     return (
@@ -58,7 +60,7 @@ const AppLayoutMobile = memo<AppMobileLayoutProps>(
         {showTabBar && (
           <>
             <SafeSpacing mobile position={'bottom'} />
-            <MobileTabBar className={styles.mobileTabBar} />
+            <MobileTabBar className={styles.mobileTabBar} tabBarKey={tabBarKey} />
           </>
         )}
       </Flexbox>

diff --git a/src/store/global/hooks/index.ts b/src/store/global/hooks/index.ts
@@ -1,3 +1,3 @@
 export * from './useEffectAfterHydrated';
 export * from './useOnFinishHydrationGlobal';
-export * from './useSwitchSideBarOnInit';
+
diff --git a/src/store/global/hooks/useSwitchSideBarOnInit.ts b/src/store/global/hooks/useSwitchSideBarOnInit.ts