make pagination work without rank numbers

Author: Pascal-Delange

packages/app-builder/src/components/PaginationButtons.tsx

@@ -22,6 +22,8 @@ type ItemWithId = {
 
 type CursorPaginationsButtonsProps = PaginatedResponse<ItemWithId> & {
   onPaginationChange: (paginationParams: PaginationParams) => void;
+  hasPreviousPage: boolean;
+  hideBoundaries?: boolean;
 };
 
 function getStartAndEndFormatted(
@@ -65,15 +67,13 @@ function getStartAndEndFormatted(
 
 export function CursorPaginationButtons({
   items,
-  startIndex,
-  endIndex,
   hasNextPage,
+  hasPreviousPage,
   onPaginationChange,
+  hideBoundaries,
 }: CursorPaginationsButtonsProps) {
   const { t } = useTranslation(['common']);
   const language = useFormatLanguage();
-  const start = Math.min(startIndex, endIndex);
-  const end = Math.max(startIndex, endIndex);
 
   const startTs = items[0]?.createdAt;
   const endTs = items[items.length - 1]?.createdAt;
@@ -96,11 +96,11 @@ export function CursorPaginationButtons({
 
   const { startFormatted, endFormatted } = getStartAndEndFormatted(startTs, endTs, language);
 
-  const previousDisabled = start <= 1;
+  const previousDisabled = !hasPreviousPage;
   const nextDisabled = !hasNextPage;
   return (
     <div className="flex items-center justify-end gap-2">
-      {startFormatted !== '' && endFormatted !== '' ? (
+      {!hideBoundaries && startFormatted !== '' && endFormatted !== '' ? (
         <Trans
           t={t}
           i18nKey="common:items_displayed"

packages/app-builder/src/hooks/useCursorPaginatedFetcher.ts

@@ -64,5 +64,6 @@ export const useCursorPaginatedFetcher = <T, D = T>({
     next,
     previous,
     reset,
+    hasPreviousPage: paginationState.hasPreviousPage,
   };
 };

packages/app-builder/src/hooks/useCursorPagination.ts

@@ -7,13 +7,15 @@ export type CursorPaginationState = {
   previousCursors: string[];
   lastAction: PaginationAction;
   isPristine: boolean;
+  hasPreviousPage: boolean;
 };
 
 const INITIAL_STATE: CursorPaginationState = {
   cursor: null,
   previousCursors: [],
   lastAction: 'next',
   isPristine: true,
+  hasPreviousPage: false,
 };
 
 export const useCursorPagination = () => {
@@ -28,17 +30,22 @@ export const useCursorPagination = () => {
         : [],
       lastAction: 'next',
       isPristine: false,
+      hasPreviousPage: true,
     }));
   }, []);
 
   const previous = useCallback(() => {
-    setState((currentState) => ({
-      ...currentState,
-      cursor: currentState.previousCursors.pop() ?? null,
-      previousCursors: [...currentState.previousCursors],
-      lastAction: 'previous',
-      isPristine: false,
-    }));
+    setState((currentState) => {
+      const hasPreviousPage = currentState.previousCursors.length > 0;
+      return {
+        ...currentState,
+        cursor: currentState.previousCursors.pop() ?? null,
+        previousCursors: [...currentState.previousCursors],
+        lastAction: 'previous',
+        isPristine: false,
+        hasPreviousPage,
+      };
+    });
   }, []);
 
   const reset = useCallback(() => {

packages/app-builder/src/routes/_builder+/cases+/inboxes.$inboxId.tsx

@@ -150,7 +150,7 @@ export default function Cases() {
     pagination: initialPagination,
   } = useLoaderData<typeof loader>();
 
-  const { data, next, previous, reset } = useCursorPaginatedFetcher<
+  const { data, next, previous, reset, hasPreviousPage } = useCursorPaginatedFetcher<
     typeof loader,
     PaginatedResponse<Case>
   >({
@@ -259,6 +259,8 @@ export default function Cases() {
                 onPaginationChange={(paginationParams: PaginationParams) =>
                   navigateCasesList(filters, paginationParams)
                 }
+                hideBoundaries
+                hasPreviousPage={hasPreviousPage}
                 {...pagination}
               />
             </CasesFiltersProvider>

packages/app-builder/src/routes/_builder+/decisions+/_index.tsx

@@ -113,7 +113,7 @@ export default function Decisions() {
     inboxes,
   } = useLoaderData<typeof loader>();
 
-  const { data, next, previous, reset } = useCursorPaginatedFetcher<
+  const { data, next, previous, reset, hasPreviousPage } = useCursorPaginatedFetcher<
     typeof loader,
     PaginatedResponse<Decision>
   >({
@@ -198,6 +198,7 @@ export default function Decisions() {
                   onPaginationChange={(paginationParams: PaginationParams) =>
                     navigateDecisionList(filters, paginationParams)
                   }
+                  hasPreviousPage={hasPreviousPage}
                   {...pagination}
                 />
               </DecisionFiltersProvider>