Bug.js

 1import { withStyles } from '@material-ui/core/styles'
 2import gql from 'graphql-tag'
 3import React from 'react'
 4import BugSummary from './BugSummary'
 5
 6import Comment from './Comment'
 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)