From b3f7e8e3222cc56131a3414d1b56f9cff24e5b4b Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Wed, 6 Jul 2022 19:55:41 +0530
Subject: [PATCH] Booking Module Improvements (#3221)

* Fix momentary render of dates before skeleton

* Fix Hydration issue - We shouldnt guess timezone on server as it would be different from client causing hydration error

* Fix wrong trpcQuery result when clicking on a particular date. Also, fix last day of the month being never available

* Fix as per PR Feedback
---
 apps/web/components/booking/pages/AvailabilityPage.tsx | 7 ++++---
 apps/web/server/routers/viewer/slots.tsx               | 7 ++-----
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index 232e112540..50c3dcf096 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -111,7 +111,7 @@ const useSlots = ({
   endTime?: Dayjs;
   timeZone: string;
 }) => {
-  const { data, isLoading } = trpc.useQuery(
+  const { data, isLoading, isIdle } = trpc.useQuery(
     [
       "viewer.public.slots.getSchedule",
       {
@@ -132,7 +132,8 @@ const useSlots = ({
     }
   }, [data]);
 
-  return { slots: cachedSlots, isLoading };
+  // The very first time isIdle is set if auto-fetch is disabled, so isIdle should also be considered a loading state.
+  return { slots: cachedSlots, isLoading: isLoading || isIdle };
 };
 
 const SlotPicker = ({
@@ -261,7 +262,7 @@ function TimezoneDropdown({
       <Collapsible.Trigger className="min-w-32 text-bookinglight mb-1 -ml-2 px-2 py-1 text-left dark:text-white">
         <p className="text-gray-600 dark:text-white">
           <GlobeIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
-          {timeZone || dayjs.tz.guess()}
+          {timeZone}
           {isTimeOptionsOpen ? (
             <ChevronUpIcon className="ml-1 -mt-1 inline-block h-4 w-4 text-gray-400" />
           ) : (
diff --git a/apps/web/server/routers/viewer/slots.tsx b/apps/web/server/routers/viewer/slots.tsx
index f37126c25d..88acb51cbe 100644
--- a/apps/web/server/routers/viewer/slots.tsx
+++ b/apps/web/server/routers/viewer/slots.tsx
@@ -151,16 +151,13 @@ export const slotsRouter = createRouter().query("getSchedule", {
     const startTime =
       input.timeZone === "Etc/GMT"
         ? dayjs.utc(input.startTime)
-        : dayjs.utc(input.startTime).tz(input.timeZone, true);
+        : dayjs(input.startTime).utc().tz(input.timeZone);
     const endTime =
-      input.timeZone === "Etc/GMT"
-        ? dayjs.utc(input.endTime)
-        : dayjs.utc(input.endTime).tz(input.timeZone, true);
+      input.timeZone === "Etc/GMT" ? dayjs.utc(input.endTime) : dayjs(input.endTime).utc().tz(input.timeZone);
 
     if (!startTime.isValid() || !endTime.isValid()) {
       throw new TRPCError({ message: "Invalid time range given.", code: "BAD_REQUEST" });
     }
-
     let currentSeats: CurrentSeats | undefined = undefined;
 
     const userSchedules = await Promise.all(