refactor: extract logic as bookingDetailsSheetStore (#25129)

eunjae-lee · web-flow · commit 7a0b8a9eba4f · 2025-11-14T14:50:20.000Z
* refactor: extract logic as bookingDetailsSheetStore

* clean up

* revert something

* provide store from context
diff --git a/apps/web/modules/bookings/components/BookingDetailsSheet.tsx b/apps/web/modules/bookings/components/BookingDetailsSheet.tsx
@@ -29,54 +29,88 @@ import {
 import { BookingActionsDropdown } from "../../../components/booking/actions/BookingActionsDropdown";
 import { BookingActionsStoreProvider } from "../../../components/booking/actions/BookingActionsStoreProvider";
 import type { BookingListingStatus } from "../../../components/booking/types";
+import {
+  useBookingDetailsSheetStore,
+  useBookingDetailsSheetStoreApi,
+} from "../store/bookingDetailsSheetStore";
 import type { BookingOutput } from "../types";
 import { JoinMeetingButton } from "./JoinMeetingButton";
 
 type BookingMetaData = z.infer<typeof bookingMetadataSchema>;
 
 interface BookingDetailsSheetProps {
-  booking: BookingOutput | null;
-  isOpen: boolean;
-  onClose: () => void;
   userTimeZone?: string;
   userTimeFormat?: number;
   userId?: number;
   userEmail?: string;
-  onPrevious?: () => void;
-  hasPrevious?: boolean;
-  onNext?: () => void;
-  hasNext?: boolean;
 }
 
-interface BookingDetailsSheetInnerProps extends Omit<BookingDetailsSheetProps, "booking"> {
-  booking: BookingOutput;
-}
+export function BookingDetailsSheet({
+  userTimeZone,
+  userTimeFormat,
+  userId,
+  userEmail,
+}: BookingDetailsSheetProps) {
+  const booking = useBookingDetailsSheetStore((state) => state.getSelectedBooking());
 
-export function BookingDetailsSheet(props: BookingDetailsSheetProps) {
-  if (!props.booking) return null;
+  // Return null if no booking is selected (sheet is closed)
+  if (!booking) return null;
 
   return (
     <BookingActionsStoreProvider>
-      <BookingDetailsSheetInner {...props} booking={props.booking} />
+      <BookingDetailsSheetInner
+        booking={booking}
+        userTimeZone={userTimeZone}
+        userTimeFormat={userTimeFormat}
+        userId={userId}
+        userEmail={userEmail}
+      />
     </BookingActionsStoreProvider>
   );
 }
 
+interface BookingDetailsSheetInnerProps {
+  booking: BookingOutput;
+  userTimeZone?: string;
+  userTimeFormat?: number;
+  userId?: number;
+  userEmail?: string;
+}
+
 function BookingDetailsSheetInner({
   booking,
-  isOpen,
-  onClose,
   userTimeZone,
   userTimeFormat,
   userId,
   userEmail,
-  onPrevious,
-  hasPrevious = false,
-  onNext,
-  hasNext = false,
 }: BookingDetailsSheetInnerProps) {
   const { t } = useLocale();
 
+  // Get navigation state directly from the store
+  const hasNext = useBookingDetailsSheetStore((state) => state.hasNext());
+  const hasPrevious = useBookingDetailsSheetStore((state) => state.hasPrevious());
+  const setSelectedBookingId = useBookingDetailsSheetStore((state) => state.setSelectedBookingId);
+
+  const handleClose = () => {
+    setSelectedBookingId(null);
+  };
+
+  const storeApi = useBookingDetailsSheetStoreApi();
+
+  const handleNext = () => {
+    const nextId = storeApi.getState().getNextBookingId();
+    if (nextId !== null) {
+      setSelectedBookingId(nextId);
+    }
+  };
+
+  const handlePrevious = () => {
+    const prevId = storeApi.getState().getPreviousBookingId();
+    if (prevId !== null) {
+      setSelectedBookingId(prevId);
+    }
+  };
+
   const startTime = dayjs(booking.startTime).tz(userTimeZone);
   const endTime = dayjs(booking.endTime).tz(userTimeZone);
 
@@ -115,7 +149,7 @@ function BookingDetailsSheetInner({
     : [];
 
   return (
-    <Sheet open={isOpen} onOpenChange={onClose}>
+    <Sheet open={true} onOpenChange={handleClose}>
       <SheetContent className="overflow-y-auto">
         <SheetHeader
           showCloseButton={false}
@@ -128,7 +162,7 @@ function BookingDetailsSheetInner({
                 disabled={!hasPrevious}
                 onClick={(e) => {
                   e.preventDefault();
-                  onPrevious?.();
+                  handlePrevious();
                 }}
               />
               <Button
@@ -138,7 +172,7 @@ function BookingDetailsSheetInner({
                 disabled={!hasNext}
                 onClick={(e) => {
                   e.preventDefault();
-                  onNext?.();
+                  handleNext();
                 }}
               />
             </div>
@@ -190,7 +224,7 @@ function BookingDetailsSheetInner({
 
         <SheetFooter className="bg-muted border-subtle -mx-4 -mb-4 border-t pt-0 sm:-mx-6 sm:-my-6">
           <div className="flex w-full flex-row items-center justify-between gap-2 px-4 pb-4 pt-4">
-            <Button color="secondary" StartIcon="x" onClick={onClose}>
+            <Button color="secondary" StartIcon="x" onClick={handleClose}>
               {t("close")}
             </Button>
 
diff --git a/apps/web/modules/bookings/components/BookingsCalendar.tsx b/apps/web/modules/bookings/components/BookingsCalendar.tsx
@@ -19,7 +19,6 @@ type BookingsCalendarProps = {
   status: BookingListingStatus;
   table: ReactTable<RowData>;
   isPending?: boolean;
-  onOpenDetails: (bookingId: number) => void;
   currentWeekStart: dayjs.Dayjs;
   setCurrentWeekStart: (
     value: dayjs.Dayjs | ((old: dayjs.Dayjs) => dayjs.Dayjs | null) | null
@@ -32,7 +31,6 @@ const COLUMN_IDS_TO_HIDE = ["dateRange"];
 export function BookingsCalendar({
   table,
   isPending = false,
-  onOpenDetails,
   currentWeekStart,
   setCurrentWeekStart,
   bookings,
@@ -77,7 +75,6 @@ export function BookingsCalendar({
         currentWeekStart={currentWeekStart}
         onWeekStartChange={handleWeekStartChange}
         isPending={isPending}
-        onOpenDetails={onOpenDetails}
       />
     </>
   );
diff --git a/apps/web/modules/bookings/components/BookingsCalendarContainer.tsx b/apps/web/modules/bookings/components/BookingsCalendarContainer.tsx
@@ -2,7 +2,7 @@
 
 import { useReactTable, getCoreRowModel, getSortedRowModel } from "@tanstack/react-table";
 import { createParser, useQueryState } from "nuqs";
-import { useCallback, useMemo } from "react";
+import { useMemo } from "react";
 
 import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -11,8 +11,7 @@ import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import { useFacetedUniqueValues } from "~/bookings/hooks/useFacetedUniqueValues";
 
 import { buildFilterColumns, getFilterColumnVisibility } from "../columns/filterColumns";
-import { useBookingCursor } from "../hooks/useBookingCursor";
-import { useSelectedBookingId } from "../hooks/useSelectedBookingId";
+import { BookingDetailsSheetStoreProvider } from "../store/bookingDetailsSheetStore";
 import type { RowData, BookingListingStatus } from "../types";
 import { BookingDetailsSheet } from "./BookingDetailsSheet";
 import { BookingsCalendar } from "./BookingsCalendar";
@@ -43,19 +42,11 @@ export function BookingsCalendarContainer({
   const { t } = useLocale();
   const user = useMeQuery().data;
 
-  const [selectedBookingId, setSelectedBookingId] = useSelectedBookingId();
   const [currentWeekStart, setCurrentWeekStart] = useQueryState(
     "weekStart",
     weekStartParser.withDefault(dayjs().startOf("week"))
   );
 
-  const onOpenDetails = useCallback(
-    (bookingId: number) => {
-      setSelectedBookingId(bookingId);
-    },
-    [setSelectedBookingId]
-  );
-
   const columns = useMemo(() => {
     return buildFilterColumns({ t, permissions, status });
   }, [t, permissions, status]);
@@ -90,42 +81,23 @@ export function BookingsCalendarContainer({
       });
   }, [data, currentWeekStart]);
 
-  const selectedBooking = useMemo(() => {
-    if (!selectedBookingId) return null;
-    return bookings.find((booking) => booking.id === selectedBookingId) ?? null;
-  }, [selectedBookingId, bookings]);
-
-  const bookingNavigation = useBookingCursor({
-    bookings,
-    selectedBookingId,
-    setSelectedBookingId,
-  });
-
   return (
-    <>
+    <BookingDetailsSheetStoreProvider bookings={bookings}>
       <BookingsCalendar
         status={status}
         table={table}
         isPending={isPending}
-        onOpenDetails={onOpenDetails}
         currentWeekStart={currentWeekStart}
         setCurrentWeekStart={setCurrentWeekStart}
         bookings={bookings}
       />
 
       <BookingDetailsSheet
-        booking={selectedBooking}
-        isOpen={!!selectedBooking}
-        onClose={() => setSelectedBookingId(null)}
         userTimeZone={user?.timeZone}
         userTimeFormat={user?.timeFormat === null ? undefined : user?.timeFormat}
         userId={user?.id}
         userEmail={user?.email}
-        onPrevious={bookingNavigation.onPrevious}
-        hasPrevious={bookingNavigation.hasPrevious}
-        onNext={bookingNavigation.onNext}
-        hasNext={bookingNavigation.hasNext}
       />
-    </>
+    </BookingDetailsSheetStoreProvider>
   );
 }
diff --git a/apps/web/modules/bookings/components/BookingsCalendarView.tsx b/apps/web/modules/bookings/components/BookingsCalendarView.tsx
@@ -12,23 +12,23 @@ import { Button } from "@calcom/ui/components/button";
 import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
 import { Icon } from "@calcom/ui/components/icon";
 
+import { useBookingDetailsSheetStore } from "../store/bookingDetailsSheetStore";
 import type { BookingOutput } from "../types";
 
 type BookingsCalendarViewProps = {
   bookings: BookingOutput[];
   currentWeekStart: dayjs.Dayjs;
   onWeekStartChange: (weekStart: dayjs.Dayjs) => void;
   isPending?: boolean;
-  onOpenDetails: (bookingId: number) => void;
 };
 
 export function BookingsCalendarView({
   bookings,
   currentWeekStart,
   onWeekStartChange,
   isPending = false,
-  onOpenDetails,
 }: BookingsCalendarViewProps) {
+  const setSelectedBookingId = useBookingDetailsSheetStore((state) => state.setSelectedBookingId);
   const { t } = useLocale();
   const { timezone } = useTimePreferences();
   const { resolvedTheme, forcedTheme } = useGetTheme();
@@ -152,7 +152,7 @@ export function BookingsCalendarView({
           onEventClick={(event) => {
             const bookingId = event.options?.bookingId;
             if (bookingId) {
-              onOpenDetails(bookingId);
+              setSelectedBookingId(bookingId);
             }
           }}
           hideHeader
diff --git a/apps/web/modules/bookings/components/BookingsList.tsx b/apps/web/modules/bookings/components/BookingsList.tsx
@@ -10,6 +10,7 @@ import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 
 import SkeletonLoader from "@components/booking/SkeletonLoader";
 
+import { useBookingDetailsSheetStore } from "../store/bookingDetailsSheetStore";
 import type { RowData, BookingListingStatus } from "../types";
 
 const descriptionByStatus: Record<BookingListingStatus, string> = {
@@ -25,25 +26,19 @@ type BookingsListViewProps = {
   table: ReactTable<RowData>;
   isPending: boolean;
   totalRowCount?: number;
-  onOpenDetails: (bookingId: number) => void;
 };
 
-export function BookingsList({
-  status,
-  table,
-  isPending,
-  totalRowCount,
-  onOpenDetails,
-}: BookingsListViewProps) {
+export function BookingsList({ status, table, isPending, totalRowCount }: BookingsListViewProps) {
   const { t } = useLocale();
+  const setSelectedBookingId = useBookingDetailsSheetStore((state) => state.setSelectedBookingId);
 
   const handleRowClick = useCallback(
     (row: Row<RowData>) => {
       if (!isSeparatorRow(row.original)) {
-        onOpenDetails(row.original.booking.id);
+        setSelectedBookingId(row.original.booking.id);
       }
     },
-    [onOpenDetails]
+    [setSelectedBookingId]
   );
 
   return (
diff --git a/apps/web/modules/bookings/components/BookingsListContainer.tsx b/apps/web/modules/bookings/components/BookingsListContainer.tsx
diff --git a/apps/web/modules/bookings/store/bookingDetailsSheetStore.tsx b/apps/web/modules/bookings/store/bookingDetailsSheetStore.tsx
