perf: server side render settings/organizations/general

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

@@ -1,7 +1,15 @@
 import { _generateMetadata, getTranslate } from "app/_utils";
+import { headers, cookies } from "next/headers";
+import { redirect } from "next/navigation";
 
+import { checkAdminOrOwner } from "@calcom/features/auth/lib/checkAdminOrOwner";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import LegacyPage from "@calcom/features/ee/organizations/pages/settings/general";
 import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+import { createContextInner } from "@calcom/trpc/server/createContext";
+import { appRouter } from "@calcom/trpc/server/routers/_app";
+
+import { buildLegacyRequest } from "@lib/buildLegacyCtx";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -13,11 +21,31 @@ export const generateMetadata = async () =>
   );
 
 const Page = async () => {
-  const t = await getTranslate();
+  const req = buildLegacyRequest(await headers(), await cookies());
+  const [t, session] = await Promise.all([getTranslate(), getServerSession({ req })]);
+
+  if (!session?.user?.id) {
+    redirect("/auth/login");
+  }
+
+  const ctx = await createContextInner({ session, locale: session.user.locale ?? "en" });
+  const caller = appRouter.createCaller(ctx);
+
+  const [user, currentOrg] = await Promise.all([
+    caller.viewer.me.get(),
+    caller.viewer.organizations.listCurrent(),
+  ]);
+
+  if (!currentOrg) {
+    redirect("/getting-started");
+  }
+
+  const isAdminOrOwner = checkAdminOrOwner(session.user.org?.role);
+  const localeProp = user?.locale ?? "en";
 
   return (
     <SettingsHeader title={t("general")} description={t("general_description")} borderInShellHeader={true}>
-      <LegacyPage />
+      <LegacyPage currentOrg={currentOrg} isAdminOrOwner={isAdminOrOwner} localeProp={localeProp} />
     </SettingsHeader>
   );
 };

packages/features/ee/organizations/pages/settings/general.tsx

@@ -1,11 +1,8 @@
 "use client";
 
-import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
-import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 
-import { checkAdminOrOwner } from "@calcom/features/auth/lib/checkAdminOrOwner";
 import { TimezoneSelect } from "@calcom/features/components/timezone-select";
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import SectionBottomActions from "@calcom/features/settings/SectionBottomActions";
@@ -45,43 +42,22 @@ interface GeneralViewProps {
   localeProp: string;
 }
 
-const OrgGeneralView = () => {
+interface OrgGeneralViewProps {
+  currentOrg: NonNullable<RouterOutputs["viewer"]["organizations"]["listCurrent"]>;
+  isAdminOrOwner: boolean;
+  localeProp: string;
+}
+
+const OrgGeneralView = ({ currentOrg, isAdminOrOwner, localeProp }: OrgGeneralViewProps) => {
   const { t } = useLocale();
   const router = useRouter();
-  const session = useSession();
-  const isAdminOrOwner = checkAdminOrOwner(session.data?.user?.org?.role);
-
-  const {
-    data: currentOrg,
-    isPending,
-    error,
-  } = trpc.viewer.organizations.listCurrent.useQuery(undefined, {});
-  const { data: user } = trpc.viewer.me.get.useQuery();
-
-  useEffect(
-    function refactorMeWithoutEffect() {
-      if (error) {
-        router.replace("/enterprise");
-      }
-    },
-    [error]
-  );
-
-  if (isPending) return <SkeletonLoader />;
-  if (!currentOrg) {
-    return null;
-  }
 
   return (
     <LicenseRequired>
-      <GeneralView
-        currentOrg={currentOrg}
-        isAdminOrOwner={isAdminOrOwner}
-        localeProp={user?.locale ?? "en"}
-      />
-
-      <LockEventTypeSwitch currentOrg={currentOrg} isAdminOrOwner={!!isAdminOrOwner} />
-      <NoSlotsNotificationSwitch currentOrg={currentOrg} isAdminOrOwner={!!isAdminOrOwner} />
+      <GeneralView currentOrg={currentOrg} isAdminOrOwner={isAdminOrOwner} localeProp={localeProp} />
+
+      <LockEventTypeSwitch currentOrg={currentOrg} isAdminOrOwner={isAdminOrOwner} />
+      <NoSlotsNotificationSwitch currentOrg={currentOrg} isAdminOrOwner={isAdminOrOwner} />
     </LicenseRequired>
   );
 };