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