1// @flow
 2import CircularProgress from '@material-ui/core/CircularProgress';
 3import gql from 'graphql-tag';
 4import React, { useState } from 'react';
 5import { Query } from 'react-apollo';
 6import BugRow from './BugRow';
 7import List from './List';
 8
 9const QUERY = gql`
10  query($first: Int, $last: Int, $after: String, $before: String) {
11    defaultRepository {
12      bugs: allBugs(
13        first: $first
14        last: $last
15        after: $after
16        before: $before
17      ) {
18        totalCount
19        edges {
20          cursor
21          node {
22            ...BugRow
23          }
24        }
25        pageInfo {
26          hasNextPage
27          hasPreviousPage
28          startCursor
29          endCursor
30        }
31      }
32    }
33  }
34
35  ${BugRow.fragment}
36`;
37
38function ListQuery() {
39  const [page, setPage] = useState({ first: 10, after: null });
40
41  const perPage = page.first || page.last;
42  const nextPage = pageInfo =>
43    setPage({ first: perPage, after: pageInfo.endCursor });
44  const prevPage = pageInfo =>
45    setPage({ last: perPage, before: pageInfo.startCursor });
46
47  return (
48    <Query query={QUERY} variables={page}>
49      {({ loading, error, data }) => {
50        if (loading) return <CircularProgress />;
51        if (error) return <p>Error: {error}</p>;
52        const bugs = data.defaultRepository.bugs;
53        return (
54          <List
55            bugs={bugs}
56            nextPage={() => nextPage(bugs.pageInfo)}
57            prevPage={() => prevPage(bugs.pageInfo)}
58          />
59        );
60      }}
61    </Query>
62  );
63}
64
65export default ListQuery;