From 4e8d5cebcadbbed41daf16e7323d32fdfc35517c Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Thu, 24 Apr 2025 01:12:09 -0300 Subject: [PATCH] perf: ssr for /settings/organizations/teams/other (#20927) --- .../teams/other/(main-page)/loading.tsx | 5 +++ .../teams/other/(main-page)/page.tsx | 43 +++++++++++++++++++ .../teams/other/(main-page)/skeleton.tsx | 14 ++++++ .../organizations/teams/other/page.tsx | 25 ----------- .../pages/components/OtherTeamList.tsx | 6 ++- .../pages/components/OtherTeamsListing.tsx | 19 +++----- .../settings/other-team-listing-view.tsx | 16 ------- 7 files changed, 73 insertions(+), 55 deletions(-) create mode 100644 apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/teams/other/(main-page)/loading.tsx create mode 100644 apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/teams/other/(main-page)/page.tsx create mode 100644 apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/teams/other/(main-page)/skeleton.tsx delete mode 100644 apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/teams/other/page.tsx delete mode 100644 packages/features/ee/organizations/pages/settings/other-team-listing-view.tsx diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/teams/other/(main-page)/loading.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/teams/other/(main-page)/loading.tsx new file mode 100644 index 0000000000..78a721906f --- /dev/null +++ b/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 ; +} diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/teams/other/(main-page)/page.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/teams/other/(main-page)/page.tsx new file mode 100644 index 0000000000..f0e0154dd5 --- /dev/null +++ b/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 ( + + + + ); +}; + +export default Page; diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/teams/other/(main-page)/skeleton.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/teams/other/(main-page)/skeleton.tsx new file mode 100644 index 0000000000..358f9da2bb --- /dev/null +++ b/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 ( + + + + ); +} diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/teams/other/page.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/teams/other/page.tsx deleted file mode 100644 index e8f6f094c6..0000000000 --- a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/teams/other/page.tsx +++ /dev/null @@ -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 ( - - - - ); -}; - -export default Page; diff --git a/packages/features/ee/organizations/pages/components/OtherTeamList.tsx b/packages/features/ee/organizations/pages/components/OtherTeamList.tsx index b8be1d884a..90ea73deac 100644 --- a/packages/features/ee/organizations/pages/components/OtherTeamList.tsx +++ b/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>; pending?: boolean; } diff --git a/packages/features/ee/organizations/pages/components/OtherTeamsListing.tsx b/packages/features/ee/organizations/pages/components/OtherTeamsListing.tsx index a175668d20..7cf77ac23c 100644 --- a/packages/features/ee/organizations/pages/components/OtherTeamsListing.tsx +++ b/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>; +}; +export function OtherTeamsListing({ teams }: OtherTeamsListingProps) { const { t } = useLocale(); - const { data: teams, isPending, error } = trpc.viewer.organizations.listOtherTeams.useQuery(); - - if (isPending) { - return ; - } - return ( <> - {!!error && } - {teams && teams.length > 0 ? ( ) : ( diff --git a/packages/features/ee/organizations/pages/settings/other-team-listing-view.tsx b/packages/features/ee/organizations/pages/settings/other-team-listing-view.tsx deleted file mode 100644 index d4f88e2224..0000000000 --- a/packages/features/ee/organizations/pages/settings/other-team-listing-view.tsx +++ /dev/null @@ -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 ( - <> - - - ); -}; - -export default OtherTeamListingView;