1import CircularProgress from '@material-ui/core/CircularProgress'
 2import { withStyles } from '@material-ui/core/styles'
 3import Table from '@material-ui/core/Table/Table'
 4import TableBody from '@material-ui/core/TableBody/TableBody'
 5import gql from 'graphql-tag'
 6import React from 'react'
 7import { Query } from 'react-apollo'
 8
 9import BugSummary from './BugSummary'
10
11const QUERY = gql`
12  {
13    defaultRepository {
14      bugs: allBugs(first: 10) {
15        edges {
16          cursor
17          node {
18            ...BugSummary
19          }
20        }
21      }
22    }
23  }
24
25  ${BugSummary.fragment}
26`
27
28const styles = theme => ({
29  main: {
30    maxWidth: 600,
31    margin: 'auto',
32    marginTop: theme.spacing.unit * 4
33  }
34})
35
36const List = withStyles(styles)(({bugs, classes}) => (
37  <main className={classes.main}>
38    <Table className={classes.table}>
39      <TableBody>
40        {bugs.edges.map(({ cursor, node }) => (
41          <BugSummary bug={node} key={cursor} />
42        ))}
43      </TableBody>
44    </Table>
45  </main>
46))
47
48const ListPage = () => (
49  <Query query={QUERY}>
50    {({loading, error, data}) => {
51      if (loading) return <CircularProgress/>
52      if (error) return <p>Error.</p>
53      return <List bugs={data.defaultRepository.bugs}/>
54    }}
55  </Query>
56)
57
58export default ListPage