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    bugs: allBugs {
13      ...BugSummary
14    }
15  }
16
17  ${BugSummary.fragment}
18`;
19
20const styles = theme => ({
21  main: {
22    maxWidth: 600,
23    margin: "auto",
24    marginTop: theme.spacing.unit * 4
25  }
26});
27
28const List = withStyles(styles)(({ bugs, classes }) => (
29  <main className={classes.main}>
30    {bugs.map(bug => (
31      <BugSummary bug={bug} key={bug.id} />
32    ))}
33  </main>
34));
35
36const ListPage = () => (
37  <Query query={QUERY}>
38    {({ loading, error, data }) => {
39      if (loading) return <CircularProgress />;
40      if (error) return <p>Error.</p>;
41      return <List bugs={data.bugs} />;
42    }}
43  </Query>
44);
45
46export default ListPage;