Use the same pagination primitives in the session lists

frontend/src/components/OAuth2SessionList.tsx

@@ -12,21 +12,36 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { atomFamily } from "jotai/utils";
+import { atomFamily, atomWithDefault } from "jotai/utils";
 import { atomWithQuery } from "jotai-urql";
-import { useAtomValue } from "jotai";
+import { useAtomValue, atom, useSetAtom } from "jotai";
 
 import BlockList from "./BlockList";
 import OAuth2Session from "./OAuth2Session";
 import { Title } from "./Typography";
 
 import { graphql } from "../gql";
+import { atomWithPagination, pageSizeAtom, Pagination } from "../pagination";
+import { PageInfo } from "../gql/graphql";
+import PaginationControls from "./PaginationControls";
+import { useTransition } from "react";
 
 const QUERY = graphql(/* GraphQL */ `
-  query OAuth2SessionListQuery($userId: ID!) {
+  query OAuth2SessionListQuery(
+    $userId: ID!
+    $first: Int
+    $after: String
+    $last: Int
+    $before: String
+  ) {
     user(id: $userId) {
       id
-      oauth2Sessions(first: 10) {
+      oauth2Sessions(
+        first: $first
+        after: $after
+        last: $last
+        before: $before
+      ) {
         edges {
           cursor
           node {
@@ -34,32 +49,75 @@ const QUERY = graphql(/* GraphQL */ `
             ...OAuth2Session_session
           }
         }
+
+        pageInfo {
+          hasNextPage
+          hasPreviousPage
+          startCursor
+          endCursor
+        }
       }
     }
   }
 `);
 
+const currentPagination = atomWithDefault<Pagination>((get) => ({
+  first: get(pageSizeAtom),
+  after: null,
+}));
+
 const oauth2SessionListFamily = atomFamily((userId: string) => {
   const oauth2SessionList = atomWithQuery({
     query: QUERY,
-    getVariables: () => ({ userId }),
+    getVariables: (get) => ({ userId, ...get(currentPagination) }),
   });
 
   return oauth2SessionList;
 });
 
+const pageInfoFamily = atomFamily((userId: string) => {
+  const pageInfoAtom = atom(async (get): Promise<PageInfo | null> => {
+    const result = await get(oauth2SessionListFamily(userId));
+    return result.data?.user?.oauth2Sessions?.pageInfo ?? null;
+  });
+
+  return pageInfoAtom;
+});
+
+const paginationFamily = atomFamily((userId: string) => {
+  const paginationAtom = atomWithPagination(
+    currentPagination,
+    pageInfoFamily(userId)
+  );
+  return paginationAtom;
+});
+
 type Props = {
   userId: string;
 };
 
 const OAuth2SessionList: React.FC<Props> = ({ userId }) => {
+  const [pending, startTransition] = useTransition();
   const result = useAtomValue(oauth2SessionListFamily(userId));
+  const setPagination = useSetAtom(currentPagination);
+  const [prevPage, nextPage] = useAtomValue(paginationFamily(userId));
+
+  const paginate = (pagination: Pagination) => {
+    startTransition(() => {
+      setPagination(pagination);
+    });
+  };
 
   if (result.data?.user?.oauth2Sessions) {
     const data = result.data.user.oauth2Sessions;
     return (
       <BlockList>
         <Title>List of OAuth 2.0 sessions:</Title>
+        <PaginationControls
+          onPrev={prevPage ? () => paginate(prevPage) : null}
+          onNext={nextPage ? () => paginate(nextPage) : null}
+          disabled={pending}
+        />
         {data.edges.map((n) => (
           <OAuth2Session key={n.cursor} session={n.node} />
         ))}