52d5261b51
* 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>
76 lines
2.1 KiB
TypeScript
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]
|
|
);
|
|
}
|