From 8dd05dda709cfea6d296eab7c5d0f3a0cffe9217 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Fri, 31 Jan 2025 20:12:12 +0000
Subject: [PATCH] perf: move /teams route to (main-nav) route group (#19037)

---
 .../(main-nav)/teams/page.tsx                 | 35 +++++++++++++++
 apps/web/app/teams/page.tsx                   | 20 ---------
 apps/web/modules/teams/teams-view.tsx         | 43 +++++++------------
 3 files changed, 50 insertions(+), 48 deletions(-)
 create mode 100644 apps/web/app/(use-page-wrapper)/(main-nav)/teams/page.tsx
 delete mode 100644 apps/web/app/teams/page.tsx

diff --git a/apps/web/app/(use-page-wrapper)/(main-nav)/teams/page.tsx b/apps/web/app/(use-page-wrapper)/(main-nav)/teams/page.tsx
new file mode 100644
index 0000000000..7970b3825a
--- /dev/null
+++ b/apps/web/app/(use-page-wrapper)/(main-nav)/teams/page.tsx
@@ -0,0 +1,35 @@
+import { ShellMainAppDir } from "app/(use-page-wrapper)/(main-nav)/ShellMainAppDir";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { PageProps as ServerPageProps } from "app/_types";
+import { _generateMetadata, getTranslate } from "app/_utils";
+import { cookies, headers } from "next/headers";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+import { getServerSideProps } from "@lib/teams/getServerSideProps";
+
+import type { PageProps as ClientPageProps } from "~/teams/teams-view";
+import TeamsView, { TeamsCTA } from "~/teams/teams-view";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("teams"),
+    (t) => t("create_manage_teams_collaborative")
+  );
+
+const getData = withAppDirSsr<ClientPageProps>(getServerSideProps);
+
+const ServerPage = async ({ params, searchParams }: ServerPageProps) => {
+  const context = buildLegacyCtx(headers(), cookies(), params, searchParams);
+  const props = await getData(context);
+  const t = await getTranslate();
+
+  return (
+    <ShellMainAppDir
+      CTA={<TeamsCTA />}
+      heading={t("teams")}
+      subtitle={t("create_manage_teams_collaborative")}>
+      <TeamsView {...props} />;
+    </ShellMainAppDir>
+  );
+};
+export default ServerPage;
diff --git a/apps/web/app/teams/page.tsx b/apps/web/app/teams/page.tsx
deleted file mode 100644
index 5008c9ebd8..0000000000
--- a/apps/web/app/teams/page.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { withAppDirSsr } from "app/WithAppDirSsr";
-import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
-
-import { getServerSideProps } from "@lib/teams/getServerSideProps";
-
-import type { PageProps } from "~/teams/teams-view";
-import Page from "~/teams/teams-view";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => t("teams"),
-    (t) => t("create_manage_teams_collaborative")
-  );
-
-export default WithLayout({
-  getData: withAppDirSsr<PageProps>(getServerSideProps),
-  getLayout: null,
-  Page,
-})<"P">;
diff --git a/apps/web/modules/teams/teams-view.tsx b/apps/web/modules/teams/teams-view.tsx
index 4043e57776..24e2ae676b 100644
--- a/apps/web/modules/teams/teams-view.tsx
+++ b/apps/web/modules/teams/teams-view.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { TeamsListing } from "@calcom/features/ee/teams/components";
-import Shell from "@calcom/features/shell/Shell";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -11,36 +10,24 @@ import { Button } from "@calcom/ui";
 import type { getServerSideProps } from "@lib/teams/getServerSideProps";
 
 export type PageProps = inferSSRProps<typeof getServerSideProps>;
-function Teams(props: PageProps) {
+
+export const TeamsCTA = () => {
   const { t } = useLocale();
   const [user] = trpc.viewer.me.useSuspenseQuery();
+  return !user.organizationId || user.organization.isOrgAdmin ? (
+    <Button
+      data-testid="new-team-btn"
+      variant="fab"
+      StartIcon="plus"
+      type="button"
+      href={`${WEBAPP_URL}/settings/teams/new?returnTo=${WEBAPP_URL}/teams`}>
+      {t("new")}
+    </Button>
+  ) : null;
+};
 
-  return (
-    <Shell
-      withoutMain={false}
-      withoutSeo={true}
-      heading={t("teams")}
-      subtitle={t("create_manage_teams_collaborative")}
-      title={t("teams")}
-      description={t("create_manage_teams_collaborative")}
-      hideHeadingOnMobile
-      CTA={
-        (!user.organizationId || user.organization.isOrgAdmin) && (
-          <Button
-            data-testid="new-team-btn"
-            variant="fab"
-            StartIcon="plus"
-            type="button"
-            href={`${WEBAPP_URL}/settings/teams/new?returnTo=${WEBAPP_URL}/teams`}>
-            {t("new")}
-          </Button>
-        )
-      }>
-      <TeamsListing />
-    </Shell>
-  );
+function Teams(props: PageProps) {
+  return <TeamsListing />;
 }
 
-Teams.requiresLicense = false;
-
 export default Teams;