todo,todo-backend: switch to and implement offset/limit pagination

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

plugins/todo/dev/index.tsx

@@ -55,11 +55,8 @@ const mockedApi = {
       },
     ],
     totalCount: 15,
-    cursors: {
-      prev: 'prev',
-      self: 'self',
-      next: 'next',
-    },
+    offset: 0,
+    limit: 10,
   }),
 };
 

plugins/todo/src/api/TodoClient.ts

@@ -34,7 +34,8 @@ export class TodoClient implements TodoApi {
 
   async listTodos({
     entity,
-    cursor,
+    offset,
+    limit,
   }: TodoListOptions): Promise<TodoListResult> {
     const baseUrl = await this.discoveryApi.getBaseUrl('todo');
     const token = await this.identityApi.getIdToken();
@@ -43,8 +44,11 @@ export class TodoClient implements TodoApi {
     if (entity) {
       query.set('entity', serializeEntityRef(entity) as string);
     }
-    if (cursor) {
-      query.set('cursor', cursor);
+    if (typeof offset === 'number') {
+      query.set('offset', String(offset));
+    }
+    if (typeof limit === 'number') {
+      query.set('limit', String(limit));
     }
 
     const res = await fetch(`${baseUrl}/v1/todos?${query}`, {

plugins/todo/src/api/types.ts

@@ -26,17 +26,15 @@ export type TodoItem = {
 
 export type TodoListOptions = {
   entity?: Entity;
-  cursor?: string;
+  offset?: number;
+  limit?: number;
 };
 
 export type TodoListResult = {
   items: TodoItem[];
   totalCount: number;
-  cursors: {
-    prev: string;
-    self: string;
-    next: string;
-  };
+  offset: number;
+  limit: number;
 };
 
 export interface TodoApi {

plugins/todo/src/components/TodoList/TodoList.tsx

@@ -17,7 +17,7 @@
 import { Progress, Table, TableColumn, useApi } from '@backstage/core';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import Alert from '@material-ui/lab/Alert';
-import React from 'react';
+import React, { useState } from 'react';
 import { useAsync } from 'react-use';
 import { todoApiRef } from '../../api';
 import { TodoItem } from '../../api/types';
@@ -52,10 +52,17 @@ const columns: TableColumn<TodoItem>[] = [
 export const TodoList = () => {
   const { entity } = useEntity();
   const todoApi = useApi(todoApiRef);
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(10);
 
   const { value, loading, error } = useAsync(
-    async () => todoApi.listTodos({ entity }),
-    [todoApi, entity],
+    async () =>
+      todoApi.listTodos({
+        entity,
+        offset: page * pageSize,
+        limit: pageSize,
+      }),
+    [todoApi, entity, page, pageSize],
   );
 
   if (loading) {
@@ -67,9 +74,15 @@ export const TodoList = () => {
   return (
     <Table
       title="TODOs"
-      options={{ search: false }}
-      page={3}
+      options={{
+        search: false,
+        pageSize,
+      }}
+      page={page}
       columns={columns}
+      totalCount={value!.totalCount}
+      onChangePage={setPage}
+      onChangeRowsPerPage={setPageSize}
       data={value!.items}
     />
   );