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

* create layout for routing/forms * refactor * refators * fix * clean up
2025-05-24 22:44:05 +00:00
parent d43afe7dbd
commit 1c3ad9dad6
9 changed files with 58 additions and 67 deletions
@@ -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>;
+}
@@ -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;
@@ -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;
@@ -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>
+  );
+}
@@ -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,
    },
  };
@@ -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),
@@ -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,
@@ -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 };
@@ -1,20 +0,0 @@
-import type { AppGetServerSidePropsContext, AppPrisma, AppUser } from "@calcom/types/AppGetServerSideProps";
-
-export const getServerSideProps = async function getServerSideProps(
-  context: AppGetServerSidePropsContext,
-  prisma: AppPrisma,
-  user: AppUser
-) {
-  if (!user) {
-    return {
-      redirect: {
-        permanent: false,
-        destination: "/auth/login",
-      },
-    };
-  }
-
-  return {
-    props: {},
-  };
-};