chore: [app-router-migration 8.6] reorganize future pages file structure (#12988)

* make no-meeting-found page use ssr

* remove-route-groups

* add LayoutHOC

* fix

* fix

* ensure proper types for withLayout function

---------

Co-authored-by: Greg Pabian <35925521+grzpab@users.noreply.github.com>

apps/web/app/_types.ts

@@ -1,3 +1,14 @@
 export type Params = {
   [param: string]: string | string[] | undefined;
 };
+
+export type SearchParams = {
+  [param: string]: string | string[] | undefined;
+};
+
+export type PageProps = {
+  params: Params;
+  searchParams: SearchParams;
+};
+
+export type LayoutProps = { params: Params; children: React.ReactElement };

apps/web/app/future/(individual-page-wrapper)/apps/[slug]/layout.tsx

@@ -1,15 +0,0 @@
-import { type ReactElement } from "react";
-
-import PageWrapper from "@components/PageWrapperAppDir";
-
-type EventTypesLayoutProps = {
-  children: ReactElement;
-};
-
-export default function Layout({ children }: EventTypesLayoutProps) {
-  return (
-    <PageWrapper getLayout={null} requiresLicense={false} nonce={undefined} themeBasis={null}>
-      {children}
-    </PageWrapper>
-  );
-}

apps/web/app/future/(individual-page-wrapper)/apps/installed/[category]/layout.tsx

@@ -1,15 +0,0 @@
-import { type ReactElement } from "react";
-
-import PageWrapper from "@components/PageWrapperAppDir";
-
-type EventTypesLayoutProps = {
-  children: ReactElement;
-};
-
-export default function Layout({ children }: EventTypesLayoutProps) {
-  return (
-    <PageWrapper getLayout={null} requiresLicense={false} nonce={undefined} themeBasis={null}>
-      {children}
-    </PageWrapper>
-  );
-}

apps/web/app/future/(shared-page-wrapper)/(admin-layout)/layout.tsx

@@ -1,20 +0,0 @@
-import { headers } from "next/headers";
-import { type ReactElement } from "react";
-
-import PageWrapper from "@components/PageWrapperAppDir";
-import { getLayout } from "@components/auth/layouts/AdminLayoutAppDir";
-
-type WrapperWithLayoutProps = {
-  children: ReactElement;
-};
-
-export default async function WrapperWithLayout({ children }: WrapperWithLayoutProps) {
-  const h = headers();
-  const nonce = h.get("x-nonce") ?? undefined;
-
-  return (
-    <PageWrapper getLayout={getLayout} requiresLicense={false} nonce={nonce} themeBasis={null}>
-      {children}
-    </PageWrapper>
-  );
-}

apps/web/app/future/(shared-page-wrapper)/(admin-layout)/settings/admin/oAuth/page.tsx

@@ -1,10 +0,0 @@
-import Page from "@pages/settings/admin/oAuth/index";
-import { _generateMetadata } from "app/_utils";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    () => "OAuth",
-    () => "Add new OAuth Clients"
-  );
-
-export default Page;

apps/web/app/future/(shared-page-wrapper)/(admin-layout)/settings/admin/page.tsx

@@ -1,10 +0,0 @@
-import Page from "@pages/settings/admin/index";
-import { _generateMetadata } from "app/_utils";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    () => "Admin",
-    () => "admin_description"
-  );
-
-export default Page;

apps/web/app/future/(shared-page-wrapper)/(layout)/layout.tsx

@@ -1,22 +0,0 @@
-// pages without layout (e.g., /availability/index.tsx) are supposed to go under (layout) folder
-import { headers } from "next/headers";
-import { type ReactElement } from "react";
-
-import { getLayout } from "@calcom/features/MainLayoutAppDir";
-
-import PageWrapper from "@components/PageWrapperAppDir";
-
-type WrapperWithLayoutProps = {
-  children: ReactElement;
-};
-
-export default async function WrapperWithLayout({ children }: WrapperWithLayoutProps) {
-  const h = headers();
-  const nonce = h.get("x-nonce") ?? undefined;
-
-  return (
-    <PageWrapper getLayout={getLayout} requiresLicense={false} nonce={nonce} themeBasis={null}>
-      {children}
-    </PageWrapper>
-  );
-}

apps/web/app/future/(shared-page-wrapper)/(no-layout)/layout.tsx

@@ -1,20 +0,0 @@
-// pages containing layout (e.g., /availability/[schedule].tsx) are supposed to go under (no-layout) folder
-import { headers } from "next/headers";
-import { type ReactElement } from "react";
-
-import PageWrapper from "@components/PageWrapperAppDir";
-
-type WrapperWithoutLayoutProps = {
-  children: ReactElement;
-};
-
-export default async function WrapperWithoutLayout({ children }: WrapperWithoutLayoutProps) {
-  const h = headers();
-  const nonce = h.get("x-nonce") ?? undefined;
-
-  return (
-    <PageWrapper getLayout={null} requiresLicense={false} nonce={nonce} themeBasis={null}>
-      {children}
-    </PageWrapper>
-  );
-}

apps/web/app/future/(shared-page-wrapper)/(no-layout)/video/no-meeting-found/page.tsx

@@ -1,10 +0,0 @@
-import Page from "@pages/video/no-meeting-found";
-import { _generateMetadata } from "app/_utils";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    () => "",
-    () => ""
-  );
-
-export default Page;

apps/web/app/future/(shared-page-wrapper)/(settings-layout)/layout.tsx

@@ -1,21 +0,0 @@
-import { headers } from "next/headers";
-import { type ReactElement } from "react";
-
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
-
-import PageWrapper from "@components/PageWrapperAppDir";
-
-type WrapperWithLayoutProps = {
-  children: ReactElement;
-};
-
-export default async function WrapperWithLayout({ children }: WrapperWithLayoutProps) {
-  const h = headers();
-  const nonce = h.get("x-nonce") ?? undefined;
-
-  return (
-    <PageWrapper getLayout={getLayout} requiresLicense={false} nonce={nonce} themeBasis={null}>
-      {children}
-    </PageWrapper>
-  );
-}

apps/web/app/future/apps/[slug]/layout.tsx

@@ -0,0 +1,3 @@
+import { WithLayout } from "app/layoutHOC";
+
+export default WithLayout({ getLayout: null })<"L">;

apps/web/app/future/apps/categories/[category]/page.tsx

@@ -1,6 +1,7 @@
 import CategoryPage from "@pages/apps/categories/[category]";
 import { Prisma } from "@prisma/client";
 import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
 import { notFound } from "next/navigation";
 import z from "zod";
 
@@ -9,8 +10,6 @@ import { APP_NAME } from "@calcom/lib/constants";
 import prisma from "@calcom/prisma";
 import { AppCategories } from "@calcom/prisma/enums";
 
-import PageWrapper from "@components/PageWrapperAppDir";
-
 export const generateMetadata = async () => {
   return await _generateMetadata(
     () => `${APP_NAME} | ${APP_NAME}`,
@@ -67,13 +66,6 @@ const getPageProps = async ({ params }: { params: Record<string, string | string
   };
 };
 
-export default async function Page({ params }: { params: Record<string, string | string[]> }) {
-  const { apps } = await getPageProps({ params });
-  return (
-    <PageWrapper getLayout={null} requiresLicense={false} nonce={undefined} themeBasis={null}>
-      <CategoryPage apps={apps} />
-    </PageWrapper>
-  );
-}
-
+// @ts-expect-error getData arg
+export default WithLayout({ getData: getPageProps, Page: CategoryPage })<P>;
 export const dynamic = "force-static";

apps/web/app/future/apps/categories/page.tsx

@@ -1,14 +1,13 @@
 import LegacyPage from "@pages/apps/categories/index";
 import { ssrInit } from "app/_trpc/ssrInit";
 import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
 import { cookies, headers } from "next/headers";
 
 import { getAppRegistry, getAppRegistryWithCredentials } from "@calcom/app-store/_appRegistry";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { APP_NAME } from "@calcom/lib/constants";
 
-import PageWrapper from "@components/PageWrapperAppDir";
-
 export const generateMetadata = async () => {
   return await _generateMetadata(
     () => `Categories | ${APP_NAME}`,
@@ -43,14 +42,4 @@ async function getPageProps() {
   };
 }
 
-export default async function Page() {
-  const props = await getPageProps();
-  const h = headers();
-  const nonce = h.get("x-nonce") ?? undefined;
-
-  return (
-    <PageWrapper getLayout={null} requiresLicense={false} nonce={nonce} themeBasis={null} {...props}>
-      <LegacyPage {...props} />
-    </PageWrapper>
-  );
-}
+export default WithLayout({ getData: getPageProps, Page: LegacyPage, getLayout: null })<"P">;

apps/web/app/future/apps/installed/[category]/layout.tsx

@@ -0,0 +1,3 @@
+import { WithLayout } from "app/layoutHOC";
+
+export default WithLayout({ getLayout: null })<"L">;

apps/web/app/future/bookings/[status]/layout.tsx

@@ -1,6 +1,7 @@
 import { ssgInit } from "app/_trpc/ssgInit";
 import type { Params } from "app/_types";
 import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
 import { notFound } from "next/navigation";
 import type { ReactElement } from "react";
 import { z } from "zod";
@@ -8,8 +9,6 @@ import { z } from "zod";
 import { getLayout } from "@calcom/features/MainLayoutAppDir";
 import { APP_NAME } from "@calcom/lib/constants";
 
-import PageWrapper from "@components/PageWrapperAppDir";
-
 const validStatuses = ["upcoming", "recurring", "past", "cancelled", "unconfirmed"] as const;
 
 const querySchema = z.object({
@@ -43,14 +42,6 @@ const getData = async ({ params }: { params: Params }) => {
   };
 };
 
-export default async function BookingPageLayout({ params, children }: Props) {
-  const props = await getData({ params });
-
-  return (
-    <PageWrapper requiresLicense={false} getLayout={getLayout} nonce={undefined} themeBasis={null} {...props}>
-      {children}
-    </PageWrapper>
-  );
-}
+export default WithLayout({ getLayout, getData })<"L">;
 
 export const dynamic = "force-static";

apps/web/app/future/event-types/layout.tsx

@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/MainLayoutAppDir";
+
+export default WithLayout({ getLayout })<"L">;

apps/web/app/future/settings/admin/apps/layout.tsx

@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@components/auth/layouts/AdminLayoutAppDir";
+
+export default WithLayout({ getLayout })<"L">;

apps/web/app/future/settings/admin/flags/layout.tsx

@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@components/auth/layouts/AdminLayoutAppDir";
+
+export default WithLayout({ getLayout })<"L">;

apps/web/app/future/settings/admin/impersonation/layout.tsx

@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@components/auth/layouts/AdminLayoutAppDir";
+
+export default WithLayout({ getLayout })<"L">;

apps/web/app/future/settings/admin/oAuth/oAuthView/layout.tsx

@@ -0,0 +1,3 @@
+import { WithLayout } from "app/layoutHOC";
+
+export default WithLayout({ getLayout: null })<"L">;

apps/web/app/future/settings/admin/oAuth/page.tsx

@@ -0,0 +1,13 @@
+import LegacyPage from "@pages/settings/admin/oAuth/index";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@components/auth/layouts/AdminLayoutAppDir";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    () => "OAuth",
+    () => "Add new OAuth Clients"
+  );
+
+export default WithLayout({ getLayout, Page: LegacyPage })<"P">;

apps/web/app/future/settings/admin/organizations/layout.tsx

@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
+
+export default WithLayout({ getLayout })<"L">;

apps/web/app/future/settings/admin/page.tsx

@@ -0,0 +1,13 @@
+import LegacyPage from "@pages/settings/admin/index";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@components/auth/layouts/AdminLayoutAppDir";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    () => "Admin",
+    () => "admin_description"
+  );
+
+export default WithLayout({ getLayout, Page: LegacyPage })<"P">;

apps/web/app/future/settings/admin/users/layout.tsx

@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
+
+export default WithLayout({ getLayout })<"L">;

apps/web/app/future/teams/page.tsx

@@ -1,28 +1,19 @@
 import OldPage from "@pages/teams/index";
 import { ssrInit } from "app/_trpc/ssrInit";
-import { type Params } from "app/_types";
 import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
 import { type GetServerSidePropsContext } from "next";
-import { headers, cookies } from "next/headers";
 import { redirect } from "next/navigation";
 
 import { getLayout } from "@calcom/features/MainLayoutAppDir";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 
-import { buildLegacyCtx } from "@lib/buildLegacyCtx";
-
-import PageWrapper from "@components/PageWrapperAppDir";
-
 export const generateMetadata = async () =>
   await _generateMetadata(
     (t) => t("teams"),
     (t) => t("create_manage_teams_collaborative")
   );
 
-type PageProps = {
-  params: Params;
-};
-
 async function getData(context: Omit<GetServerSidePropsContext, "res" | "resolvedUrl">) {
   const ssr = await ssrInit();
   await ssr.viewer.me.prefetch();
@@ -41,24 +32,5 @@ async function getData(context: Omit<GetServerSidePropsContext, "res" | "resolve
   return { dehydratedState: await ssr.dehydrate() };
 }
 
-const Page = async ({ params }: PageProps) => {
-  const h = headers();
-  const nonce = h.get("x-nonce") ?? undefined;
-
-  const legacyCtx = buildLegacyCtx(h, cookies(), params);
-  // @ts-expect-error `req` of type '{ headers: ReadonlyHeaders; cookies: ReadonlyRequestCookies; }' is not assignable to `req` in `GetServerSidePropsContext`
-  const props = await getData(legacyCtx);
-
-  return (
-    <PageWrapper
-      getLayout={getLayout}
-      requiresLicense={false}
-      nonce={nonce}
-      themeBasis={null}
-      dehydratedState={props.dehydratedState}>
-      <OldPage />
-    </PageWrapper>
-  );
-};
-
-export default Page;
+// @ts-expect-error getData arg
+export default WithLayout({ getData, getLayout, Page: OldPage })<"P">;

apps/web/app/future/video/[uid]/page.tsx

@@ -1,30 +1,21 @@
 import OldPage from "@pages/video/[uid]";
 import { ssrInit } from "app/_trpc/ssrInit";
-import { type Params } from "app/_types";
 import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
 import MarkdownIt from "markdown-it";
 import { type GetServerSidePropsContext } from "next";
-import { headers, cookies } from "next/headers";
 import { redirect } from "next/navigation";
 
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { APP_NAME } from "@calcom/lib/constants";
 import prisma, { bookingMinimalSelect } from "@calcom/prisma";
 
-import { buildLegacyCtx } from "@lib/buildLegacyCtx";
-
-import PageWrapper from "@components/PageWrapperAppDir";
-
 export const generateMetadata = async () =>
   await _generateMetadata(
     () => `${APP_NAME} Video`,
     (t) => t("quick_video_meeting")
   );
 
-type PageProps = Readonly<{
-  params: Params;
-}>;
-
 const md = new MarkdownIt("default", { html: true, breaks: true, linkify: true });
 
 async function getData(context: Omit<GetServerSidePropsContext, "res" | "resolvedUrl">) {
@@ -107,24 +98,5 @@ async function getData(context: Omit<GetServerSidePropsContext, "res" | "resolve
   };
 }
 
-const Page = async ({ params }: PageProps) => {
-  const h = headers();
-  const nonce = h.get("x-nonce") ?? undefined;
-
-  const legacyCtx = buildLegacyCtx(headers(), cookies(), params);
-  // @ts-expect-error `req` of type '{ headers: ReadonlyHeaders; cookies: ReadonlyRequestCookies; }' is not assignable to `req` in `GetServerSidePropsContext`
-  const { dehydratedState, ...restProps } = await getData(legacyCtx);
-
-  return (
-    <PageWrapper
-      getLayout={null}
-      requiresLicense={false}
-      nonce={nonce}
-      themeBasis={null}
-      dehydratedState={dehydratedState}>
-      <OldPage {...restProps} />
-    </PageWrapper>
-  );
-};
-
-export default Page;
+// @ts-expect-error getData arg
+export default WithLayout({ getData, Page: OldPage, getLayout: null })<"P">;

apps/web/app/future/video/meeting-ended/[uid]/page.tsx

@@ -1,26 +1,17 @@
 import OldPage from "@pages/video/meeting-ended/[uid]";
-import { type Params } from "app/_types";
 import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
 import { type GetServerSidePropsContext } from "next";
-import { headers, cookies } from "next/headers";
 import { redirect } from "next/navigation";
 
 import prisma, { bookingMinimalSelect } from "@calcom/prisma";
 
-import { buildLegacyCtx } from "@lib/buildLegacyCtx";
-
-import PageWrapper from "@components/PageWrapperAppDir";
-
 export const generateMetadata = async () =>
   await _generateMetadata(
     () => "Meeting Unavailable",
     () => "Meeting Unavailable"
   );
 
-type PageProps = Readonly<{
-  params: Params;
-}>;
-
 async function getData(context: Omit<GetServerSidePropsContext, "res" | "resolvedUrl">) {
   const booking = await prisma.booking.findUnique({
     where: {
@@ -58,19 +49,5 @@ async function getData(context: Omit<GetServerSidePropsContext, "res" | "resolve
   };
 }
 
-const Page = async ({ params }: PageProps) => {
-  const h = headers();
-  const nonce = h.get("x-nonce") ?? undefined;
-
-  const legacyCtx = buildLegacyCtx(headers(), cookies(), params);
-  // @ts-expect-error `req` of type '{ headers: ReadonlyHeaders; cookies: ReadonlyRequestCookies; }' is not assignable to `req` in `GetServerSidePropsContext`
-  const props = await getData(legacyCtx);
-
-  return (
-    <PageWrapper getLayout={null} requiresLicense={false} nonce={nonce} themeBasis={null}>
-      <OldPage {...props} />
-    </PageWrapper>
-  );
-};
-
-export default Page;
+// @ts-expect-error getData arg
+export default WithLayout({ getData, Page: OldPage, getLayout: null })<"P">;

apps/web/app/future/video/meeting-not-started/[uid]/page.tsx

@@ -1,16 +1,12 @@
 import OldPage from "@pages/video/meeting-not-started/[uid]";
 import { type Params } from "app/_types";
 import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
 import { type GetServerSidePropsContext } from "next";
-import { headers, cookies } from "next/headers";
 import { redirect } from "next/navigation";
 
 import prisma, { bookingMinimalSelect } from "@calcom/prisma";
 
-import { buildLegacyCtx } from "@lib/buildLegacyCtx";
-
-import PageWrapper from "@components/PageWrapperAppDir";
-
 type PageProps = Readonly<{
   params: Params;
 }>;
@@ -51,19 +47,5 @@ async function getData(context: Omit<GetServerSidePropsContext, "res" | "resolve
   };
 }
 
-const Page = async ({ params }: PageProps) => {
-  const h = headers();
-  const nonce = h.get("x-nonce") ?? undefined;
-
-  const legacyCtx = buildLegacyCtx(headers(), cookies(), params);
-  // @ts-expect-error `req` of type '{ headers: ReadonlyHeaders; cookies: ReadonlyRequestCookies; }' is not assignable to `req` in `GetServerSidePropsContext`
-  const props = await getData(legacyCtx);
-
-  return (
-    <PageWrapper getLayout={null} requiresLicense={false} nonce={nonce} themeBasis={null}>
-      <OldPage {...props} />
-    </PageWrapper>
-  );
-};
-
-export default Page;
+// @ts-expect-error getData arg
+export default WithLayout({ getData, Page: OldPage, getLayout: null })<"P">;

apps/web/app/future/video/no-meeting-found/page.tsx

@@ -0,0 +1,20 @@
+import LegacyPage from "@pages/video/no-meeting-found";
+import { ssrInit } from "app/_trpc/ssrInit";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("no_meeting_found"),
+    (t) => t("no_meeting_found")
+  );
+
+const getData = async () => {
+  const ssr = await ssrInit();
+
+  return {
+    dehydratedState: await ssr.dehydrate(),
+  };
+};
+
+export default WithLayout({ getData, Page: LegacyPage, getLayout: null })<"P">;

apps/web/app/layoutHOC.tsx

@@ -0,0 +1,28 @@
+import type { LayoutProps, PageProps } from "app/_types";
+import { cookies, headers } from "next/headers";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+
+import PageWrapper from "@components/PageWrapperAppDir";
+
+type WithLayoutParams<T extends Record<string, any>> = {
+  getLayout: ((page: React.ReactElement) => React.ReactNode) | null;
+  Page?: (props: T) => React.ReactElement;
+  getData?: (arg: ReturnType<typeof buildLegacyCtx>) => Promise<T>;
+};
+
+export function WithLayout<T extends Record<string, any>>({ getLayout, getData, Page }: WithLayoutParams<T>) {
+  return async <P extends "P" | "L">(p: P extends "P" ? PageProps : LayoutProps) => {
+    const h = headers();
+    const nonce = h.get("x-nonce") ?? undefined;
+    const props = getData ? await getData(buildLegacyCtx(h, cookies(), p.params)) : ({} as T);
+
+    const children = "children" in p ? p.children : null;
+
+    return (
+      <PageWrapper getLayout={getLayout} requiresLicense={false} nonce={nonce} themeBasis={null} {...props}>
+        {Page ? <Page {...props} /> : children}
+      </PageWrapper>
+    );
+  };
+}

apps/web/components/PageWrapperAppDir.tsx

@@ -20,7 +20,7 @@ export interface CalPageWrapper {
 
 export type PageWrapperProps = Readonly<{
   getLayout: ((page: React.ReactElement) => ReactNode) | null;
-  children: React.ReactElement;
+  children: React.ReactNode;
   requiresLicense: boolean;
   nonce: string | undefined;
   themeBasis: string | null;
@@ -62,7 +62,7 @@ function PageWrapper(props: PageWrapperProps) {
           dangerouslySetInnerHTML={{ __html: `window.CalComPageStatus = '${pageStatus}'` }}
         />
         {getLayout(
-          props.requiresLicense ? <LicenseRequired>{props.children}</LicenseRequired> : props.children
+          props.requiresLicense ? <LicenseRequired>{props.children}</LicenseRequired> : <>{props.children}</>
         )}
       </>
     </AppProviders>