pagination

src/pages/spam/List.tsx

@@ -12,12 +12,14 @@ import { useEmailActions } from '@/hooks/useEmailActions';
 
 const List: FC = () => {
     const navigate = useNavigate();
-    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 { data: spamData, isLoading, refetch, isFetching } = useGetSpamMessages({
-        page: currentPage,
+        next: nextCursor,
+        previous: previousCursor,
         limit: 10,
         ...filters
     });
@@ -72,7 +74,8 @@ const List: FC = () => {
 
     const handleFilterChange = (newFilters: FilterValues) => {
         setFilters(newFilters);
-        setCurrentPage(1);
+        setNextCursor(undefined);
+        setPreviousCursor(undefined);
     };
 
     const handleSelectionChange = (selectedRows: SpamMessage[]) => {
@@ -104,8 +107,14 @@ 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 = spamData?.data?.junkMails || [];
@@ -144,9 +153,11 @@ const List: FC = () => {
                 selectable={true}
                 rowActions={getRowActions}
                 pagination={pager ? {
-                    totalPages: pager.totalPages,
-                    currentPage: pager.page,
-                    onPageChange: handlePageChange
+                    hasNext: typeof pager.nextCursor === 'string',
+                    nextCursor: typeof pager.nextCursor === 'string' ? pager.nextCursor : undefined,
+                    previousCursor: typeof pager.previousCursor === 'string' ? pager.previousCursor : undefined,
+                    onNext: handleNext,
+                    onPrevious: handlePrevious
                 } : undefined}
             />
         </div>