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

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;

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;

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;

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;

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;

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;

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>
+  );
+}

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;

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;

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;

apps/web/app/bookings/layout.tsx

@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "~/bookings/views/bookings-listing-view";
-
-export default WithLayout({ getLayout });

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>;

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(/\/.*/, "")
   )

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";

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";

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";

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";