refactor: make routing forms code more maintainable (calcom#21478)

* create layout for routing/forms

* refactor

* refators

* fix

* clean up

Author: hbjORbj

apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/layout.tsx

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+
+import FormProvider from "./FormProvider";
+
+export default async function Layout({ children }: { children: ReactNode }) {
+  return <FormProvider>{children}</FormProvider>;
+}

apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/page.tsx

@@ -5,29 +5,23 @@ import { cookies, headers } from "next/headers";
 
 import { routingFormsComponents } from "@calcom/app-store/routing-forms/pages/app-routing.client-config";
 import type { routingServerSidePropsConfig } from "@calcom/app-store/routing-forms/pages/app-routing.server-config";
-import Shell from "@calcom/features/shell/Shell";
 
 import { getServerSideProps } from "@lib/apps/routing-forms/[...pages]/getServerSideProps";
 import { buildLegacyCtx } from "@lib/buildLegacyCtx";
 
-import FormProvider from "./FormProvider";
-
 const normalizePages = (pages: string[] | string | undefined) => {
   const normalizedPages = Array.isArray(pages) ? pages : pages?.split("/") ?? [];
-  return {
-    mainPage: normalizedPages[0] ?? "forms",
-    subPages: normalizedPages.slice(1),
-  };
+  return normalizedPages[0];
 };
 
 export const generateMetadata = async ({ params }: { params: Promise<{ pages: string[] }> }) => {
-  const { mainPage } = normalizePages((await params).pages);
+  const mainPage = normalizePages((await params).pages);
   return await _generateMetadata(
     (t) => (mainPage === "routing-link" ? `Form | Cal.com Forms` : `${t("routing_forms")} | Cal.com Forms`),
     () => "",
     undefined,
     undefined,
-    `/apps/routing-forms/${(await params).pages.join("/")}`
+    `/routing/${(await params).pages.join("/")}`
   );
 };
 
@@ -38,25 +32,11 @@ const getData = withAppDirSsr<GetServerSidePropsResult>(getServerSideProps);
 const ServerPage = async ({ params, searchParams }: ServerPageProps) => {
   const context = buildLegacyCtx(await headers(), await cookies(), await params, await searchParams);
   const props = await getData(context);
-  const { mainPage } = normalizePages((await params).pages);
+  const mainPage = normalizePages((await params).pages);
 
   const Component = await routingFormsComponents[mainPage as keyof typeof routingFormsComponents]();
-  const FinalComponent = () => (
-    <FormProvider>
-      <Component {...(props as any)} />
-    </FormProvider>
-  );
-
-  // TODO: we should really be using layout for this.
-  if (mainPage === "forms") {
-    return (
-      <Shell withoutMain>
-        <FinalComponent />
-      </Shell>
-    );
-  }
 
-  return <FinalComponent />;
+  return <Component {...(props as any)} />;
 };
 
 export default ServerPage;

apps/web/app/(use-page-wrapper)/apps/routing-forms/forms/[[...pages]]/page.tsx

@@ -0,0 +1,21 @@
+import { _generateMetadata } from "app/_utils";
+
+import Forms from "@calcom/app-store/routing-forms/pages/forms/[...appPages]";
+
+export const generateMetadata = async ({ params }: { params: Promise<{ pages: string[] }> }) => {
+  const pages = (await params).pages;
+
+  return await _generateMetadata(
+    (t) => `${t("routing_forms")} | Cal.com Forms`,
+    () => "",
+    undefined,
+    undefined,
+    `/routing/forms/${pages?.length > 0 ? pages.join("/") : ""}`
+  );
+};
+
+const ServerPage = async () => {
+  return <Forms appUrl="/routing" />;
+};
+
+export default ServerPage;

apps/web/app/(use-page-wrapper)/apps/routing-forms/forms/layout.tsx

@@ -0,0 +1,23 @@
+import { cookies, headers } from "next/headers";
+import { redirect } from "next/navigation";
+import type { ReactNode } from "react";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import Shell from "@calcom/features/shell/Shell";
+
+import { buildLegacyRequest } from "@lib/buildLegacyCtx";
+
+import FormProvider from "../[...pages]/FormProvider";
+
+export default async function Layout({ children }: { children: ReactNode }) {
+  const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
+
+  if (!session?.user?.id) {
+    redirect("/auth/login");
+  }
+  return (
+    <Shell withoutMain={true}>
+      <FormProvider>{children}</FormProvider>
+    </Shell>
+  );
+}

apps/web/lib/apps/routing-forms/[...pages]/getServerSideProps.ts

@@ -1,7 +1,6 @@
 import type { GetServerSidePropsResult, GetServerSidePropsContext } from "next";
 import { z } from "zod";
 
-import { getAppWithMetadata } from "@calcom/app-store/_appRegistry";
 import { routingServerSidePropsConfig } from "@calcom/app-store/routing-forms/pages/app-routing.server-config";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import prisma from "@calcom/prisma";
@@ -33,13 +32,6 @@ export async function getServerSideProps(
 
   const session = await getServerSession({ req });
   const user = session?.user;
-  const app = await getAppWithMetadata({ slug: "routing-forms" });
-
-  if (!app) {
-    return {
-      notFound: true,
-    };
-  }
 
   const result = await getServerSideProps(context as AppGetServerSidePropsContext, prisma, user);
 
@@ -53,7 +45,7 @@ export async function getServerSideProps(
 
   return {
     props: {
-      appUrl: app.simplePath || `/apps/routing-forms`,
+      appUrl: "/routing",
       ...result.props,
     },
   };

packages/app-store/routing-forms/pages/app-routing.client-config.tsx

@@ -1,7 +1,6 @@
 export const routingFormsComponents = {
   "form-edit": () => import("./form-edit/[...appPages]").then((mod) => mod.default),
   "route-builder": () => import("./route-builder/[...appPages]").then((mod) => mod.default),
-  forms: () => import("./forms/[...appPages]").then((mod) => mod.default),
   "routing-link": () => import("./routing-link/[...appPages]").then((mod) => mod.default),
   reporting: () => import("./reporting/[...appPages]").then((mod) => mod.default),
   "incomplete-booking": () => import("./incomplete-booking/[...appPages]").then((mod) => mod.default),

packages/app-store/routing-forms/pages/app-routing.server-config.tsx

@@ -3,11 +3,9 @@ import "server-only";
 import type { AppGetServerSideProps } from "@calcom/types/AppGetServerSideProps";
 
 import { getServerSidePropsForSingleFormView as getServerSidePropsSingleForm } from "../components/getServerSidePropsSingleForm";
-import { getServerSideProps as getServerSidePropsForms } from "./forms/getServerSideProps";
 import { getServerSideProps as getServerSidePropsRoutingLink } from "./routing-link/getServerSideProps";
 
 export const routingServerSidePropsConfig: Record<string, AppGetServerSideProps> = {
-  forms: getServerSidePropsForms,
   "form-edit": getServerSidePropsSingleForm,
   "route-builder": getServerSidePropsSingleForm,
   "routing-link": getServerSidePropsRoutingLink,

packages/app-store/routing-forms/pages/forms/[...appPages].tsx

@@ -26,13 +26,10 @@ import { Icon } from "@calcom/ui/components/icon";
 import { List, ListLinkItem } from "@calcom/ui/components/list";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 
-import type { inferSSRProps } from "@lib/types/inferSSRProps";
-
 import type { SetNewFormDialogState, NewFormDialogState } from "../../components/FormActions";
 import { FormAction, FormActionsDropdown, FormActionsProvider } from "../../components/FormActions";
 import { isFallbackRoute } from "../../lib/isFallbackRoute";
 import type { RoutingFormWithResponseCount } from "../../types/types";
-import { getServerSideProps } from "./getServerSideProps";
 
 function NewFormButton({ setNewFormDialogState }: { setNewFormDialogState: SetNewFormDialogState }) {
   const { t } = useLocale();
@@ -47,11 +44,7 @@ function NewFormButton({ setNewFormDialogState }: { setNewFormDialogState: SetNe
   );
 }
 
-export default function RoutingForms({
-  appUrl,
-}: inferSSRProps<typeof getServerSideProps> & {
-  appUrl: string;
-}) {
+export default function RoutingForms({ appUrl }: { appUrl: string }) {
   const { t } = useLocale();
   const { hasPaidPlan } = useHasPaidPlan();
   const routerQuery = useRouterQuery();
@@ -332,5 +325,3 @@ export default function RoutingForms({
     </LicenseRequired>
   );
 }
-
-export { getServerSideProps };