fix: use server fetched user for all sub pages in /getting-started (#23064)

* use server fetched user for all sub pages

* Wrap setAnyInstalledVideoApps call in useEffect

---------

Co-authored-by: Alex van Andel <[email protected]>

Author: hbjORbj

apps/web/components/getting-started/steps-views/ConnectedVideoStep.tsx

@@ -1,11 +1,11 @@
 import { type TFunction } from "i18next";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import type { Dispatch, SetStateAction } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { userMetadata } from "@calcom/prisma/zod-utils";
 import { trpc } from "@calcom/trpc/react";
-import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
+import type { RouterOutputs } from "@calcom/trpc/react";
 import classNames from "@calcom/ui/classNames";
 import { Button } from "@calcom/ui/components/button";
 import { List } from "@calcom/ui/components/list";
@@ -16,14 +16,17 @@ import { StepConnectionLoader } from "../components/StepConnectionLoader";
 interface ConnectedAppStepProps {
   nextStep: () => void;
   isPageLoading: boolean;
+  user: RouterOutputs["viewer"]["me"]["get"];
 }
 
 const ConnectedVideoStepInner = ({
   t,
   setAnyInstalledVideoApps,
+  user,
 }: {
   t: TFunction;
   setAnyInstalledVideoApps: Dispatch<SetStateAction<boolean>>;
+  user: RouterOutputs["viewer"]["me"]["get"];
 }) => {
   const { data: queryConnectedVideoApps, isPending } = trpc.viewer.apps.integrations.useQuery({
     variant: "conferencing",
@@ -39,25 +42,20 @@ const ConnectedVideoStepInner = ({
     sortByMostPopular: true,
     sortByInstalledFirst: true,
   });
-  // we want to start loading immediately, after all this is a hook.
-  const { data, status } = useMeQuery();
-
-  if (isPending) {
-    return <StepConnectionLoader />;
-  }
 
   const hasAnyInstalledVideoApps = queryConnectedVideoApps?.items.some(
     (item) => item.userCredentialIds.length > 0
   );
-  if (hasAnyInstalledVideoApps) {
-    setAnyInstalledVideoApps(true);
-  }
 
-  if (status !== "success") {
+  useEffect(() => {
+    setAnyInstalledVideoApps(Boolean(hasAnyInstalledVideoApps));
+  }, [hasAnyInstalledVideoApps, setAnyInstalledVideoApps]);
+
+  if (isPending) {
     return <StepConnectionLoader />;
   }
 
-  const result = userMetadata.safeParse(data?.metadata);
+  const result = userMetadata.safeParse(user.metadata);
   if (!result.success) {
     return <StepConnectionLoader />;
   }
@@ -91,12 +89,12 @@ const ConnectedVideoStepInner = ({
 };
 
 const ConnectedVideoStep = (props: ConnectedAppStepProps) => {
-  const { nextStep, isPageLoading } = props;
+  const { nextStep, isPageLoading, user } = props;
   const { t } = useLocale();
   const [hasAnyInstalledVideoApps, setAnyInstalledVideoApps] = useState(false);
   return (
     <>
-      <ConnectedVideoStepInner setAnyInstalledVideoApps={setAnyInstalledVideoApps} t={t} />
+      <ConnectedVideoStepInner setAnyInstalledVideoApps={setAnyInstalledVideoApps} t={t} user={user} />
       <Button
         EndIcon="arrow-right"
         data-testid="save-video-button"

apps/web/components/getting-started/steps-views/UserProfile.tsx

@@ -10,6 +10,7 @@ import { md } from "@calcom/lib/markdownIt";
 import { telemetryEventTypes } from "@calcom/lib/telemetry";
 import turndown from "@calcom/lib/turndownService";
 import { trpc } from "@calcom/trpc/react";
+import type { RouterOutputs } from "@calcom/trpc/react";
 import { UserAvatar } from "@calcom/ui/components/avatar";
 import { Button } from "@calcom/ui/components/button";
 import { Editor } from "@calcom/ui/components/editor";
@@ -21,8 +22,11 @@ type FormData = {
   bio: string;
 };
 
-const UserProfile = () => {
-  const [user] = trpc.viewer.me.get.useSuspenseQuery();
+interface UserProfileProps {
+  user: RouterOutputs["viewer"]["me"]["get"];
+}
+
+const UserProfile = ({ user }: UserProfileProps) => {
   const { t } = useLocale();
   const avatarRef = useRef<HTMLInputElement>(null);
   const { setValue, handleSubmit, getValues } = useForm<FormData>({

apps/web/components/getting-started/steps-views/UserSettings.tsx

@@ -13,6 +13,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useTelemetry } from "@calcom/lib/hooks/useTelemetry";
 import { telemetryEventTypes } from "@calcom/lib/telemetry";
 import { trpc } from "@calcom/trpc/react";
+import type { RouterOutputs } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
 import { Input } from "@calcom/ui/components/form";
 
@@ -21,11 +22,11 @@ import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
 interface IUserSettingsProps {
   nextStep: () => void;
   hideUsername?: boolean;
+  user: RouterOutputs["viewer"]["me"]["get"];
 }
 
 const UserSettings = (props: IUserSettingsProps) => {
-  const { nextStep } = props;
-  const [user] = trpc.viewer.me.get.useSuspenseQuery();
+  const { nextStep, user } = props;
   const { t } = useLocale();
   const { setTimezone: setSelectedTimeZone, timezone: selectedTimeZone } = useTimePreferences();
   const telemetry = useTelemetry();

apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx

@@ -162,20 +162,20 @@ const OnboardingPage = (props: PageProps) => {
             <StepCard>
               <Suspense fallback={<Icon name="loader" />}>
                 {currentStep === "user-settings" && (
-                  <UserSettings nextStep={goToNextStep} hideUsername={from === "signup"} />
+                  <UserSettings nextStep={goToNextStep} hideUsername={from === "signup"} user={user} />
                 )}
                 {currentStep === "connected-calendar" && (
                   <ConnectedCalendars nextStep={goToNextStep} isPageLoading={isNextStepLoading} />
                 )}
 
                 {currentStep === "connected-video" && (
-                  <ConnectedVideoStep nextStep={goToNextStep} isPageLoading={isNextStepLoading} />
+                  <ConnectedVideoStep nextStep={goToNextStep} isPageLoading={isNextStepLoading} user={user} />
                 )}
 
                 {currentStep === "setup-availability" && (
                   <SetupAvailability nextStep={goToNextStep} defaultScheduleId={user.defaultScheduleId} />
                 )}
-                {currentStep === "user-profile" && <UserProfile />}
+                {currentStep === "user-profile" && <UserProfile user={user} />}
               </Suspense>
             </StepCard>