1import React from "react";
 2import gql from "graphql-tag";
 3import { withStyles } from "@material-ui/core/styles";
 4
 5import Comment from "./Comment";
 6import BugSummary from "./BugSummary";
 7
 8const styles = theme => ({
 9  main: {
10    maxWidth: 600,
11    margin: "auto",
12    marginTop: theme.spacing.unit * 4
13  }
14});
15
16const Bug = ({ bug, classes }) => (
17  <main className={classes.main}>
18    <BugSummary bug={bug} />
19
20    {bug.comments.edges.map(({ cursor, node }) => (
21      <Comment key={cursor} comment={node} />
22    ))}
23  </main>
24);
25
26Bug.fragment = gql`
27  fragment Bug on Bug {
28    ...BugSummary
29    comments(first: 10) {
30      edges {
31        cursor
32        node {
33          ...Comment
34        }
35      }
36    }
37  }
38
39  ${BugSummary.fragment}
40  ${Comment.fragment}
41`;
42
43export default withStyles(styles)(Bug);