perf: Remove two trpc.viewer.public.event calls & use EventTypeRepository in RSCs

apps/web/lib/d/[link]/[slug]/getServerSideProps.tsx

@@ -1,17 +1,16 @@
 import type { EmbedProps } from "app/WithEmbedSSR";
-import { createRouterCaller } from "app/_trpc/context";
 import type { GetServerSidePropsContext } from "next";
 import { z } from "zod";
 
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { getBookingForReschedule, getMultipleDurationValue } from "@calcom/features/bookings/lib/get-booking";
 import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
 import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
+import { EventTypeRepository } from "@calcom/lib/server/repository/eventType";
 import { UserRepository } from "@calcom/lib/server/repository/user";
 import slugify from "@calcom/lib/slugify";
 import prisma from "@calcom/prisma";
 import { RedirectType } from "@calcom/prisma/enums";
-import { publicViewerRouter } from "@calcom/trpc/server/routers/publicViewer/_router";
 
 import { getTemporaryOrgRedirect } from "@lib/getTemporaryOrgRedirect";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
@@ -20,6 +19,11 @@ export type PageProps = inferSSRProps<typeof getServerSideProps> & EmbedProps;
 
 async function getUserPageProps(context: GetServerSidePropsContext) {
   const session = await getServerSession({ req: context.req });
+  if (!session?.user?.id) {
+    return { redirect: { permanent: false, destination: "/auth/login" } };
+  }
+  const sessionUserId = session.user.id;
+
   const { link, slug } = paramsSchema.parse(context.params);
   const { rescheduleUid, duration: queryDuration } = context.query;
   const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req);
@@ -107,22 +111,23 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
 
   let booking: GetBookingType | null = null;
   if (rescheduleUid) {
-    booking = await getBookingForReschedule(`${rescheduleUid}`, session?.user?.id);
+    booking = await getBookingForReschedule(`${rescheduleUid}`, sessionUserId);
   }
 
   const isTeamEvent = !!hashedLink.eventType?.team?.id;
 
   // We use this to both prefetch the query on the server,
   // as well as to check if the event exist, so we c an show a 404 otherwise.
-  const caller = await createRouterCaller(publicViewerRouter);
-
-  const eventData = await caller.event({
-    username: name,
-    eventSlug: slug,
-    isTeamEvent,
-    org,
-    fromRedirectOfNonOrgLink: context.query.orgRedirection === "true",
-  });
+  const eventData = await EventTypeRepository.getPublicEvent(
+    {
+      username: name,
+      eventSlug: slug,
+      isTeamEvent,
+      org,
+      fromRedirectOfNonOrgLink: context.query.orgRedirection === "true",
+    },
+    sessionUserId
+  );
 
   if (!eventData) {
     return notFound;

apps/web/lib/org/[orgSlug]/instant-meeting/team/[slug]/[type]/getServerSideProps.ts

@@ -1,20 +1,25 @@
-import { createRouterCaller } from "app/_trpc/context";
 import type { GetServerSidePropsContext } from "next";
 import { z } from "zod";
 
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { getMultipleDurationValue } from "@calcom/features/bookings/lib/get-booking";
 import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
+import { EventTypeRepository } from "@calcom/lib/server/repository/eventType";
 import slugify from "@calcom/lib/slugify";
 import prisma from "@calcom/prisma";
-import { publicViewerRouter } from "@calcom/trpc/server/routers/publicViewer/_router";
 
 const paramsSchema = z.object({
   type: z.string().transform((s) => slugify(s)),
   slug: z.string().transform((s) => slugify(s)),
 });
 
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const session = await getServerSession({ req: context.req });
+  if (!session?.user?.id) {
+    return { redirect: { permanent: false, destination: "/auth/login" } };
+  }
+  const sessionUserId = session.user.id;
   const { slug: teamSlug, type: meetingSlug } = paramsSchema.parse(context.params);
   const { duration: queryDuration } = context.query;
 
@@ -39,16 +44,16 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
 
   const org = isValidOrgDomain ? currentOrgDomain : null;
 
-  const caller = await createRouterCaller(publicViewerRouter);
-
-  const eventData = await caller.event({
-    username: teamSlug,
-    eventSlug: meetingSlug,
-    isTeamEvent: true,
-    org,
-    fromRedirectOfNonOrgLink: context.query.orgRedirection === "true",
-  });
-
+  const eventData = await EventTypeRepository.getPublicEvent(
+    {
+      username: teamSlug,
+      eventSlug: meetingSlug,
+      isTeamEvent: true,
+      org,
+      fromRedirectOfNonOrgLink: context.query.orgRedirection === "true",
+    },
+    sessionUserId
+  );
   if (!eventData || !org) {
     return {
       notFound: true,

apps/web/server/lib/[user]/[type]/getServerSideProps.ts

@@ -8,7 +8,7 @@ import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
 import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
 import type { getPublicEvent } from "@calcom/features/eventtypes/lib/getPublicEvent";
 import { getUsernameList } from "@calcom/lib/defaultEvents";
-import { EventRepository } from "@calcom/lib/server/repository/event";
+import { EventTypeRepository } from "@calcom/lib/server/repository/eventType";
 import { UserRepository } from "@calcom/lib/server/repository/user";
 import slugify from "@calcom/lib/slugify";
 import prisma from "@calcom/prisma";
@@ -93,6 +93,10 @@ async function processSeatedEvent({
 
 async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
   const session = await getServerSession({ req: context.req });
+  if (!session?.user?.id) {
+    return { redirect: { permanent: false, destination: "/auth/login" } };
+  }
+  const sessionUserId = session.user.id;
   const { user: usernames, type: slug } = paramsSchema.parse(context.params);
   const { rescheduleUid, bookingUid } = context.query;
 
@@ -127,14 +131,14 @@ async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
   // We use this to both prefetch the query on the server,
   // as well as to check if the event exist, so we c an show a 404 otherwise.
 
-  const eventData = await EventRepository.getPublicEvent(
+  const eventData = await EventTypeRepository.getPublicEvent(
     {
       username: usernames.join("+"),
       eventSlug: slug,
       org,
       fromRedirectOfNonOrgLink: context.query.orgRedirection === "true",
     },
-    session?.user?.id
+    sessionUserId
   );
 
   if (!eventData) {
@@ -177,6 +181,11 @@ async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
 
 async function getUserPageProps(context: GetServerSidePropsContext) {
   const session = await getServerSession({ req: context.req });
+  if (!session?.user?.id) {
+    return { redirect: { permanent: false, destination: "/auth/login" } };
+  }
+  const sessionUserId = session.user.id;
+
   const { user: usernames, type: slug } = paramsSchema.parse(context.params);
   const username = usernames[0];
   const { rescheduleUid, bookingUid } = context.query;
@@ -210,14 +219,14 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
   const org = isValidOrgDomain ? currentOrgDomain : null;
   // We use this to both prefetch the query on the server,
   // as well as to check if the event exist, so we can show a 404 otherwise.
-  const eventData = await EventRepository.getPublicEvent(
+  const eventData = await EventTypeRepository.getPublicEvent(
     {
       username,
       eventSlug: slug,
       org,
       fromRedirectOfNonOrgLink: context.query.orgRedirection === "true",
     },
-    session?.user?.id
+    sessionUserId
   );
 
   if (!eventData) {

packages/features/bookings/Booker/Booker.tsx

@@ -576,7 +576,8 @@ const BookerComponent = ({
 
       <BookFormAsModal
         onCancel={() => setSelectedTimeslot(null)}
-        visible={bookerState === "booking" && shouldShowFormInDialog}>
+        visible={bookerState === "booking" && shouldShowFormInDialog}
+        eventDuration={event?.data?.length}>
         {EventBooker}
       </BookFormAsModal>
       <Toaster position="bottom-right" />

packages/features/bookings/Booker/components/AvailableTimeSlots.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useMemo, useRef } from "react";
 
 import dayjs from "@calcom/dayjs";
-import { AvailableTimes, AvailableTimesSkeleton } from "@calcom/features/bookings";
 import type { IUseBookingLoadingStates } from "@calcom/features/bookings/Booker/components/hooks/useBookings";
-import type { BookerEvent } from "@calcom/features/bookings/types";
+import { AvailableTimes, AvailableTimesSkeleton } from "@calcom/features/bookings/components/AvailableTimes";
+import type { SlotItemProps } from "@calcom/features/bookings/components/AvailableTimes";
 import { useNonEmptyScheduleDays } from "@calcom/features/schedules";
 import type { Slot } from "@calcom/features/schedules";
 import { useSlotsForAvailableDates } from "@calcom/features/schedules/lib/use-schedule/useSlotsForDate";
@@ -23,9 +23,7 @@ type AvailableTimeSlotsProps = {
   isLoading: boolean;
   seatsPerTimeSlot?: number | null;
   showAvailableSeatsCount?: boolean | null;
-  event: {
-    data?: Pick<BookerEvent, "length" | "bookingFields" | "price" | "currency" | "metadata"> | null;
-  };
+  event: SlotItemProps["event"];
   customClassNames?: {
     availableTimeSlotsContainer?: string;
     availableTimeSlotsTitle?: string;

packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx

@@ -11,13 +11,18 @@ import { DialogContent } from "@calcom/ui/components/dialog";
 import { getDurationFormatted } from "../../../components/event-meta/Duration";
 import { useBookerStore } from "../../store";
 import { FromTime } from "../../utils/dates";
-import { useEvent } from "../../utils/event";
 import { useBookerTime } from "../hooks/useBookerTime";
 
-const BookEventFormWrapper = ({ children, onCancel }: { onCancel: () => void; children: ReactNode }) => {
-  const { data } = useEvent();
-
-  return <BookEventFormWrapperComponent child={children} eventLength={data?.length} onCancel={onCancel} />;
+const BookEventFormWrapper = ({
+  children,
+  onCancel,
+  eventDuration,
+}: {
+  onCancel: () => void;
+  children: ReactNode;
+  eventDuration?: number;
+}) => {
+  return <BookEventFormWrapperComponent child={children} eventDuration={eventDuration} onCancel={onCancel} />;
 };
 
 const PlatformBookEventFormWrapper = ({
@@ -31,17 +36,21 @@ const PlatformBookEventFormWrapper = ({
   const { data } = useEventTypeById(eventId);
 
   return (
-    <BookEventFormWrapperComponent child={children} eventLength={data?.lengthInMinutes} onCancel={onCancel} />
+    <BookEventFormWrapperComponent
+      child={children}
+      eventDuration={data?.lengthInMinutes}
+      onCancel={onCancel}
+    />
   );
 };
 
 export const BookEventFormWrapperComponent = ({
   child,
-  eventLength,
+  eventDuration,
 }: {
   onCancel: () => void;
   child: ReactNode;
-  eventLength?: number;
+  eventDuration?: number;
 }) => {
   const { i18n, t } = useLocale();
   const selectedTimeslot = useBookerStore((state) => state.selectedTimeslot);
@@ -62,9 +71,9 @@ export const BookEventFormWrapperComponent = ({
             language={i18n.language}
           />
         </Badge>
-        {(selectedDuration || eventLength) && (
+        {(selectedDuration || eventDuration) && (
           <Badge variant="grayWithoutHover" startIcon="clock" size="lg">
-            <span>{getDurationFormatted(selectedDuration || eventLength, t)}</span>
+            <span>{getDurationFormatted(selectedDuration || eventDuration, t)}</span>
           </Badge>
         )}
       </div>
@@ -77,10 +86,12 @@ export const BookFormAsModal = ({
   visible,
   onCancel,
   children,
+  eventDuration,
 }: {
   visible: boolean;
   onCancel: () => void;
   children: ReactNode;
+  eventDuration?: number;
 }) => {
   const isPlatform = useIsPlatform();
 
@@ -91,7 +102,9 @@ export const BookFormAsModal = ({
         enableOverflow
         className="[&_.modalsticky]:border-t-subtle [&_.modalsticky]:bg-default max-h-[80vh] pb-0 [&_.modalsticky]:sticky [&_.modalsticky]:bottom-0 [&_.modalsticky]:left-0 [&_.modalsticky]:right-0 [&_.modalsticky]:-mx-8 [&_.modalsticky]:border-t [&_.modalsticky]:px-8 [&_.modalsticky]:py-4">
         {!isPlatform ? (
-          <BookEventFormWrapper onCancel={onCancel}>{children}</BookEventFormWrapper>
+          <BookEventFormWrapper eventDuration={eventDuration} onCancel={onCancel}>
+            {children}
+          </BookEventFormWrapper>
         ) : (
           <PlatformBookEventFormWrapper onCancel={onCancel}>{children}</PlatformBookEventFormWrapper>
         )}

packages/features/bookings/components/AvailableTimes.tsx

@@ -53,15 +53,15 @@ export type AvailableTimesProps = {
   unavailableTimeSlots?: string[];
 } & Omit<SlotItemProps, "slot">;
 
-type SlotItemProps = {
+export type SlotItemProps = {
   slot: Slot;
   seatsPerTimeSlot?: number | null;
   selectedSlots?: string[];
   onTimeSelect?: TOnTimeSelect;
   onTentativeTimeSelect?: TOnTentativeTimeSelect;
   showAvailableSeatsCount?: boolean | null;
   event: {
-    data?: Pick<BookerEvent, "length" | "bookingFields" | "price" | "currency" | "metadata"> | null;
+    data?: Pick<BookerEvent, "length" | "price" | "currency" | "metadata"> | null;
   };
   customClassNames?: string;
   confirmStepClassNames?: {

packages/features/data-table/components/DataTableToolbar.tsx

@@ -48,7 +48,7 @@ function SearchBarComponent({ className }: SearchBarProps, ref: Ref<HTMLInputEle
   return (
     <Input
       ref={ref}
-      className={classNames("max-w-48" ,className)}
+      className={classNames("max-w-48", className)}
       placeholder={t("search")}
       value={localValue}
       onChange={handleSearchChange}