perf: SSR for /teams (#20824)

* finish

* improve

* refactor

* add revalidations

* /settings/teams is not needed

* refactor

* rename

* redundant type casting

apps/web/app/(use-page-wrapper)/(main-nav)/teams/CTA.tsx

@@ -1,15 +1,12 @@
 "use client";
 
-import { TeamsListing } from "@calcom/features/ee/teams/components";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
 
 export const TeamsCTA = () => {
   const { t } = useLocale();
-  const [user] = trpc.viewer.me.get.useSuspenseQuery();
-  return !user.organizationId || user.organization.isOrgAdmin ? (
+  return (
     <Button
       data-testid="new-team-btn"
       variant="fab"
@@ -18,11 +15,5 @@ export const TeamsCTA = () => {
       href={`${WEBAPP_URL}/settings/teams/new?returnTo=${WEBAPP_URL}/teams`}>
       {t("new")}
     </Button>
-  ) : null;
+  );
 };
-
-function Teams() {
-  return <TeamsListing />;
-}
-
-export default Teams;

apps/web/app/(use-page-wrapper)/(main-nav)/teams/actions.ts

@@ -0,0 +1,7 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+
+export async function revalidateTeamsList() {
+  revalidatePath("/teams");
+}

apps/web/app/(use-page-wrapper)/(main-nav)/teams/loading.tsx

@@ -0,0 +1,5 @@
+import { TeamsListSkeleton } from "./skeleton";
+
+export default function Loading() {
+  return <TeamsListSkeleton />;
+}

apps/web/app/(use-page-wrapper)/(main-nav)/teams/page.tsx

@@ -8,7 +8,7 @@ import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 
 import { buildLegacyRequest } from "@lib/buildLegacyCtx";
 
-import TeamsView, { TeamsCTA } from "~/teams/teams-view";
+import { ServerTeamsListing } from "./server-page";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -30,13 +30,11 @@ const ServerPage = async ({ searchParams: _searchParams }: ServerPageProps) => {
   }
 
   const t = await getTranslate();
+  const { Main, CTA } = await ServerTeamsListing({ searchParams });
 
   return (
-    <ShellMainAppDir
-      CTA={<TeamsCTA />}
-      heading={t("teams")}
-      subtitle={t("create_manage_teams_collaborative")}>
-      <TeamsView />
+    <ShellMainAppDir CTA={CTA} heading={t("teams")} subtitle={t("create_manage_teams_collaborative")}>
+      {Main}
     </ShellMainAppDir>
   );
 };

apps/web/app/(use-page-wrapper)/(main-nav)/teams/server-page.tsx

@@ -0,0 +1,54 @@
+import { createRouterCaller } from "app/_trpc/context";
+import type { SearchParams } from "app/_types";
+
+import { TeamsListing } from "@calcom/features/ee/teams/components/TeamsListing";
+import { CreationSource } from "@calcom/prisma/enums";
+import { meRouter } from "@calcom/trpc/server/routers/viewer/me/_router";
+import { viewerTeamsRouter } from "@calcom/trpc/server/routers/viewer/teams/_router";
+
+import { TRPCError } from "@trpc/server";
+
+import { TeamsCTA } from "./CTA";
+
+export const ServerTeamsListing = async ({ searchParams }: { searchParams: SearchParams }) => {
+  const token = Array.isArray(searchParams?.token) ? searchParams.token[0] : searchParams?.token;
+
+  const [teamsCaller, meCaller] = await Promise.all([
+    createRouterCaller(viewerTeamsRouter),
+    createRouterCaller(meRouter),
+  ]);
+
+  let teamNameFromInvite,
+    errorMsgFromInvite = null;
+
+  if (token) {
+    try {
+      teamNameFromInvite = await teamsCaller.inviteMemberByToken({
+        token,
+        creationSource: CreationSource.WEBAPP,
+      });
+    } catch (e) {
+      errorMsgFromInvite = "Error while fetching teams";
+      if (e instanceof TRPCError) errorMsgFromInvite = e.message;
+    }
+  }
+
+  const [user, teams] = await Promise.all([
+    meCaller.get(),
+    teamsCaller.list({
+      includeOrgs: true,
+    }),
+  ]);
+
+  return {
+    Main: (
+      <TeamsListing
+        teams={teams}
+        user={user}
+        teamNameFromInvite={teamNameFromInvite ?? null}
+        errorMsgFromInvite={errorMsgFromInvite}
+      />
+    ),
+    CTA: !user.organizationId || user.organization.isOrgAdmin ? <TeamsCTA /> : null,
+  };
+};

apps/web/app/(use-page-wrapper)/(main-nav)/teams/skeleton.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { ShellMainAppDir } from "app/(use-page-wrapper)/(main-nav)/ShellMainAppDir";
+import { TeamsCTA } from "app/(use-page-wrapper)/(main-nav)/teams/CTA";
+
+import SkeletonLoaderTeamList from "@calcom/features/ee/teams/components/SkeletonloaderTeamList";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+
+export const TeamsListSkeleton = () => {
+  const { t } = useLocale();
+  return (
+    <ShellMainAppDir
+      heading={t("teams")}
+      subtitle={t("create_manage_teams_collaborative")}
+      CTA={<TeamsCTA />}>
+      <SkeletonLoaderTeamList />
+    </ShellMainAppDir>
+  );
+};

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/teams/page.tsx

@@ -1,25 +0,0 @@
-import { _generateMetadata, getTranslate } from "app/_utils";
-
-import LegacyPage from "@calcom/features/ee/teams/pages/team-listing-view";
-import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => t("teams"),
-    (t) => t("create_manage_teams_collaborative"),
-    undefined,
-    undefined,
-    "/settings/teams"
-  );
-
-const Page = async () => {
-  const t = await getTranslate();
-
-  return (
-    <SettingsHeader title={t("teams")} description={t("create_manage_teams_collaborative")}>
-      <LegacyPage />
-    </SettingsHeader>
-  );
-};
-
-export default Page;

apps/web/middleware.ts

@@ -21,6 +21,7 @@ export const POST_METHODS_ALLOWED_APP_ROUTES = [
   "/settings/my-account/general",
   "/settings/developer/webhooks",
   "/settings/developer/api-keys",
+  "/teams",
 ];
 export function checkPostMethod(req: NextRequest) {
   const pathname = req.nextUrl.pathname;
@@ -194,6 +195,7 @@ export const config = {
     "/settings/my-account/general",
     "/settings/developer/webhooks",
     "/settings/developer/api-keys",
+    "/teams",
   ],
 };