perf: ssr for /settings/organizations/teams/other (#20927)

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/teams/other/(main-page)/loading.tsx

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

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

@@ -0,0 +1,43 @@
+import { _generateMetadata, getTranslate } from "app/_utils";
+import { cookies, headers } from "next/headers";
+import { redirect } from "next/navigation";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { OtherTeamsListing } from "@calcom/features/ee/organizations/pages/components/OtherTeamsListing";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+import { OrganizationRepository } from "@calcom/lib/server/repository/organization";
+
+import { buildLegacyRequest } from "@lib/buildLegacyCtx";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("org_admin_other_teams"),
+    (t) => t("org_admin_other_teams_description"),
+    undefined,
+    undefined,
+    "/settings/organizations/teams/other"
+  );
+
+const Page = async () => {
+  const t = await getTranslate();
+  const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
+
+  if (!session?.user?.id) {
+    redirect("/auth/login");
+  }
+  const organizationId = session?.user?.org?.id;
+  const otherTeams = organizationId
+    ? await OrganizationRepository.findTeamsInOrgIamNotPartOf({
+        userId: session?.user.id,
+        parentId: organizationId,
+      })
+    : [];
+
+  return (
+    <SettingsHeader title={t("org_admin_other_teams")} description={t("org_admin_other_teams_description")}>
+      <OtherTeamsListing teams={otherTeams} />
+    </SettingsHeader>
+  );
+};
+
+export default Page;

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/teams/other/(main-page)/skeleton.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import SkeletonLoaderTeamList from "@calcom/features/ee/teams/components/SkeletonloaderTeamList";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+
+export function SkeletonLoader() {
+  const { t } = useLocale();
+  return (
+    <SettingsHeader title={t("org_admin_other_teams")} description={t("org_admin_other_teams_description")}>
+      <SkeletonLoaderTeamList />
+    </SettingsHeader>
+  );
+}

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

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

packages/features/ee/organizations/pages/components/OtherTeamList.tsx

@@ -1,14 +1,16 @@
+"use client";
+
 import { useState } from "react";
 
 import { trackFormbricksAction } from "@calcom/lib/formbricks-client";
-import type { RouterOutputs } from "@calcom/trpc/react";
+import type { OrganizationRepository } from "@calcom/lib/server/repository/organization";
 import { trpc } from "@calcom/trpc/react";
 import { showToast } from "@calcom/ui/components/toast";
 
 import OtherTeamListItem from "./OtherTeamListItem";
 
 interface Props {
-  teams: RouterOutputs["viewer"]["organizations"]["listOtherTeams"];
+  teams: Awaited<ReturnType<typeof OrganizationRepository.findTeamsInOrgIamNotPartOf>>;
   pending?: boolean;
 }
 

packages/features/ee/organizations/pages/components/OtherTeamsListing.tsx

@@ -1,24 +1,19 @@
-import SkeletonLoaderTeamList from "@calcom/ee/teams/components/SkeletonloaderTeamList";
+"use client";
+
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc/react";
-import { Alert } from "@calcom/ui/components/alert";
+import type { OrganizationRepository } from "@calcom/lib/server/repository/organization";
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 
 import OtherTeamList from "./OtherTeamList";
 
-export function OtherTeamsListing() {
+type OtherTeamsListingProps = {
+  teams: Awaited<ReturnType<typeof OrganizationRepository.findTeamsInOrgIamNotPartOf>>;
+};
+export function OtherTeamsListing({ teams }: OtherTeamsListingProps) {
   const { t } = useLocale();
 
-  const { data: teams, isPending, error } = trpc.viewer.organizations.listOtherTeams.useQuery();
-
-  if (isPending) {
-    return <SkeletonLoaderTeamList />;
-  }
-
   return (
     <>
-      {!!error && <Alert severity="error" title={error.message} />}
-
       {teams && teams.length > 0 ? (
         <OtherTeamList teams={teams} />
       ) : (

packages/features/ee/organizations/pages/settings/other-team-listing-view.tsx

@@ -1,16 +0,0 @@
-"use client";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-
-import { OtherTeamsListing } from "./../components/OtherTeamsListing";
-
-const OtherTeamListingView = (): React.ReactElement => {
-  const { t } = useLocale();
-  return (
-    <>
-      <OtherTeamsListing />
-    </>
-  );
-};
-
-export default OtherTeamListingView;