perf: move all booking pages into (booking-page-wrapper) route group (#19321)

* update useIsBookingPage * move team pages into use-page-wrapper route group * update imports * fix type check * update * update * remove isBookingPage configure from booking client components * move all booking pages to use-page-wrapper route group * add checkIfBookingPage util * update layout * update AppProviders * improve comments * update * update pagesAndRewritePaths logic * refactor
2025-02-23 10:13:11 +01:00
parent 97348e2052
commit aba7c6df7f
22 changed files with 75 additions and 46 deletions
@@ -0,0 +1,25 @@
+import { cookies, headers } from "next/headers";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+
+import PageWrapper from "@components/PageWrapperAppDir";
+
+import { ssrInit } from "@server/lib/ssr";
+
+export default async function BookingPageWrapperLayout({ children }: { children: React.ReactNode }) {
+  const h = headers();
+  const nonce = h.get("x-nonce") ?? undefined;
+  const context = buildLegacyCtx(h, cookies(), {}, {});
+  const ssr = await ssrInit(context);
+
+  return (
+    <PageWrapper
+      isBookingPage={true}
+      requiresLicense={false}
+      nonce={nonce}
+      themeBasis={null}
+      dehydratedState={ssr.dehydrate()}>
+      {children}
+    </PageWrapper>
+  );
+}
@@ -1,7 +1,6 @@
 import { withAppDirSsr } from "app/WithAppDirSsr";
 import type { PageProps } from "app/_types";
 import { generateMeetingMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
 import { cookies, headers } from "next/headers";

 import { getOrgFullOrigin } from "@calcom/features/ee/organizations/lib/orgDomains";
@@ -56,11 +55,12 @@ export const generateMetadata = async ({ params, searchParams }: PageProps) => {
  };
 };

-const Page = async (props: OrgTypePageProps) => {
+const ServerPage = async ({ params, searchParams }: PageProps) => {
+  const props = await getData(buildLegacyCtx(headers(), cookies(), params, searchParams));
  if ((props as TeamTypePageProps)?.teamId) {
    return <TeamTypePage {...(props as TeamTypePageProps)} />;
  }
  return <UserTypePage {...(props as UserTypePageProps)} />;
 };

-export default WithLayout({ getLayout: null, getData, ServerPage: Page, isBookingPage: true });
+export default ServerPage;
@@ -1,7 +1,6 @@
 import { withAppDirSsr } from "app/WithAppDirSsr";
 import type { PageProps } from "app/_types";
 import { generateMeetingMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
 import { cookies, headers } from "next/headers";

 import { getOrgFullOrigin } from "@calcom/features/ee/organizations/lib/orgDomains";
@@ -78,11 +77,12 @@ export const generateMetadata = async ({ params, searchParams }: PageProps) => {
  }
 };

-const Page = async (props: OrgPageProps) => {
+const ServerPage = async ({ params, searchParams }: PageProps) => {
+  const props = await getData(buildLegacyCtx(headers(), cookies(), params, searchParams));
  if ((props as TeamPageProps)?.team) {
    return <TeamPage {...(props as TeamPageProps)} />;
  }
  return <UserPage {...(props as UserPageProps)} />;
 };

-export default WithLayout({ getLayout: null, getData, ServerPage: Page, isBookingPage: true });
+export default ServerPage;
@@ -1,7 +1,6 @@
 import { withAppDirSsr } from "app/WithAppDirSsr";
 import type { PageProps as _PageProps } from "app/_types";
 import { generateMeetingMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
 import { headers, cookies } from "next/headers";

 import { getOrgFullOrigin } from "@calcom/features/ee/organizations/lib/orgDomains";
@@ -50,4 +49,10 @@ export const generateMetadata = async ({ params, searchParams }: _PageProps) =>
 };

 const getData = withAppDirSsr<Props>(getServerSideProps);
-export default WithLayout({ getData, Page, isBookingPage: true })<"P">;
+
+const ServerPage = async ({ params, searchParams }: _PageProps) => {
+  const props = await getData(buildLegacyCtx(headers(), cookies(), params, searchParams));
+  return <Page {...props} />;
+};
+
+export default ServerPage;
@@ -0,0 +1,4 @@
+import Page from "app/(booking-page-wrapper)/team/[slug]/page";
+
+export { generateMetadata } from "app/(booking-page-wrapper)/team/[slug]/page";
+export default Page;
@@ -0,0 +1,4 @@
+import Page from "app/(booking-page-wrapper)/team/[slug]/[type]/page";
+
+export { generateMetadata } from "app/(booking-page-wrapper)/team/[slug]/[type]/page";
+export default Page;
@@ -0,0 +1,4 @@
+import Page from "app/(booking-page-wrapper)/team/[slug]/page";
+
+export { generateMetadata } from "app/(booking-page-wrapper)/team/[slug]/page";
+export default Page;
@@ -1,7 +1,6 @@
 import { withAppDirSsr } from "app/WithAppDirSsr";
 import type { PageProps } from "app/_types";
 import { generateMeetingMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
 import { cookies, headers } from "next/headers";

 import { getOrgFullOrigin } from "@calcom/features/ee/organizations/lib/orgDomains";
@@ -51,9 +50,8 @@ export const generateMetadata = async ({ params, searchParams }: PageProps) => {

 const getData = withAppDirSsr<LegacyPageProps>(getServerSideProps);

-export default WithLayout({
-  Page: LegacyPage,
-  getData,
-  getLayout: null,
-  isBookingPage: true,
-})<"P">;
+const ServerPage = async ({ params, searchParams }: PageProps) => {
+  const props = await getData(buildLegacyCtx(headers(), cookies(), params, searchParams));
+  return <LegacyPage {...props} />;
+};
+export default ServerPage;
@@ -1,7 +1,6 @@
 import { withAppDirSsr } from "app/WithAppDirSsr";
 import type { PageProps as _PageProps } from "app/_types";
 import { generateMeetingMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
 import { cookies, headers } from "next/headers";

 import { getOrgFullOrigin } from "@calcom/features/ee/organizations/lib/orgDomains";
@@ -45,9 +44,8 @@ export const generateMetadata = async ({ params, searchParams }: _PageProps) =>

 const getData = withAppDirSsr<PageProps>(getServerSideProps);

-export default WithLayout({
-  Page: LegacyPage,
-  getData,
-  getLayout: null,
-  isBookingPage: true,
-})<"P">;
+const ServerPage = async ({ params, searchParams }: _PageProps) => {
+  const props = await getData(buildLegacyCtx(headers(), cookies(), params, searchParams));
+  return <LegacyPage {...props} />;
+};
+export default ServerPage;
@@ -9,6 +9,7 @@ import { ssrInit } from "@server/lib/ssr";
 export default async function PageWrapperLayout({ children }: { children: React.ReactNode }) {
  const h = headers();
  const nonce = h.get("x-nonce") ?? undefined;
+
  const context = buildLegacyCtx(headers(), cookies(), {}, {});
  const ssr = await ssrInit(context);

@@ -1,7 +1,7 @@
 import Page from "@pages/org/[orgSlug]/[user]/[type]/embed";
 import withEmbedSsrAppDir from "app/WithEmbedSSR";
 import { WithLayout } from "app/layoutHOC";
-import type { OrgTypePageProps } from "app/org/[orgSlug]/[user]/[type]/page";
+import type { OrgTypePageProps } from "app/(booking-page-wrapper)/org/[orgSlug]/[user]/[type]/page";

 import { getServerSideProps } from "@lib/org/[orgSlug]/[user]/[type]/getServerSideProps";

@@ -1,6 +1,6 @@
 import withEmbedSsrAppDir from "app/WithEmbedSSR";
 import { WithLayout } from "app/layoutHOC";
-import type { OrgPageProps } from "app/org/[orgSlug]/[user]/page";
+import type { OrgPageProps } from "app/(booking-page-wrapper)/org/[orgSlug]/[user]/page";

 import { getServerSideProps } from "@lib/org/[orgSlug]/[user]/getServerSideProps";

@@ -1,4 +0,0 @@
-import Page from "app/team/[slug]/page";
-
-export { generateMetadata } from "app/team/[slug]/page";
-export default Page;
@@ -1,4 +0,0 @@
-import Page from "app/team/[slug]/[type]/page";
-
-export { generateMetadata } from "app/team/[slug]/[type]/page";
-export default Page;
@@ -1,4 +0,0 @@
-import Page from "app/team/[slug]/page";
-
-export { generateMetadata } from "app/team/[slug]/page";
-export default Page;
@@ -287,7 +287,7 @@ const AppProviders = (props: PageWrapperProps) => {
    RemainingProviders
  );

-  if (isBookingPage) {
+  if (props.isBookingPage || isBookingPage) {
    return Hydrated;
  }

@@ -240,6 +240,4 @@ function TeamPage({ team, considerUnpublished, isValidOrgDomain }: PageProps) {
  );
 }

-TeamPage.isBookingPage = true;
-
 export default TeamPage;
@@ -146,5 +146,5 @@ export function UserPage(props: PageProps) {
    </>
  );
 }
-UserPage.isBookingPage = true;
+
 export default UserPage;
@@ -48,6 +48,4 @@ function Type({ slug, user, isEmbed, booking, isBrandingHidden, eventData, orgBa
  );
 }

-Type.isBookingPage = true;
-
 export default Type;
@@ -3,12 +3,18 @@ const { nextJsOrgRewriteConfig } = require("./getNextjsOrgRewriteConfig");
 /** Needed to rewrite public booking page, gets all static pages but [user] */
 // Pages found here are excluded from redirects in beforeFiles in next.config.js
 let pages = (exports.pages = glob
-  .sync("{pages,app,app/(use-page-wrapper),app/(use-page-wrapper)/(main-nav)}/**/[^_]*.{tsx,js,ts}", {
-    cwd: __dirname,
-  })
+  .sync(
+    "{pages,app,app/(booking-page-wrapper),app/(use-page-wrapper),app/(use-page-wrapper)/(main-nav)}/**/[^_]*.{tsx,js,ts}",
+    {
+      cwd: __dirname,
+    }
+  )
  .map((filename) =>
    filename
-      .replace(/^(app\/\(use-page-wrapper\)\/\(main-nav\)|app\/\(use-page-wrapper\)|pages|app)\//, "")
+      .replace(
+        /^(app\/\(use-page-wrapper\)\/\(main-nav\)|app\/\(use-page-wrapper\)|app\/\(booking-page-wrapper\)|pages|app)\//,
+        ""
+      )
      .replace(/(\.tsx|\.js|\.ts)/, "")
      .replace(/\/.*/, "")
  )