pagination

src/pages/received/List.tsx

@@ -20,14 +20,16 @@ const List: FC = () => {
 
     const navigate = useNavigate();
     const { t } = useTranslation();
-    const [currentPage, setCurrentPage] = useState(1);
+    const [nextCursor, setNextCursor] = useState<string | undefined>(undefined);
+    const [previousCursor, setPreviousCursor] = useState<string | undefined>(undefined);
     const [filters, setFilters] = useState<FilterValues>({});
     const emailActions = useEmailActions();
     const [openSummarizeModal, setOpenSummarizeModal] = useState(false);
     const { mutate: summarizeEmail, isPending: isSummarizing, data: summarizeData } = useSummarizeEmail();
 
     const { data: inboxData, isLoading, refetch, isFetching } = useGetInbox({
-        page: currentPage,
+        next: nextCursor,
+        previous: previousCursor,
         limit: 10,
         ...filters
     });
@@ -113,7 +115,8 @@ const List: FC = () => {
 
     const handleFilterChange = (newFilters: FilterValues) => {
         setFilters(newFilters);
-        setCurrentPage(1);
+        setNextCursor(undefined);
+        setPreviousCursor(undefined);
     };
 
     const handleSelectionChange = (selectedRows: InboxMessage[]) => {
@@ -189,12 +192,34 @@ const List: FC = () => {
         },
     ];
 
-    const handlePageChange = (page: number) => {
-        setCurrentPage(page);
+    const handleNext = (cursor?: string) => {
+        setNextCursor(cursor);
+        setPreviousCursor(undefined);
+    };
+
+    const handlePrevious = (cursor?: string) => {
+        setPreviousCursor(cursor);
+        setNextCursor(undefined);
     };
 
     const messages = inboxData?.data?.results || [];
     const pager = inboxData?.data?.pager;
+    const rootData = inboxData?.data as unknown as Record<string, unknown>;
+
+    // Debug pagination data
+    console.log('Full response data:', inboxData?.data);
+    console.log('Pager data:', pager);
+    console.log('Root nextCursor:', rootData?.nextCursor);
+    console.log('Root previousCursor:', rootData?.previousCursor);
+
+    // Get cursors from response
+    const responseNextCursor = (typeof rootData?.nextCursor === 'string' && rootData.nextCursor !== '') ? rootData.nextCursor as string : undefined;
+    const responsePreviousCursor = (typeof rootData?.previousCursor === 'string' && rootData.previousCursor !== '') ? rootData.previousCursor as string : undefined;
+
+    // Debug pagination values
+    console.log('responseNextCursor:', responseNextCursor);
+    console.log('responsePreviousCursor:', responsePreviousCursor);
+    console.log('Will render pagination?', !!(responseNextCursor || responsePreviousCursor));
 
     return (
         <div className='mt-2 md:mt-4 px-2 md:px-0'>
@@ -239,10 +264,12 @@ const List: FC = () => {
                 selectable={true}
                 inlineActions={getInlineActions}
                 rowActions={getRowActions}
-                pagination={pager ? {
-                    totalPages: pager.totalPages,
-                    currentPage: pager.page,
-                    onPageChange: handlePageChange
+                pagination={(responseNextCursor || responsePreviousCursor) ? {
+                    hasNext: !!responseNextCursor,
+                    nextCursor: responseNextCursor,
+                    previousCursor: responsePreviousCursor,
+                    onNext: handleNext,
+                    onPrevious: handlePrevious
                 } : undefined}
             />
 

src/pages/received/types/Types.ts

@@ -54,7 +54,8 @@ export interface SendEmailDto {
 }
 
 export interface MessageListQueryDto {
-  page?: number;
+  next?: string;
+  previous?: string;
   limit?: number;
   search?: string;
   from?: string;
@@ -111,20 +112,20 @@ export interface InboxMessage extends Record<string, unknown> {
   };
 }
 
-export interface InboxPager {
+export interface Pager {
   page: number;
   limit: number;
   totalItems: number;
   totalPages: number;
-  prevPage: boolean;
-  nextPage: boolean;
+  previousCursor: string | boolean;
+  nextCursor: string | boolean;
 }
 
 export interface InboxResponse {
   statusCode: number;
   success: boolean;
   data: {
-    pager: InboxPager;
+    pager: Pager;
     message: string;
     results: InboxMessage[];
   };