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.map((comment, index) => (
21      <Comment key={index} comment={comment} />
22    ))}
23  </main>
24);
25
26Bug.fragment = gql`
27  fragment Bug on Bug {
28    ...BugSummary
29    comments {
30      ...Comment
31    }
32  }
33
34  ${BugSummary.fragment}
35  ${Comment.fragment}
36`;
37
38export default withStyles(styles)(Bug);