♻️ refactor: refactor cookie/headers to async mode (#4459)

* ♻️ refactor: refactor async api request * ♻️ refactor: refactor async api request * ♻️ refactor: refactor async api request
lobehub · Oct 23, 2024 · 98c5d21 · 98c5d21
1 parent 79a5842
commit 98c5d21
Show file tree

Hide file tree

Showing 13 changed files with 52 additions and 30 deletions.
diff --git a/src/app/(backend)/api/webhooks/casdoor/validateRequest.ts b/src/app/(backend)/api/webhooks/casdoor/validateRequest.ts
@@ -17,7 +17,7 @@ interface CasdoorWebhookPayload {
 
 export const validateRequest = async (request: Request, secret?: string) => {
   const payloadString = await request.text();
-  const headerPayload = headers();
+  const headerPayload = await headers();
   const casdoorSecret = headerPayload.get('casdoor-secret')!;
   try {
     if (casdoorSecret === secret) {

diff --git a/src/app/(backend)/api/webhooks/clerk/validateRequest.ts b/src/app/(backend)/api/webhooks/clerk/validateRequest.ts
@@ -4,7 +4,7 @@ import { Webhook } from 'svix';
 
 export const validateRequest = async (request: Request, secret: string) => {
   const payloadString = await request.text();
-  const headerPayload = headers();
+  const headerPayload = await headers();
 
   const svixHeaders = {
     'svix-id': headerPayload.get('svix-id')!,

diff --git a/src/app/(backend)/api/webhooks/logto/validateRequest.ts b/src/app/(backend)/api/webhooks/logto/validateRequest.ts
@@ -26,7 +26,7 @@ interface LogtoWebhookPayload {
 
 export const validateRequest = async (request: Request, signingKey: string) => {
   const payloadString = await request.text();
-  const headerPayload = headers();
+  const headerPayload = await headers();
   const logtoHeaderSignature = headerPayload.get('logto-signature-sha-256')!;
   try {
     const hmac = createHmac('sha256', signingKey);

diff --git a/src/app/(main)/discover/(detail)/assistant/[slug]/page.tsx b/src/app/(main)/discover/(detail)/assistant/[slug]/page.tsx
@@ -2,12 +2,11 @@ import { notFound } from 'next/navigation';
 import urlJoin from 'url-join';
 
 import StructuredData from '@/components/StructuredData';
-import { Locales } from '@/locales/resources';
 import { ldModule } from '@/server/ld';
 import { metadataModule } from '@/server/metadata';
 import { DiscoverService } from '@/server/services/discover';
 import { translation } from '@/server/translation';
-import { DiscoverPlugintem } from '@/types/discover';
+import { DiscoverPageProps, DiscoverPlugintem } from '@/types/discover';
 import { isMobileDevice } from '@/utils/server/responsive';
 
 import DetailLayout from '../../features/DetailLayout';
@@ -19,9 +18,10 @@ import Temp from './features/Temp';
 // import ConversationExample from './features/ConversationExample';
 // import SystemRole from './features/SystemRole';
 
-type Props = { params: { slug: string }; searchParams: { hl?: Locales } };
+export const generateMetadata = async (props: DiscoverPageProps) => {
+  const params = await props.params;
+  const searchParams = await props.searchParams;
 
-export const generateMetadata = async ({ params, searchParams }: Props) => {
   const { slug: identifier } = params;
   const { t, locale } = await translation('metadata', searchParams?.hl);
 
@@ -56,7 +56,10 @@ export const generateMetadata = async ({ params, searchParams }: Props) => {
   };
 };
 
-const Page = async ({ params, searchParams }: Props) => {
+const Page = async (props: DiscoverPageProps) => {
+  const params = await props.params;
+  const searchParams = await props.searchParams;
+
   const { slug: identifier } = params;
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const mobile = isMobileDevice();

diff --git a/src/app/(main)/discover/(list)/(home)/page.tsx b/src/app/(main)/discover/(list)/(home)/page.tsx
@@ -7,9 +7,10 @@ import { translation } from '@/server/translation';
 
 import Client from './Client';
 
-type Props = { searchParams: { hl?: Locales } };
+type Props = { searchParams: Promise<{ hl?: Locales }> };
 
-export const generateMetadata = async ({ searchParams }: Props) => {
+export const generateMetadata = async (props: Props) => {
+  const searchParams = await props.searchParams;
   const { t, locale } = await translation('metadata', searchParams?.hl);
   return metadataModule.generate({
     alternate: true,
@@ -20,7 +21,8 @@ export const generateMetadata = async ({ searchParams }: Props) => {
   });
 };
 
-const Page = async ({ searchParams }: Props) => {
+const Page = async (props: Props) => {
+  const searchParams = await props.searchParams;
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const ld = ldModule.generate({
     description: t('discover.description'),

diff --git a/src/app/(main)/discover/(list)/assistants/page.tsx b/src/app/(main)/discover/(list)/assistants/page.tsx
@@ -8,9 +8,10 @@ import { isMobileDevice } from '@/utils/server/responsive';
 
 import List from './features/List';
 
-type Props = { searchParams: { hl?: Locales } };
+type Props = { searchParams: Promise<{ hl?: Locales }> };
 
-export const generateMetadata = async ({ searchParams }: Props) => {
+export const generateMetadata = async (props: Props) => {
+  const searchParams = await props.searchParams;
   const { t, locale } = await translation('metadata', searchParams?.hl);
   return metadataModule.generate({
     alternate: true,
@@ -21,7 +22,8 @@ export const generateMetadata = async ({ searchParams }: Props) => {
   });
 };
 
-const Page = async ({ searchParams }: Props) => {
+const Page = async (props: Props) => {
+  const searchParams = await props.searchParams;
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const mobile = isMobileDevice();
 

diff --git a/src/app/(main)/discover/(list)/models/page.tsx b/src/app/(main)/discover/(list)/models/page.tsx
@@ -9,10 +9,12 @@ import { isMobileDevice } from '@/utils/server/responsive';
 
 import List from './features/List';
 
-type Props = { searchParams: { hl?: Locales } };
+type Props = { searchParams: Promise<{ hl?: Locales }> };
 
-export const generateMetadata = async ({ searchParams }: Props) => {
-  const { t, locale } = await translation('metadata', searchParams?.hl);
+export const generateMetadata = async (props: Props) => {
+  const searchParams = await props.searchParams;
+
+  const { t, locale } = await translation('metadata', searchParams.hl);
 
   return metadataModule.generate({
     alternate: true,
@@ -23,7 +25,9 @@ export const generateMetadata = async ({ searchParams }: Props) => {
   });
 };
 
-const Page = async ({ searchParams }: Props) => {
+const Page = async (props: Props) => {
+  const searchParams = await props.searchParams;
+
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const mobile = isMobileDevice();
 

diff --git a/src/app/(main)/discover/(list)/plugins/page.tsx b/src/app/(main)/discover/(list)/plugins/page.tsx
@@ -8,9 +8,10 @@ import { isMobileDevice } from '@/utils/server/responsive';
 
 import List from './features/List';
 
-type Props = { searchParams: { hl?: Locales } };
+type Props = { searchParams: Promise<{ hl?: Locales }> };
 
-export const generateMetadata = async ({ searchParams }: Props) => {
+export const generateMetadata = async (props: Props) => {
+  const searchParams = await props.searchParams;
   const { t, locale } = await translation('metadata', searchParams?.hl);
 
   return metadataModule.generate({
@@ -22,7 +23,8 @@ export const generateMetadata = async ({ searchParams }: Props) => {
   });
 };
 
-const Page = async ({ searchParams }: Props) => {
+const Page = async (props: Props) => {
+  const searchParams = await props.searchParams;
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const mobile = isMobileDevice();
 

diff --git a/src/app/(main)/discover/(list)/providers/page.tsx b/src/app/(main)/discover/(list)/providers/page.tsx
@@ -8,9 +8,10 @@ import { isMobileDevice } from '@/utils/server/responsive';
 
 import List from './features/List';
 
-type Props = { searchParams: { hl?: Locales } };
+type Props = { searchParams: Promise<{ hl?: Locales }> };
 
-export const generateMetadata = async ({ searchParams }: Props) => {
+export const generateMetadata = async (props: Props) => {
+  const searchParams = await props.searchParams;
   const { t, locale } = await translation('metadata', searchParams?.hl);
 
   return metadataModule.generate({
@@ -22,7 +23,8 @@ export const generateMetadata = async ({ searchParams }: Props) => {
   });
 };
 
-const Page = async ({ searchParams }: Props) => {
+const Page = async (props: Props) => {
+  const searchParams = await props.searchParams;
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const mobile = isMobileDevice();
 

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -19,7 +19,7 @@ type RootLayoutProps = {
 };
 
 const RootLayout = async ({ children, modal }: RootLayoutProps) => {
-  const cookieStore = cookies();
+  const cookieStore = await cookies();
 
   const lang = cookieStore.get(LOBE_LOCALE_COOKIE);
   const direction = isRtlLang(lang?.value || DEFAULT_LANG) ? 'rtl' : 'ltr';

diff --git a/src/layout/GlobalProvider/index.tsx b/src/layout/GlobalProvider/index.tsx
@@ -23,7 +23,8 @@ import QueryProvider from './Query';
 import StoreInitialization from './StoreInitialization';
 import StyleRegistry from './StyleRegistry';
 
-const parserFallbackLang = () => {
+const parserFallbackLang = async () => {
+  const header = await headers();
   /**
    * The arguments are as follows:
    *
@@ -32,7 +33,7 @@ const parserFallbackLang = () => {
    * 3) The default locale.
    */
   let fallbackLang: string = resolveAcceptLanguage(
-    headers().get('accept-language') || '',
+    header.get('accept-language') || '',
     //  Invalid locale identifier 'ar'. A valid locale should follow the BCP 47 'language-country' format.
     locales.map((locale) => (locale === 'ar' ? 'ar-EG' : locale)),
     'en-US',
@@ -45,14 +46,14 @@ const parserFallbackLang = () => {
 
 const GlobalLayout = async ({ children }: PropsWithChildren) => {
   // get default theme config to use with ssr
-  const cookieStore = cookies();
+  const cookieStore = await cookies();
   const appearance = cookieStore.get(LOBE_THEME_APPEARANCE);
   const neutralColor = cookieStore.get(LOBE_THEME_NEUTRAL_COLOR);
   const primaryColor = cookieStore.get(LOBE_THEME_PRIMARY_COLOR);
 
   // get default locale config to use with ssr
   const defaultLang = cookieStore.get(LOBE_LOCALE_COOKIE);
-  const fallbackLang = parserFallbackLang();
+  const fallbackLang = await parserFallbackLang();
 
   // if it's a new user, there's no cookie
   // So we need to use the fallback language parsed by accept-language

diff --git a/src/server/translation.ts b/src/server/translation.ts
@@ -11,7 +11,7 @@ import { isDev } from '@/utils/env';
 
 export const getLocale = async (hl?: string): Promise<Locales> => {
   if (hl) return normalizeLocale(hl) as Locales;
-  const cookieStore = cookies();
+  const cookieStore = await cookies();
   const defaultLang = cookieStore.get(LOBE_LOCALE_COOKIE);
   return (defaultLang?.value || DEFAULT_LANG) as Locales;
 };

diff --git a/src/types/discover.ts b/src/types/discover.ts
@@ -1,10 +1,16 @@
 import { LobeChatPluginManifest } from '@lobehub/chat-plugin-sdk';
 import { LobeChatPluginMeta, Meta } from '@lobehub/chat-plugin-sdk/lib/types/market';
 
+import { Locales } from '@/locales/resources';
 import { ChatModelCard, ModelProviderCard } from '@/types/llm';
 import { MetaData } from '@/types/meta';
 import { LobeAgentSettings } from '@/types/session';
 
+export interface DiscoverPageProps {
+  params: Promise<{ slug: string }>;
+  searchParams: Promise<{ hl?: Locales }>;
+}
+
 export enum AssistantCategory {
   Academic = 'academic',
   All = 'all',