1// @flow
 2import CircularProgress from '@material-ui/core/CircularProgress'
 3import gql from 'graphql-tag'
 4import React from 'react'
 5import { Query } from 'react-apollo'
 6
 7import BugRow from './BugRow'
 8import List from './List'
 9
10const QUERY = gql`
11  query($first: Int = 10, $last: Int, $after: String, $before: String) {
12    defaultRepository {
13      bugs: allBugs(first: $first, last: $last, after: $after, before: $before) {
14        totalCount
15        edges {
16          cursor
17          node {
18            ...BugRow
19          }
20        }
21        pageInfo{
22          hasNextPage
23          hasPreviousPage
24          startCursor
25          endCursor
26        }
27      }
28    }
29  }
30
31
32  ${BugRow.fragment}
33`
34
35const ListPage = () => (
36  <Query query={QUERY}>
37    {({loading, error, data, fetchMore}) => {
38      if (loading) return <CircularProgress/>
39      if (error) return <p>Error.</p>
40      return <List bugs={data.defaultRepository.bugs} fetchMore={fetchMore}/>
41    }}
42  </Query>
43)
44
45export default ListPage