chore: downgrade react query atoms (#14328)

* refactor: downgrade atoms react-query to v4 * driveby: prettier format file * refactor: react-query isPending to isLoading * chore: bump atoms version * refactor: isPending -> isLoading * chore: bump version
calcom · Apr 4, 2024 · 8fc9b9a · 8fc9b9a
1 parent d1175bf
commit 8fc9b9a
Show file tree

Hide file tree

Showing 11 changed files with 51 additions and 140 deletions.
diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx
@@ -134,7 +134,7 @@ const BookerComponent = ({
   } = calendars;
 
   useEffect(() => {
-    if (event.isPending) return setBookerState("loading");
+    if (event.isLoading) return setBookerState("loading");
     if (!selectedDate) return setBookerState("selecting_date");
     if (!selectedTimeslot) return setBookerState("selecting_time");
     return setBookerState("booking");
@@ -354,7 +354,7 @@ const BookerComponent = ({
                   />
                 )}
 
-                <EventMeta event={event.data} isPending={event.isPending} isPlatform={isPlatform} />
+                <EventMeta event={event.data} isPending={event.isLoading} isPlatform={isPlatform} />
                 {layout !== BookerLayouts.MONTH_VIEW &&
                   !(layout === "mobile" && bookerState === "booking") && (
                     <div className="mt-auto px-5 py-3 ">
@@ -392,7 +392,7 @@ const BookerComponent = ({
               <LargeCalendar
                 extraDays={extraDays}
                 schedule={schedule.data}
-                isLoading={schedule.isPending}
+                isLoading={schedule.isLoading}
                 event={event}
               />
             </BookerSection>
@@ -416,7 +416,7 @@ const BookerComponent = ({
                 extraDays={extraDays}
                 limitHeight={layout === BookerLayouts.MONTH_VIEW}
                 schedule={schedule?.data}
-                isLoading={schedule.isPending}
+                isLoading={schedule.isLoading}
                 seatsPerTimeSlot={event.data?.seatsPerTimeSlot}
                 showAvailableSeatsCount={event.data?.seatsShowAvailabilityCount}
                 event={event}

diff --git a/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx b/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx
@@ -7,7 +7,7 @@ import type { FieldError } from "react-hook-form";
 import { IS_CALCOM, WEBSITE_URL } from "@calcom/lib/constants";
 import getPaymentAppData from "@calcom/lib/getPaymentAppData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Alert, Button, EmptyScreen, Form, Icon } from "@calcom/ui";
+import { Alert, Button, EmptyScreen, Form } from "@calcom/ui";
 
 import { useBookerStore } from "../../store";
 import type { useEventReturnType } from "../../utils/event";
@@ -63,7 +63,7 @@ export const BookEventForm = ({
   }, [eventType]);
 
   if (eventQuery.isError) return <Alert severity="warning" message={t("error_booking_event")} />;
-  if (eventQuery.isPending || !eventQuery.data) return <FormSkeleton />;
+  if (eventQuery.isLoading || !eventQuery.data) return <FormSkeleton />;
   if (!timeslot)
     return (
       <EmptyScreen

diff --git a/packages/features/bookings/Booker/components/DatePicker.tsx b/packages/features/bookings/Booker/components/DatePicker.tsx
@@ -27,7 +27,7 @@ export const DatePicker = ({
 
   return (
     <DatePickerComponent
-      isPending={schedule.isPending}
+      isPending={schedule.isLoading}
       onChange={(date: Dayjs | null) => {
         setSelectedDate(date === null ? date : date.format("YYYY-MM-DD"));
       }}

diff --git a/packages/features/bookings/Booker/components/EventMeta.tsx b/packages/features/bookings/Booker/components/EventMeta.tsx
@@ -29,7 +29,7 @@ export const EventMeta = ({
   isPlatform = true,
 }: {
   event: useEventReturnType["data"];
-  isPending: useEventReturnType["isPending"];
+  isPending: useEventReturnType["isLoading"];
   isPlatform?: boolean;
 }) => {
   const { setTimezone, timeFormat, timezone } = useTimePreferences();

diff --git a/packages/features/bookings/Booker/utils/event.ts b/packages/features/bookings/Booker/utils/event.ts
@@ -33,7 +33,7 @@ export const useEvent = () => {
     data: event?.data,
     isSuccess: event?.isSuccess,
     isError: event?.isError,
-    isPending: event?.isPending,
+    isLoading: event?.isPending,
   };
 };
 
@@ -104,7 +104,6 @@ export const useScheduleForEvent = ({
 
   return {
     data: schedule?.data,
-    isPending: schedule?.isPending,
     isError: schedule?.isError,
     isSuccess: schedule?.isSuccess,
     isLoading: schedule?.isLoading,

diff --git a/packages/features/embed/Embed.tsx b/packages/features/embed/Embed.tsx
@@ -240,7 +240,7 @@ const EmailEmbed = ({
           <CollapsibleContent>
             <div className="text-default text-sm">{t("select_date")}</div>
             <DatePicker
-              isPending={schedule.isPending}
+              isPending={schedule.isLoading}
               onChange={(date: Dayjs | null) => {
                 setSelectedDate(date === null ? date : date.format("YYYY-MM-DD"));
               }}

diff --git a/packages/platform/atoms/availability/AvailabilitySettings.tsx b/packages/platform/atoms/availability/AvailabilitySettings.tsx
@@ -178,10 +178,7 @@ const DateOverride = ({
           onChange={(ranges) => ranges.forEach((range) => append({ ranges: [range] }))}
           userTimeFormat={userTimeFormat}
           Trigger={
-            <Button
-              color="secondary"
-              StartIcon="plus"
-              data-testid="add-override">
+            <Button color="secondary" StartIcon="plus" data-testid="add-override">
               {t("add_an_override")}
             </Button>
           }
@@ -324,11 +321,7 @@ export function AvailabilitySettings({
                     openSidebar ? "translate-x-0 opacity-100" : "translate-x-full opacity-0"
                   )}>
                   <div className="flex flex-row items-center pt-5">
-                    <Button
-                      StartIcon="arrow-left"
-                      color="minimal"
-                      onClick={() => setOpenSidebar(false)}
-                    />
+                    <Button StartIcon="arrow-left" color="minimal" onClick={() => setOpenSidebar(false)} />
                     <p className="-ml-2">{t("availability_settings")}</p>
                     <DeleteDialogButton
                       buttonClassName="ml-16 inline"

diff --git a/packages/platform/atoms/availability/wrappers/PlatformAvailabilitySettingsWrapper.tsx b/packages/platform/atoms/availability/wrappers/PlatformAvailabilitySettingsWrapper.tsx
@@ -39,7 +39,7 @@ export const PlatformAvailabilitySettingsWrapper = ({
   const { timeFormat } = me?.data || { timeFormat: null };
   const { toast } = useToast();
 
-  const { mutate: deleteSchedule, isPending: isDeletionInProgress } = useDeleteSchedule({
+  const { mutate: deleteSchedule, isLoading: isDeletionInProgress } = useDeleteSchedule({
     onSuccess: (res) => {
       onDeleteSuccess?.(res);
       toast({
@@ -54,7 +54,7 @@ export const PlatformAvailabilitySettingsWrapper = ({
     },
   });
 
-  const { mutate: updateSchedule, isPending: isSavingInProgress } = useUpdateSchedule({
+  const { mutate: updateSchedule, isLoading: isSavingInProgress } = useUpdateSchedule({
     onSuccess: (res) => {
       onUpdateSuccess?.(res);
       toast({
@@ -98,28 +98,24 @@ export const PlatformAvailabilitySettingsWrapper = ({
       weekStart="Sunday"
       timeFormat={timeFormat}
       isLoading={isLoading}
-      schedule={
-        userSchedule
-          ? {
-              name: userSchedule.name,
-              id: userSchedule.id,
-              isLastSchedule: userSchedule.isLastSchedule,
-              isDefault: userSchedule.isDefault,
-              workingHours: userSchedule.workingHours,
-              dateOverrides: userSchedule.dateOverrides,
-              timeZone: userSchedule.timeZone,
-              availability: userSchedule.availability,
-              schedule:
-                userSchedule.schedule.reduce(
-                  (acc: Schedule[], avail: Schedule) => [
-                    ...acc,
-                    { ...avail, startTime: new Date(avail.startTime), endTime: new Date(avail.endTime) },
-                  ],
-                  [] as Schedule[]
-                ) || [],
-            }
-          : undefined
-      }
+      schedule={{
+        name: userSchedule.name,
+        id: userSchedule.id,
+        isLastSchedule: userSchedule.isLastSchedule,
+        isDefault: userSchedule.isDefault,
+        workingHours: userSchedule.workingHours,
+        dateOverrides: userSchedule.dateOverrides,
+        timeZone: userSchedule.timeZone,
+        availability: userSchedule.availability,
+        schedule:
+          userSchedule.schedule.reduce(
+            (acc: Schedule[], avail: Schedule) => [
+              ...acc,
+              { ...avail, startTime: new Date(avail.startTime), endTime: new Date(avail.endTime) },
+            ],
+            [] as Schedule[]
+          ) || [],
+      }}
       isDeleting={isDeletionInProgress}
       isSaving={isSavingInProgress}
       backPath=""

diff --git a/packages/platform/atoms/booker/BookerPlatformWrapper.tsx b/packages/platform/atoms/booker/BookerPlatformWrapper.tsx
@@ -152,7 +152,7 @@ export const BookerPlatformWrapper = (props: BookerPlatformWrapperAtomProps) =>
   });
   const {
     mutate: createBooking,
-    isPending: creatingBooking,
+    isLoading: creatingBooking,
     error: createBookingError,
     isError: isCreateBookingError,
   } = useCreateBooking({
@@ -164,7 +164,7 @@ export const BookerPlatformWrapper = (props: BookerPlatformWrapperAtomProps) =>
   });
   const {
     mutate: createRecBooking,
-    isPending: creatingRecBooking,
+    isLoading: creatingRecBooking,
 
     error: createRecBookingError,
     isError: isCreateRecBookingError,
@@ -177,7 +177,7 @@ export const BookerPlatformWrapper = (props: BookerPlatformWrapperAtomProps) =>
   });
   const {
     mutate: createInstantBooking,
-    isPending: creatingInstantBooking,
+    isLoading: creatingInstantBooking,
     error: createInstantBookingError,
     isError: isCreateInstantBookingError,
   } = useCreateInstantBooking({
@@ -193,7 +193,7 @@ export const BookerPlatformWrapper = (props: BookerPlatformWrapperAtomProps) =>
     (state) => [state.calendarSettingsOverlayModal, state.setCalendarSettingsOverlayModal],
     shallow
   );
-  const { data: connectedCalendars, isPending: fetchingConnectedCalendars } = useConnectedCalendars({
+  const { data: connectedCalendars, isLoading: fetchingConnectedCalendars } = useConnectedCalendars({
     enabled: !!calendarSettingsOverlay,
   });
   const calendars = connectedCalendars as ConnectedDestinationCalendars;

diff --git a/packages/platform/atoms/package.json b/packages/platform/atoms/package.json
@@ -4,7 +4,7 @@
   "type": "module",
   "description": "Customizable UI components to integrate scheduling into your product.",
   "authors": "Cal.com, Inc.",
-  "version": "1.0.6",
+  "version": "1.0.9",
   "scripts": {
     "dev": "yarn vite build --watch & npx tailwindcss -i ./globals.css -o ./globals.min.css --postcss --minify --watch",
     "build": "yarn vite build && npx tailwindcss -i ./globals.css -o ./globals.min.css --postcss --minify",
@@ -44,7 +44,7 @@
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
-    "@tanstack/react-query": "^5.17.15",
+    "@tanstack/react-query": "4.36.1",
     "class-variance-authority": "^0.4.0",
     "clsx": "^2.0.0",
     "lucide-react": "^0.364.0",