Files
calendar/apps/web/modules/bookings/hooks/useListNavigationCapabilities.ts
T
Eunjae LeeGitHubDevin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>sean-brydon
52d5261b51 feat(booking): implement cross-page/week navigation in booking details sheet with view persistence (#25545)
* display UTM parameters

* persist view (list | calendar) in localStorage

* move to next page on clicking "next" of last item in the page

improve navigation

^ Conflicts:
^	apps/web/modules/bookings/components/BookingCalendarContainer.tsx

* fix navigation on calendar view

* Delete apps/web/modules/bookings/NAVIGATION_IMPLEMENTATION.md

* avoid page size being 0

* check feature flag on user level

* use map to improve useBookingListData

* address feedback

* feat(bookings): add smart navigation for calendar view

- Add sort option to tRPC bookings.get schema and handler
- Create NAVIGATION_PROBE_WINDOW_MONTHS constant (3 months)
- Create useNearestFutureBooking hook to find nearest future booking
- Create useNearestPastBooking hook to find nearest past booking
- Update useCalendarNavigationCapabilities to use probe results
- Update BookingCalendarContainer to wire up probe hooks

This enables the booking details sheet to:
- Disable next/prev buttons when no bookings exist in that direction
- Jump directly to the week containing the nearest booking

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

* fix type error

* feat: add booking selection state when using slideover (#25637)

* implement booking selection when using slideover

* remove pixel shift

* fix

* auto scroll to selected event on calendar

* make DateValues header sticky when scrolling

---------

Co-authored-by: Eunjae Lee <hey@eunjae.dev>

* prefetch previous / next weeks on calendar view

* clean up classes

* handle "fetched & but no data" situation more correctly in useCalendarAutoSelector

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
2025-12-15 16:04:00 +00:00

76 lines
2.1 KiB
TypeScript

import { useMemo, useEffect } from "react";
import { trpc } from "@calcom/trpc/react";
import type { NavigationCapabilities } from "../store/bookingDetailsSheetStore";
interface UseListNavigationCapabilitiesProps {
limit: number;
offset: number;
totalCount: number | undefined;
setPageIndex: (index: number) => void;
queryInput: Parameters<typeof trpc.viewer.bookings.get.useQuery>[0];
}
/**
* List view navigation capabilities adapter.
* Provides pagination-specific navigation logic for the booking details sheet.
*
* This hook:
* - Calculates page boundaries based on limit/offset
* - Prefetches the next page when available (using the same query params as parent)
* - Provides methods to navigate between pages
*/
export function useListNavigationCapabilities({
limit,
offset,
totalCount,
setPageIndex,
queryInput,
}: UseListNavigationCapabilitiesProps): NavigationCapabilities {
const trpcUtils = trpc.useUtils();
const currentPageIndex = limit > 0 ? offset / limit : 0;
// Calculate if there are more pages
const hasNextPage = useMemo(() => {
if (!totalCount) return false;
return offset + limit < totalCount;
}, [offset, limit, totalCount]);
const hasPreviousPage = offset > 0;
// Build query params for next page by reusing parent's query input
const nextPageParams = useMemo(
() => ({
...queryInput,
offset: (currentPageIndex + 1) * limit,
}),
[queryInput, currentPageIndex, limit]
);
// Prefetch next page when it exists
useEffect(() => {
if (hasNextPage) {
trpcUtils.viewer.bookings.get.prefetch(nextPageParams);
}
}, [hasNextPage, nextPageParams, trpcUtils]);
return useMemo(
() => ({
canNavigateToNextPeriod: () => hasNextPage,
canNavigateToPreviousPeriod: () => hasPreviousPage,
requestNextPeriod: () => {
if (!hasNextPage) return;
setPageIndex(currentPageIndex + 1);
},
requestPreviousPeriod: () => {
if (!hasPreviousPage) return;
setPageIndex(currentPageIndex - 1);
},
}),
[hasNextPage, hasPreviousPage, currentPageIndex, setPageIndex]
);
}