3 files changed, 112 insertions, 0 deletions
diff --git a/webui/src/bug/Bug.js b/webui/src/bug/Bug.js
new file mode 100644
index 00000000..33ecdd79
--- /dev/null
+++ b/webui/src/bug/Bug.js
@@ -0,0 +1,39 @@
+import { withStyles } from '@material-ui/core/styles'
+import gql from 'graphql-tag'
+import React from 'react'
+
+import Comment from './Comment'
+
+const styles = theme => ({
+  main: {
+    maxWidth: 600,
+    margin: 'auto',
+    marginTop: theme.spacing.unit * 4
+  }
+})
+
+const Bug = ({bug, classes}) => (
+  <main className={classes.main}>
+
+    {bug.comments.edges.map(({cursor, node}) => (
+      <Comment key={cursor} comment={node}/>
+    ))}
+  </main>
+)
+
+Bug.fragment = gql`
+  fragment Bug on Bug {
+    comments(first: 10) {
+      edges {
+        cursor
+        node {
+          ...Comment
+        }
+      }
+    }
+  }
+  
+  ${Comment.fragment}
+`
+
+export default withStyles(styles)(Bug)
diff --git a/webui/src/bug/BugPage.js b/webui/src/bug/BugPage.js
new file mode 100644
index 00000000..a91030ab
--- /dev/null
+++ b/webui/src/bug/BugPage.js
@@ -0,0 +1,30 @@
+import CircularProgress from '@material-ui/core/CircularProgress'
+import gql from 'graphql-tag'
+import React from 'react'
+import { Query } from 'react-apollo'
+
+import Bug from './Bug'
+
+const QUERY = gql`
+  query GetBug($id: String!) {
+    defaultRepository {
+      bug(prefix: $id) {
+        ...Bug
+      }
+    }
+  }
+
+  ${Bug.fragment}
+`
+
+const BugPage = ({match}) => (
+  <Query query={QUERY} variables={{id: match.params.id}}>
+    {({loading, error, data}) => {
+      if (loading) return <CircularProgress/>
+      if (error) return <p>Error.</p>
+      return <Bug bug={data.defaultRepository.bug}/>
+    }}
+  </Query>
+)
+
+export default BugPage
diff --git a/webui/src/bug/Comment.js b/webui/src/bug/Comment.js
new file mode 100644
index 00000000..bc108083
--- /dev/null
+++ b/webui/src/bug/Comment.js
@@ -0,0 +1,43 @@
+import Avatar from '@material-ui/core/Avatar'
+import Card from '@material-ui/core/Card'
+import CardContent from '@material-ui/core/CardContent'
+import CardHeader from '@material-ui/core/CardHeader'
+import { withStyles } from '@material-ui/core/styles'
+import Typography from '@material-ui/core/Typography'
+import gql from 'graphql-tag'
+import React from 'react'
+
+const styles = theme => ({
+  comment: {
+    marginBottom: theme.spacing.unit
+  }
+})
+
+const Comment = withStyles(styles)(({comment, classes}) => (
+  <Card className={classes.comment}>
+    <CardHeader
+      avatar={
+        <Avatar aria-label={comment.author.name}>
+          {comment.author.name[0].toUpperCase()}
+        </Avatar>
+      }
+      title={comment.author.name}
+      subheader={comment.author.email}
+    />
+    <CardContent>
+      <Typography component="p">{comment.message}</Typography>
+    </CardContent>
+  </Card>
+))
+
+Comment.fragment = gql`
+  fragment Comment on Comment {
+    message
+    author {
+      name
+      email
+    }
+  }
+`
+
+export default withStyles(styles)(Comment)