1import React from "react";
  2import { Query } from "react-apollo";
  3import gql from "graphql-tag";
  4import { withStyles } from "@material-ui/core/styles";
  5
  6import Avatar from "@material-ui/core/Avatar";
  7import Card from "@material-ui/core/Card";
  8import CardContent from "@material-ui/core/CardContent";
  9import CardHeader from "@material-ui/core/CardHeader";
 10import Chip from "@material-ui/core/Chip";
 11import CircularProgress from "@material-ui/core/CircularProgress";
 12import Typography from "@material-ui/core/Typography";
 13
 14const styles = theme => ({
 15  main: {
 16    maxWidth: 600,
 17    margin: "auto",
 18    marginTop: theme.spacing.unit * 4
 19  },
 20  labelList: {
 21    display: "flex",
 22    flexWrap: "wrap",
 23    marginTop: theme.spacing.unit
 24  },
 25  label: {
 26    marginRight: theme.spacing.unit
 27  },
 28  summary: {
 29    marginBottom: theme.spacing.unit * 2
 30  },
 31  comment: {
 32    marginBottom: theme.spacing.unit
 33  }
 34});
 35
 36const QUERY = gql`
 37  query GetBug($id: BugID!) {
 38    bug(id: $id) {
 39      id
 40      title
 41      status
 42      labels
 43      comments {
 44        message
 45        author {
 46          name
 47          email
 48        }
 49      }
 50    }
 51  }
 52`;
 53
 54const Comment = withStyles(styles)(({ comment, classes }) => (
 55  <Card className={classes.comment}>
 56    <CardHeader
 57      avatar={
 58        <Avatar aria-label={comment.author.name}>
 59          {comment.author.name[0].toUpperCase()}
 60        </Avatar>
 61      }
 62      title={comment.author.name}
 63      subheader={comment.author.email}
 64    />
 65    <CardContent>
 66      <Typography component="p">{comment.message}</Typography>
 67    </CardContent>
 68  </Card>
 69));
 70
 71const BugView = withStyles(styles)(({ bug, classes }) => (
 72  <main className={classes.main}>
 73    <Card className={classes.summary}>
 74      <CardContent>
 75        <Typography variant="headline" component="h2">
 76          {bug.title}
 77        </Typography>
 78        <Typography variant="subheading" component="h3" title={bug.id}>
 79          #{bug.id.slice(0, 8)} • {bug.status.toUpperCase()}
 80        </Typography>
 81        <div className={classes.labelList}>
 82          {bug.labels.map(label => (
 83            <Chip key={label} label={label} className={classes.label} />
 84          ))}
 85        </div>
 86      </CardContent>
 87    </Card>
 88
 89    {bug.comments.map((comment, index) => (
 90      <Comment key={index} comment={comment} />
 91    ))}
 92  </main>
 93));
 94
 95const Bug = ({ match }) => (
 96  <Query query={QUERY} variables={{ id: match.params.id }}>
 97    {({ loading, error, data }) => {
 98      if (loading) return <CircularProgress />;
 99      if (error) return <p>Error.</p>;
100      return <BugView bug={data.bug} />;
101    }}
102  </Query>
103);
104
105export default Bug;