1 files changed, 28 insertions, 11 deletions
diff --git a/webui/src/list/ListQuery.js b/webui/src/list/ListQuery.js
index 9dbe4e53..869bca79 100644
--- a/webui/src/list/ListQuery.js
+++ b/webui/src/list/ListQuery.js
@@ -1,13 +1,13 @@
 // @flow
 import CircularProgress from '@material-ui/core/CircularProgress';
 import gql from 'graphql-tag';
-import React from 'react';
+import React, { useState } from 'react';
 import { Query } from 'react-apollo';
 import BugRow from './BugRow';
 import List from './List';
 
 const QUERY = gql`
-  query($first: Int = 10, $last: Int, $after: String, $before: String) {
+  query($first: Int, $last: Int, $after: String, $before: String) {
     defaultRepository {
       bugs: allBugs(
         first: $first
@@ -35,14 +35,31 @@ const QUERY = gql`
   ${BugRow.fragment}
 `;
 
-const ListQuery = () => (
-  <Query query={QUERY}>
-    {({ loading, error, data, fetchMore }) => {
-      if (loading) return <CircularProgress />;
-      if (error) return <p>Error: {error}</p>;
-      return <List bugs={data.defaultRepository.bugs} fetchMore={fetchMore} />;
-    }}
-  </Query>
-);
+function ListQuery() {
+  const [page, setPage] = useState({ first: 10, after: null });
+
+  const perPage = page.first || page.last;
+  const nextPage = pageInfo =>
+    setPage({ first: perPage, after: pageInfo.endCursor });
+  const prevPage = pageInfo =>
+    setPage({ last: perPage, before: pageInfo.startCursor });
+
+  return (
+    <Query query={QUERY} variables={page}>
+      {({ loading, error, data }) => {
+        if (loading) return <CircularProgress />;
+        if (error) return <p>Error: {error}</p>;
+        const bugs = data.defaultRepository.bugs;
+        return (
+          <List
+            bugs={bugs}
+            nextPage={() => nextPage(bugs.pageInfo)}
+            prevPage={() => prevPage(bugs.pageInfo)}
+          />
+        );
+      }}
+    </Query>
+  );
+}
 
 export default ListQuery;