move locationOptions from getServerSideProps a trpc query

Author: SomayChauhan

apps/web/components/apps/installation/EventTypeConferencingAppSettings.tsx

@@ -5,14 +5,28 @@ import type { UseFormGetValues, UseFormSetValue, Control, FormState } from "reac
 
 import type { LocationFormValues } from "@calcom/features/eventtypes/lib/types";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { SchedulingType } from "@calcom/prisma/client";
+import { trpc } from "@calcom/trpc/react";
+import { SkeletonContainer, SkeletonText } from "@calcom/ui";
 import { Skeleton, Label } from "@calcom/ui";
 
+import { QueryCell } from "@lib/QueryCell";
+
 import type { TFormType } from "@components/apps/installation/ConfigureStepCard";
+import type { TLocationOptions } from "@components/eventtype/Locations";
 import type { TEventTypeLocation } from "@components/eventtype/Locations";
 import Locations from "@components/eventtype/Locations";
 import type { SingleValueLocationOption } from "@components/ui/form/LocationSelect";
 
-const EventTypeConferencingAppSettings = ({ eventType, slug }: { eventType: TEventType; slug: string }) => {
+const LocationsWrapper = ({
+  eventType,
+  slug,
+}: {
+  eventType: TEventType & {
+    locationOptions?: TLocationOptions;
+  };
+  slug: string;
+}) => {
   const { t } = useLocale();
   const formMethods = useFormContext<TFormType>();
 
@@ -54,4 +68,51 @@ const EventTypeConferencingAppSettings = ({ eventType, slug }: { eventType: TEve
   );
 };
 
+const EventTypeConferencingAppSettings = ({ eventType, slug }: { eventType: TEventType; slug: string }) => {
+  const locationsQuery = trpc.viewer.locationOptions.useQuery({});
+  const { t } = useLocale();
+
+  const SkeletonLoader = () => {
+    return (
+      <SkeletonContainer>
+        <SkeletonText className="my-2 h-8 w-full" />
+      </SkeletonContainer>
+    );
+  };
+
+  return (
+    <QueryCell
+      query={locationsQuery}
+      customLoader={<SkeletonLoader />}
+      success={({ data }) => {
+        let updatedEventType: TEventType & {
+          locationOptions?: TLocationOptions;
+        } = { ...eventType };
+
+        if (updatedEventType.schedulingType === SchedulingType.MANAGED) {
+          updatedEventType = {
+            ...updatedEventType,
+            locationOptions: [
+              {
+                label: t("default"),
+                options: [
+                  {
+                    label: t("members_default_location"),
+                    value: "",
+                    icon: "/user-check.svg",
+                  },
+                ],
+              },
+              ...data,
+            ],
+          };
+        } else {
+          updatedEventType = { ...updatedEventType, locationOptions: data };
+        }
+        return <LocationsWrapper eventType={updatedEventType} slug={slug} />;
+      }}
+    />
+  );
+};
+
 export default EventTypeConferencingAppSettings;

apps/web/pages/apps/installation/[[...step]].tsx

@@ -10,7 +10,6 @@ import { z } from "zod";
 import checkForMultiplePaymentApps from "@calcom/app-store/_utils/payments/checkForMultiplePaymentApps";
 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { appStoreMetadata } from "@calcom/app-store/appStoreMetaData";
-import { getLocationGroupedOptions } from "@calcom/app-store/server";
 import type { EventTypeAppSettingsComponentProps, EventTypeModel } from "@calcom/app-store/types";
 import { isConferencing as isConferencingApp } from "@calcom/app-store/utils";
 import type { LocationObject } from "@calcom/core/location";
@@ -23,9 +22,7 @@ import { WEBAPP_URL } from "@calcom/lib/constants";
 import { CAL_URL } from "@calcom/lib/constants";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { getTranslation } from "@calcom/lib/server";
 import prisma from "@calcom/prisma";
-import { SchedulingType } from "@calcom/prisma/enums";
 import { eventTypeBookingFields } from "@calcom/prisma/zod-utils";
 import type { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 import { trpc } from "@calcom/trpc/react";
@@ -40,15 +37,13 @@ import { AccountsStepCard } from "@components/apps/installation/AccountsStepCard
 import { ConfigureStepCard } from "@components/apps/installation/ConfigureStepCard";
 import { EventTypesStepCard } from "@components/apps/installation/EventTypesStepCard";
 import { StepHeader } from "@components/apps/installation/StepHeader";
-import type { TLocationOptions } from "@components/eventtype/Locations";
 
 export type TEventType = EventTypeAppSettingsComponentProps["eventType"] &
   Pick<
     EventTypeModel,
     "metadata" | "schedulingType" | "slug" | "requiresConfirmation" | "position" | "destinationCalendar"
   > & {
     selected: boolean;
-    locationOptions?: TLocationOptions;
     locations: LocationFormValues["locations"];
     bookingFields?: LocationFormValues["bookingFields"];
   };
@@ -529,41 +524,17 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       }
       eventTypes = await getEventTypes(user.id, parsedTeamIdParam);
       if (isConferencing) {
-        const t = await getTranslation(locale ?? "en", "common");
-        const locationOptions = await getLocationGroupedOptions({ userId: user.id }, t);
+        const destinationCalendar = await prisma.destinationCalendar.findFirst({
+          where: {
+            userId: user.id,
+            eventTypeId: null,
+          },
+        });
         for (let index = 0; index < eventTypes.length; index++) {
           let eventType = eventTypes[index];
-          let destinationCalendar = eventType.destinationCalendar;
-          if (!destinationCalendar) {
-            destinationCalendar = await prisma.destinationCalendar.findFirst({
-              where: {
-                userId: user.id,
-                eventTypeId: null,
-              },
-            });
-
+          if (!eventType.destinationCalendar) {
             eventType = { ...eventType, destinationCalendar };
           }
-          if (eventType.schedulingType === SchedulingType.MANAGED) {
-            eventType = {
-              ...eventType,
-              locationOptions: [
-                {
-                  label: t("default"),
-                  options: [
-                    {
-                      label: t("members_default_location"),
-                      value: "",
-                      icon: "/user-check.svg",
-                    },
-                  ],
-                },
-                ...locationOptions,
-              ],
-            };
-          } else {
-            eventType = { ...eventType, locationOptions };
-          }
           eventTypes[index] = eventType;
         }
       }