♻️ refactor: refactor to use async headers() (lobehub#5097)

* refactor async mobile * fix
liquescentremedies · Dec 20, 2024 · e368f38 · e368f38
1 parent eab067c
commit e368f38
Show file tree

Hide file tree

Showing 31 changed files with 54 additions and 55 deletions.
diff --git a/src/app/(main)/(mobile)/me/(home)/page.tsx b/src/app/(main)/(mobile)/me/(home)/page.tsx
@@ -17,8 +17,8 @@ export const generateMetadata = async () => {
   });
 };
 
-const Page = () => {
-  const mobile = isMobileDevice();
+const Page = async () => {
+  const mobile = await isMobileDevice();
 
   if (!mobile) return redirect('/chat');
 

diff --git a/src/app/(main)/(mobile)/me/data/page.tsx b/src/app/(main)/(mobile)/me/data/page.tsx
@@ -14,8 +14,8 @@ export const generateMetadata = async () => {
   });
 };
 
-const Page = () => {
-  const mobile = isMobileDevice();
+const Page = async () => {
+  const mobile = await isMobileDevice();
 
   if (!mobile) return redirect('/chat');
 

diff --git a/src/app/(main)/(mobile)/me/profile/page.tsx b/src/app/(main)/(mobile)/me/profile/page.tsx
@@ -15,8 +15,8 @@ export const generateMetadata = async () => {
   });
 };
 
-const Page = () => {
-  const mobile = isMobileDevice();
+const Page = async () => {
+  const mobile = await isMobileDevice();
 
   if (!mobile) return redirect('/profile');
 

diff --git a/src/app/(main)/(mobile)/me/settings/page.tsx b/src/app/(main)/(mobile)/me/settings/page.tsx
@@ -15,8 +15,8 @@ export const generateMetadata = async () => {
   });
 };
 
-const Page = () => {
-  const mobile = isMobileDevice();
+const Page = async () => {
+  const mobile = await isMobileDevice();
 
   if (!mobile) return redirect('/settings/common');
 

diff --git a/src/app/(main)/chat/(workspace)/@conversation/default.tsx b/src/app/(main)/chat/(workspace)/@conversation/default.tsx
@@ -6,14 +6,14 @@ import ChatList from './features/ChatList';
 import ThreadHydration from './features/ThreadHydration';
 import ZenModeToast from './features/ZenModeToast';
 
-const ChatConversation = () => {
-  const mobile = isMobileDevice();
+const ChatConversation = async () => {
+  const mobile = await isMobileDevice();
 
   return (
     <>
       <ZenModeToast />
       <ChatList mobile={mobile} />
-      <ChatInput />
+      <ChatInput mobile={mobile} />
       <ChatHydration />
       <ThreadHydration />
     </>

diff --git a/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/index.tsx b/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/index.tsx
@@ -1,10 +1,8 @@
 import MobileChatInput from '@/features/ChatInput/Mobile';
-import { isMobileDevice } from '@/utils/server/responsive';
 
 import DesktopChatInput from './Desktop';
 
-const ChatInput = () => {
-  const mobile = isMobileDevice();
+const ChatInput = ({ mobile }: { mobile: boolean }) => {
   const Input = mobile ? MobileChatInput : DesktopChatInput;
 
   return <Input />;

diff --git a/src/app/(main)/chat/(workspace)/@portal/default.tsx b/src/app/(main)/chat/(workspace)/@portal/default.tsx
@@ -8,8 +8,8 @@ import Mobile from './_layout/Mobile';
 
 const PortalBody = lazy(() => import('@/features/Portal/router'));
 
-const Inspector = () => {
-  const mobile = isMobileDevice();
+const Inspector = async () => {
+  const mobile = await isMobileDevice();
 
   const Layout = mobile ? Mobile : Desktop;
 

diff --git a/src/app/(main)/chat/(workspace)/@topic/default.tsx b/src/app/(main)/chat/(workspace)/@topic/default.tsx
@@ -10,8 +10,8 @@ import SystemRole from './features/SystemRole';
 
 const TopicContent = lazy(() => import('./features/TopicListContent'));
 
-const Topic = () => {
-  const mobile = isMobileDevice();
+const Topic = async () => {
+  const mobile = await isMobileDevice();
 
   const Layout = mobile ? Mobile : Desktop;
 

diff --git a/src/app/(main)/chat/(workspace)/page.tsx b/src/app/(main)/chat/(workspace)/page.tsx
@@ -18,7 +18,7 @@ export const generateMetadata = async () => {
 };
 
 const Page = async () => {
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
   const { t } = await translation('metadata');
   const ld = ldModule.generate({
     description: t('chat.title', { appName: BRANDING_NAME }),

diff --git a/src/app/(main)/discover/(detail)/assistant/[slug]/page.tsx b/src/app/(main)/discover/(detail)/assistant/[slug]/page.tsx
@@ -62,7 +62,7 @@ const Page = async (props: DiscoverPageProps) => {
 
   const { slug: identifier } = params;
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const data = await discoverService.getAssistantById(locale, identifier);

diff --git a/src/app/(main)/discover/(detail)/model/[...slugs]/page.tsx b/src/app/(main)/discover/(detail)/model/[...slugs]/page.tsx
@@ -72,7 +72,7 @@ const Page = async (props: Props) => {
   const identifier = decodeURIComponent(slugs.join('/'));
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const { t: td } = await translation('models', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const data = await discoverService.getModelById(locale, identifier);

diff --git a/src/app/(main)/discover/(detail)/plugin/[slug]/page.tsx b/src/app/(main)/discover/(detail)/plugin/[slug]/page.tsx
@@ -64,7 +64,7 @@ const Page = async (props: DiscoverPageProps) => {
 
   const { slug: identifier } = params;
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const data = await discoverService.getPluginById(locale, identifier, true);

diff --git a/src/app/(main)/discover/(detail)/provider/[slug]/page.tsx b/src/app/(main)/discover/(detail)/provider/[slug]/page.tsx
@@ -62,7 +62,7 @@ const Page = async (props: DiscoverPageProps) => {
   const { slug: identifier } = params;
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const { t: td } = await translation('models', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const data = await discoverService.getProviderById(locale, identifier);

diff --git a/src/app/(main)/discover/(list)/assistants/[slug]/page.tsx b/src/app/(main)/discover/(list)/assistants/[slug]/page.tsx
@@ -32,7 +32,7 @@ const Page = async (props: DiscoverPageProps<AssistantCategory>) => {
 
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const { t: td } = await translation('discover', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const items = await discoverService.getAssistantCategory(locale, params.slug);

diff --git a/src/app/(main)/discover/(list)/assistants/page.tsx b/src/app/(main)/discover/(list)/assistants/page.tsx
@@ -25,7 +25,7 @@ export const generateMetadata = async (props: Props) => {
 const Page = async (props: Props) => {
   const searchParams = await props.searchParams;
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const items = await discoverService.getAssistantList(locale);

diff --git a/src/app/(main)/discover/(list)/models/[slug]/page.tsx b/src/app/(main)/discover/(list)/models/[slug]/page.tsx
@@ -35,7 +35,7 @@ const Page = async (props: DiscoverPageProps) => {
   const searchParams = await props.searchParams;
 
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const list = await discoverService.getProviderList(locale);

diff --git a/src/app/(main)/discover/(list)/models/page.tsx b/src/app/(main)/discover/(list)/models/page.tsx
@@ -29,7 +29,7 @@ const Page = async (props: Props) => {
   const searchParams = await props.searchParams;
 
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const items = await discoverService.getModelList(locale);

diff --git a/src/app/(main)/discover/(list)/plugins/[slug]/page.tsx b/src/app/(main)/discover/(list)/plugins/[slug]/page.tsx
@@ -32,7 +32,7 @@ const Page = async (props: DiscoverPageProps<PluginCategory>) => {
 
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const { t: td } = await translation('discover', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const items = await discoverService.getPluginCategory(locale, params.slug);

diff --git a/src/app/(main)/discover/(list)/plugins/page.tsx b/src/app/(main)/discover/(list)/plugins/page.tsx
@@ -26,7 +26,7 @@ export const generateMetadata = async (props: Props) => {
 const Page = async (props: Props) => {
   const searchParams = await props.searchParams;
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const items = await discoverService.getPluginList(locale);

diff --git a/src/app/(main)/discover/(list)/providers/page.tsx b/src/app/(main)/discover/(list)/providers/page.tsx
@@ -26,7 +26,7 @@ export const generateMetadata = async (props: Props) => {
 const Page = async (props: Props) => {
   const searchParams = await props.searchParams;
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const items = await discoverService.getProviderList(locale);

diff --git a/src/app/(main)/discover/search/page.tsx b/src/app/(main)/discover/search/page.tsx
@@ -56,7 +56,7 @@ const Page = async (props: Props) => {
   const keywords = decodeURIComponent(q);
 
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const ld = ldModule.generate({
     description: t('discover.description'),

diff --git a/src/app/(main)/profile/[[...slugs]]/page.tsx b/src/app/(main)/profile/[[...slugs]]/page.tsx
@@ -13,8 +13,9 @@ export const generateMetadata = async () => {
   });
 };
 
-const Page = () => {
-  const mobile = isMobileDevice();
+const Page = async () => {
+  const mobile = await isMobileDevice();
+
   return <Client mobile={mobile} />;
 };
 

diff --git a/src/app/(main)/profile/layout.tsx b/src/app/(main)/profile/layout.tsx
@@ -6,10 +6,11 @@ import { isMobileDevice } from '@/utils/server/responsive';
 
 import MobileLayout from './_layout/Mobile';
 
-const Layout = ({ children }: PropsWithChildren) => {
+const Layout = async ({ children }: PropsWithChildren) => {
   if (!enableClerk) return notFound();
 
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
+
   if (mobile) return <MobileLayout>{children}</MobileLayout>;
 
   return children;

diff --git a/src/app/(main)/profile/loading.tsx b/src/app/(main)/profile/loading.tsx
@@ -3,8 +3,8 @@ import { Flexbox } from 'react-layout-kit';
 import SkeletonLoading from '@/components/SkeletonLoading';
 import { isMobileDevice } from '@/utils/server/responsive';
 
-const Loading = () => {
-  const mobile = isMobileDevice();
+const Loading = async () => {
+  const mobile = await isMobileDevice();
   if (mobile) return <SkeletonLoading paragraph={{ rows: 8 }} />;
   return (
     <Flexbox horizontal style={{ position: 'relative' }} width={'100%'}>

diff --git a/src/app/(main)/settings/about/page.tsx b/src/app/(main)/settings/about/page.tsx
@@ -13,8 +13,8 @@ export const generateMetadata = async () => {
   });
 };
 
-export default () => {
-  const isMobile = isMobileDevice();
+export default async () => {
+  const isMobile = await isMobileDevice();
 
   return <Page mobile={isMobile} />;
 };
diff --git a/src/app/(main)/settings/sync/page.tsx b/src/app/(main)/settings/sync/page.tsx
@@ -15,12 +15,12 @@ export const generateMetadata = async () => {
     url: '/settings/sync',
   });
 };
-export default () => {
+export default async () => {
   const enableWebrtc = serverFeatureFlags().enableWebrtc;
   if (!enableWebrtc) return notFound();
 
-  const isMobile = isMobileDevice();
-  const { os, browser } = gerServerDeviceInfo();
+  const isMobile = await isMobileDevice();
+  const { os, browser } = await gerServerDeviceInfo();
 
   return <Page browser={browser} mobile={isMobile} os={os} />;
 };
diff --git a/src/app/@modal/(.)settings/modal/page.tsx b/src/app/@modal/(.)settings/modal/page.tsx
@@ -7,9 +7,9 @@ import SettingsModal from './index';
  * @refs: https://github.com/lobehub/lobe-chat/discussions/2295#discussioncomment-9290942
  */
 
-const Page = () => {
-  const isMobile = isMobileDevice();
-  const { os, browser } = gerServerDeviceInfo();
+const Page = async () => {
+  const isMobile = await isMobileDevice();
+  const { os, browser } = await gerServerDeviceInfo();
 
   return <SettingsModal browser={browser} mobile={isMobile} os={os} />;
 };

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -25,7 +25,7 @@ const RootLayout = async ({ children, modal }: RootLayoutProps) => {
   const locale = lang?.value || DEFAULT_LANG;
 
   const direction = isRtlLang(locale) ? 'rtl' : 'ltr';
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   return (
     <html dir={direction} lang={locale} suppressHydrationWarning>
@@ -49,7 +49,7 @@ export default RootLayout;
 export { generateMetadata } from './metadata';
 
 export const generateViewport = async (): ResolvingViewport => {
-  const isMobile = isMobileDevice();
+  const isMobile = await isMobileDevice();
 
   const dynamicScale = isMobile ? { maximumScale: 1, userScalable: false } : {};
 

diff --git a/src/components/server/ServerLayout.tsx b/src/components/server/ServerLayout.tsx
@@ -9,8 +9,8 @@ interface ServerLayoutProps<T> {
 
 const ServerLayout =
   <T extends PropsWithChildren>({ Desktop, Mobile }: ServerLayoutProps<T>): FC<T> =>
-  (props: T) => {
-    const mobile = isMobileDevice();
+  async (props: T) => {
+    const mobile = await isMobileDevice();
     return mobile ? <Mobile {...props} /> : <Desktop {...props} />;
   };
 

diff --git a/src/layout/GlobalProvider/index.tsx b/src/layout/GlobalProvider/index.tsx
@@ -68,7 +68,7 @@ const GlobalLayout = async ({ children }: PropsWithChildren) => {
   // get default feature flags to use with ssr
   const serverFeatureFlags = getServerFeatureFlagsValue();
   const serverConfig = getServerGlobalConfig();
-  const isMobile = isMobileDevice();
+  const isMobile = await isMobileDevice();
   return (
     <StyleRegistry>
       <Locale antdLocale={antdLocale} defaultLang={userLocale}>

diff --git a/src/utils/server/responsive.ts b/src/utils/server/responsive.ts
@@ -4,12 +4,12 @@ import { UAParser } from 'ua-parser-js';
 /**
  * check mobile device in server
  */
-export const isMobileDevice = () => {
+export const isMobileDevice = async () => {
   if (typeof process === 'undefined') {
     throw new Error('[Server method] you are importing a server-only module outside of server');
   }
 
-  const { get } = headers();
+  const { get } = await headers();
   const ua = get('user-agent');
 
   // console.debug(ua);
@@ -21,15 +21,14 @@ export const isMobileDevice = () => {
 /**
  * check mobile device in server
  */
-export const gerServerDeviceInfo = () => {
+export const gerServerDeviceInfo = async () => {
   if (typeof process === 'undefined') {
     throw new Error('[Server method] you are importing a server-only module outside of server');
   }
 
-  const { get } = headers();
+  const { get } = await headers();
   const ua = get('user-agent');
 
-  // console.debug(ua);
   const parser = new UAParser(ua || '');
 
   return {