From f0d1c92e99f353f82462bb829135090fd7df6f86 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 22 Jan 2025 12:52:58 -0500
Subject: [PATCH] perf: create (use-page-wrapper) route group and replace
 `WithLayout` from `/bookings/[status]` page + 8 low-risk single pages
 (#18737)

* add a layoutfile to use-page-wrapper route group

* refactor and move bookings status page to route group

* improve logic in pagesAndRewritePaths

* fix

* add use client directive

* chore: remove WithLayout from 8 low-risk single pages (#18745)

* move /403 and /500

* move /auth/error

* move /connect-and-join

* move /enterprise

* move /maintenance

* move /more

* move /upgrade

* pass dehydratedState in layout
---
 .../app/{ => (use-page-wrapper)}/403/page.tsx |  3 +--
 .../500/copy-button.tsx                       |  0
 .../app/{ => (use-page-wrapper)}/500/page.tsx |  5 +----
 .../auth/error/page.tsx                       |  3 +--
 .../bookings/[status]/page.tsx                |  0
 .../(use-page-wrapper)/bookings/layout.tsx    | 21 +++++++++++++++++++
 .../connect-and-join/page.tsx                 |  3 +--
 .../enterprise/page.tsx                       |  3 +--
 apps/web/app/(use-page-wrapper)/layout.tsx    | 20 ++++++++++++++++++
 .../maintenance/page.tsx                      |  3 +--
 .../{ => (use-page-wrapper)}/more/page.tsx    |  3 +--
 .../{ => (use-page-wrapper)}/upgrade/page.tsx |  3 +--
 apps/web/app/bookings/layout.tsx              |  5 -----
 .../bookings/views/bookings-listing-view.tsx  | 20 ------------------
 apps/web/pagesAndRewritePaths.js              |  4 ++--
 .../useRedirectToLoginIfUnauthenticated.tsx   |  2 ++
 .../hooks/useRedirectToOnboardingIfNeeded.tsx |  2 ++
 packages/features/shell/Shell.tsx             |  2 ++
 packages/features/shell/useAppTheme.ts        |  2 ++
 19 files changed, 59 insertions(+), 45 deletions(-)
 rename apps/web/app/{ => (use-page-wrapper)}/403/page.tsx (90%)
 rename apps/web/app/{ => (use-page-wrapper)}/500/copy-button.tsx (100%)
 rename apps/web/app/{ => (use-page-wrapper)}/500/page.tsx (94%)
 rename apps/web/app/{ => (use-page-wrapper)}/auth/error/page.tsx (93%)
 rename apps/web/app/{ => (use-page-wrapper)}/bookings/[status]/page.tsx (100%)
 create mode 100644 apps/web/app/(use-page-wrapper)/bookings/layout.tsx
 rename apps/web/app/{ => (use-page-wrapper)}/connect-and-join/page.tsx (68%)
 rename apps/web/app/{ => (use-page-wrapper)}/enterprise/page.tsx (71%)
 create mode 100644 apps/web/app/(use-page-wrapper)/layout.tsx
 rename apps/web/app/{ => (use-page-wrapper)}/maintenance/page.tsx (75%)
 rename apps/web/app/{ => (use-page-wrapper)}/more/page.tsx (67%)
 rename apps/web/app/{ => (use-page-wrapper)}/upgrade/page.tsx (65%)
 delete mode 100644 apps/web/app/bookings/layout.tsx

diff --git a/apps/web/app/403/page.tsx b/apps/web/app/(use-page-wrapper)/403/page.tsx
similarity index 90%
rename from apps/web/app/403/page.tsx
rename to apps/web/app/(use-page-wrapper)/403/page.tsx
index 51f3b2c281..f7aed69ca6 100644
--- a/apps/web/app/403/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/403/page.tsx
@@ -1,5 +1,4 @@
 import { _generateMetadata, getTranslate } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
 
 import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
 import { Button } from "@calcom/ui";
@@ -27,4 +26,4 @@ async function Error403() {
   );
 }
 
-export default WithLayout({ ServerPage: Error403 });
+export default Error403;
diff --git a/apps/web/app/500/copy-button.tsx b/apps/web/app/(use-page-wrapper)/500/copy-button.tsx
similarity index 100%
rename from apps/web/app/500/copy-button.tsx
rename to apps/web/app/(use-page-wrapper)/500/copy-button.tsx
diff --git a/apps/web/app/500/page.tsx b/apps/web/app/(use-page-wrapper)/500/page.tsx
similarity index 94%
rename from apps/web/app/500/page.tsx
rename to apps/web/app/(use-page-wrapper)/500/page.tsx
index 867b60d51c..32239cd166 100644
--- a/apps/web/app/500/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/500/page.tsx
@@ -1,5 +1,4 @@
 import { _generateMetadata, getTranslate } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
 
 import { APP_NAME } from "@calcom/lib/constants";
 import { Button } from "@calcom/ui";
@@ -42,6 +41,4 @@ async function Error500({ searchParams }: { searchParams: { error?: string } })
   );
 }
 
-export default WithLayout({
-  ServerPage: Error500,
-});
+export default Error500;
diff --git a/apps/web/app/auth/error/page.tsx b/apps/web/app/(use-page-wrapper)/auth/error/page.tsx
similarity index 93%
rename from apps/web/app/auth/error/page.tsx
rename to apps/web/app/(use-page-wrapper)/auth/error/page.tsx
index e3942ce67b..cd550ded4b 100644
--- a/apps/web/app/auth/error/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/auth/error/page.tsx
@@ -1,6 +1,5 @@
 import type { PageProps } from "app/_types";
 import { _generateMetadata, getTranslate } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
 import Link from "next/link";
 import { z } from "zod";
 
@@ -44,4 +43,4 @@ const ServerPage = async ({ searchParams }: PageProps) => {
   );
 };
 
-export default WithLayout({ ServerPage })<"P">;
+export default ServerPage;
diff --git a/apps/web/app/bookings/[status]/page.tsx b/apps/web/app/(use-page-wrapper)/bookings/[status]/page.tsx
similarity index 100%
rename from apps/web/app/bookings/[status]/page.tsx
rename to apps/web/app/(use-page-wrapper)/bookings/[status]/page.tsx
diff --git a/apps/web/app/(use-page-wrapper)/bookings/layout.tsx b/apps/web/app/(use-page-wrapper)/bookings/layout.tsx
new file mode 100644
index 0000000000..9297d1d425
--- /dev/null
+++ b/apps/web/app/(use-page-wrapper)/bookings/layout.tsx
@@ -0,0 +1,21 @@
+import { getTranslate } from "app/_utils";
+
+import Shell from "@calcom/features/shell/Shell";
+
+async function BookingsStatusLayout({ children }: { children: React.ReactNode }) {
+  const t = await getTranslate();
+  return (
+    <Shell
+      withoutMain={false}
+      withoutSeo={true}
+      hideHeadingOnMobile
+      heading={t("bookings")}
+      subtitle={t("bookings_description")}
+      title={t("bookings")}
+      description={t("bookings_description")}>
+      {children}
+    </Shell>
+  );
+}
+
+export default BookingsStatusLayout;
diff --git a/apps/web/app/connect-and-join/page.tsx b/apps/web/app/(use-page-wrapper)/connect-and-join/page.tsx
similarity index 68%
rename from apps/web/app/connect-and-join/page.tsx
rename to apps/web/app/(use-page-wrapper)/connect-and-join/page.tsx
index e0e7f58128..a271ffc7ec 100644
--- a/apps/web/app/connect-and-join/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/connect-and-join/page.tsx
@@ -1,5 +1,4 @@
 import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
 
 import LegacyPage from "~/connect-and-join/connect-and-join-view";
 
@@ -10,4 +9,4 @@ export const generateMetadata = async () => {
   );
 };
 
-export default WithLayout({ getLayout: null, Page: LegacyPage })<"P">;
+export default LegacyPage;
diff --git a/apps/web/app/enterprise/page.tsx b/apps/web/app/(use-page-wrapper)/enterprise/page.tsx
similarity index 71%
rename from apps/web/app/enterprise/page.tsx
rename to apps/web/app/(use-page-wrapper)/enterprise/page.tsx
index 2b3b1752f0..3be9790f06 100644
--- a/apps/web/app/enterprise/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/enterprise/page.tsx
@@ -1,5 +1,4 @@
 import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
 
 import EnterprisePage from "@components/EnterprisePage";
 
@@ -9,4 +8,4 @@ export const generateMetadata = async () =>
     (t) => t("create_your_org_description")
   );
 
-export default WithLayout({ Page: EnterprisePage })<"P">;
+export default EnterprisePage;
diff --git a/apps/web/app/(use-page-wrapper)/layout.tsx b/apps/web/app/(use-page-wrapper)/layout.tsx
new file mode 100644
index 0000000000..2e75568305
--- /dev/null
+++ b/apps/web/app/(use-page-wrapper)/layout.tsx
@@ -0,0 +1,20 @@
+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 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);
+
+  return (
+    <PageWrapper requiresLicense={false} nonce={nonce} themeBasis={null} dehydratedState={ssr.dehydrate()}>
+      {children}
+    </PageWrapper>
+  );
+}
diff --git a/apps/web/app/maintenance/page.tsx b/apps/web/app/(use-page-wrapper)/maintenance/page.tsx
similarity index 75%
rename from apps/web/app/maintenance/page.tsx
rename to apps/web/app/(use-page-wrapper)/maintenance/page.tsx
index da07ed7bdf..804f49b40d 100644
--- a/apps/web/app/maintenance/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/maintenance/page.tsx
@@ -1,5 +1,4 @@
 import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
 
 import { APP_NAME } from "@calcom/lib/constants";
 
@@ -12,4 +11,4 @@ export const generateMetadata = async () => {
   );
 };
 
-export default WithLayout({ getLayout: null, Page: LegacyPage })<"P">;
+export default LegacyPage;
diff --git a/apps/web/app/more/page.tsx b/apps/web/app/(use-page-wrapper)/more/page.tsx
similarity index 67%
rename from apps/web/app/more/page.tsx
rename to apps/web/app/(use-page-wrapper)/more/page.tsx
index d3325d2e50..0fbc354ec0 100644
--- a/apps/web/app/more/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/more/page.tsx
@@ -1,5 +1,4 @@
 import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
 
 import Page from "~/more/more-page-view";
 
@@ -10,4 +9,4 @@ export const generateMetadata = async () => {
   );
 };
 
-export default WithLayout({ getLayout: null, Page })<"P">;
+export default Page;
diff --git a/apps/web/app/upgrade/page.tsx b/apps/web/app/(use-page-wrapper)/upgrade/page.tsx
similarity index 65%
rename from apps/web/app/upgrade/page.tsx
rename to apps/web/app/(use-page-wrapper)/upgrade/page.tsx
index c8991427ce..26c5c6842a 100644
--- a/apps/web/app/upgrade/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/upgrade/page.tsx
@@ -1,5 +1,4 @@
 import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
 
 import LegacyPage from "~/upgrade/upgrade-view";
 
@@ -9,4 +8,4 @@ export const generateMetadata = async () =>
     () => ""
   );
 
-export default WithLayout({ getLayout: null, Page: LegacyPage })<"P">;
+export default LegacyPage;
diff --git a/apps/web/app/bookings/layout.tsx b/apps/web/app/bookings/layout.tsx
deleted file mode 100644
index 9f179fdea9..0000000000
--- a/apps/web/app/bookings/layout.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "~/bookings/views/bookings-listing-view";
-
-export default WithLayout({ getLayout });
diff --git a/apps/web/modules/bookings/views/bookings-listing-view.tsx b/apps/web/modules/bookings/views/bookings-listing-view.tsx
index 36e4aaba69..0442ff158f 100644
--- a/apps/web/modules/bookings/views/bookings-listing-view.tsx
+++ b/apps/web/modules/bookings/views/bookings-listing-view.tsx
@@ -7,7 +7,6 @@ import {
   getSortedRowModel,
   createColumnHelper,
 } from "@tanstack/react-table";
-import type { ReactElement } from "react";
 import { useMemo, useState } from "react";
 import type { z } from "zod";
 
@@ -18,7 +17,6 @@ import { FiltersContainer } from "@calcom/features/bookings/components/FiltersCo
 import type { filterQuerySchema } from "@calcom/features/bookings/lib/useFilterQuery";
 import { useFilterQuery } from "@calcom/features/bookings/lib/useFilterQuery";
 import { DataTableProvider, DataTableWrapper } from "@calcom/features/data-table";
-import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
@@ -290,21 +288,3 @@ function BookingsContent({ status }: BookingsProps) {
     </div>
   );
 }
-
-function BookingsStatusLayout({ children }: { children: React.ReactNode }) {
-  const { t } = useLocale();
-  return (
-    <Shell
-      withoutMain={false}
-      withoutSeo={true}
-      hideHeadingOnMobile
-      heading={t("bookings")}
-      subtitle={t("bookings_description")}
-      title={t("bookings")}
-      description={t("bookings_description")}>
-      {children}
-    </Shell>
-  );
-}
-
-export const getLayout = (page: ReactElement) => <BookingsStatusLayout>{page}</BookingsStatusLayout>;
diff --git a/apps/web/pagesAndRewritePaths.js b/apps/web/pagesAndRewritePaths.js
index 722d95417d..f34685a7ab 100644
--- a/apps/web/pagesAndRewritePaths.js
+++ b/apps/web/pagesAndRewritePaths.js
@@ -3,10 +3,10 @@ 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}/**/[^_]*.{tsx,js,ts}", { cwd: __dirname })
+  .sync("{pages,app,app/(use-page-wrapper)}/**/[^_]*.{tsx,js,ts}", { cwd: __dirname })
   .map((filename) =>
     filename
-      .replace(/^(pages|app)\//, "")
+      .replace(/^(app\/\(use-page-wrapper\)|pages|app)\//, "")
       .replace(/(\.tsx|\.js|\.ts)/, "")
       .replace(/\/.*/, "")
   )
diff --git a/packages/features/auth/lib/hooks/useRedirectToLoginIfUnauthenticated.tsx b/packages/features/auth/lib/hooks/useRedirectToLoginIfUnauthenticated.tsx
index 84cb2afdd9..e0b7d68488 100644
--- a/packages/features/auth/lib/hooks/useRedirectToLoginIfUnauthenticated.tsx
+++ b/packages/features/auth/lib/hooks/useRedirectToLoginIfUnauthenticated.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
diff --git a/packages/features/auth/lib/hooks/useRedirectToOnboardingIfNeeded.tsx b/packages/features/auth/lib/hooks/useRedirectToOnboardingIfNeeded.tsx
index 51355e5be9..522fa3a3c5 100644
--- a/packages/features/auth/lib/hooks/useRedirectToOnboardingIfNeeded.tsx
+++ b/packages/features/auth/lib/hooks/useRedirectToOnboardingIfNeeded.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import type { User } from "@prisma/client";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index 4094e515e3..42da319075 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useSession } from "next-auth/react";
 import { usePathname, useRouter } from "next/navigation";
 import type { Dispatch, ReactElement, ReactNode, SetStateAction } from "react";
diff --git a/packages/features/shell/useAppTheme.ts b/packages/features/shell/useAppTheme.ts
index c608ab8858..661d03d938 100644
--- a/packages/features/shell/useAppTheme.ts
+++ b/packages/features/shell/useAppTheme.ts
@@ -1,3 +1,5 @@
+"use client";
+
 import getBrandColours from "@calcom/lib/getBrandColours";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";