From 8641b64f24a0cf4e1855611ac91d7b73e2bddad5 Mon Sep 17 00:00:00 2001
From: Alex van Andel <me@alexvanandel.com>
Date: Wed, 21 Dec 2022 16:03:18 +0000
Subject: [PATCH] Amended useEffect for simplication

---
 .../components/booking/BookingDescription.tsx | 19 +++++++++----------
 .../booking/pages/AvailabilityPage.tsx        | 11 ++---------
 2 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/apps/web/components/booking/BookingDescription.tsx b/apps/web/components/booking/BookingDescription.tsx
index 73b7e63a6a..3033c11194 100644
--- a/apps/web/components/booking/BookingDescription.tsx
+++ b/apps/web/components/booking/BookingDescription.tsx
@@ -44,18 +44,17 @@ const BookingDescription: FC<Props> = (props) => {
   const { profile, eventType, isBookingPage = false, children } = props;
   const { date: bookingDate } = useRouterQuery("date");
   const { t } = useLocale();
-  const { duration, setQuery: setDuration } = useRouterQuery("duration");
+  const { duration = eventType.length.toString(), setQuery: setDuration } = useRouterQuery("duration");
+
   useEffect(() => {
-    if (eventType.metadata?.multipleDuration !== undefined) {
-      if (!duration) {
-        setDuration(eventType.length);
-      } else {
-        if (!eventType.metadata?.multipleDuration.includes(Number(duration))) {
-          setDuration(eventType.length);
-        }
-      }
+    if (
+      eventType.metadata?.multipleDuration &&
+      !eventType.metadata?.multipleDuration?.includes(Number(duration))
+    ) {
+      setDuration(eventType.length.toString());
     }
-  }, [setDuration, eventType.length, eventType.metadata?.multipleDuration, duration]);
+  }, [duration, setDuration, eventType.length, eventType.metadata?.multipleDuration]);
+
   let requiresConfirmation = eventType?.requiresConfirmation;
   let requiresConfirmationText = t("requires_confirmation");
   const rcThreshold = eventType?.metadata?.requiresConfirmationThreshold;
diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index 963358095c..b8a4f281e8 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -26,7 +26,6 @@ import notEmpty from "@calcom/lib/notEmpty";
 import { getRecurringFreq } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { detectBrowserTimeFormat, setIs24hClockInLocalStorage, TimeFormat } from "@calcom/lib/timeFormat";
-import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 import { trpc } from "@calcom/trpc/react";
 import { Icon, DatePicker } from "@calcom/ui";
 
@@ -98,7 +97,7 @@ const SlotPicker = ({
   weekStart = 0,
   ethSignature,
 }: {
-  eventType: Pick<EventType, "id" | "schedulingType" | "slug" | "metadata">;
+  eventType: Pick<EventType, "id" | "schedulingType" | "slug">;
   timeFormat: TimeFormat;
   onTimeFormatChange: (is24Hour: boolean) => void;
   timeZone?: string;
@@ -110,17 +109,11 @@ const SlotPicker = ({
 }) => {
   const [selectedDate, setSelectedDate] = useState<Dayjs>();
   const [browsingDate, setBrowsingDate] = useState<Dayjs>();
-  let { duration } = useRouterQuery("duration");
+  const { duration } = useRouterQuery("duration");
   const { date, setQuery: setDate } = useRouterQuery("date");
   const { month, setQuery: setMonth } = useRouterQuery("month");
   const router = useRouter();
 
-  // Showing error if event type doesn't have multiple duration and duration query param exists
-  const metadata = EventTypeMetaDataSchema.parse(eventType.metadata);
-  if (!metadata?.multipleDuration && router.query.duration != undefined) {
-    duration = undefined;
-  }
-
   const [slotPickerRef] = useAutoAnimate<HTMLDivElement>();
 
   useEffect(() => {