1import { withStyles } from "@material-ui/core/styles";
 2import Typography from "@material-ui/core/Typography/Typography";
 3import gql from "graphql-tag";
 4import React from "react";
 5import Author from "../Author";
 6import Date from "../Date";
 7import TimelineQuery from "./TimelineQuery";
 8import Label from "../Label";
 9
10const styles = theme => ({
11  main: {
12    maxWidth: 600,
13    margin: "auto",
14    marginTop: theme.spacing.unit * 4
15  },
16  header: {},
17  title: {
18    ...theme.typography.headline
19  },
20  id: {
21    ...theme.typography.subheading,
22    marginLeft: 15
23  },
24  container: {
25    display: "flex",
26    marginBottom: 30
27  },
28  timeline: {
29    width: "70%",
30    marginTop: 20,
31    marginRight: 20
32  },
33  sidebar: {
34    width: "30%"
35  },
36  labelList: {
37    listStyle: "none",
38    padding: 0,
39    margin: 0
40  },
41  label: {
42    margin: "4px 0",
43    "& > *": {
44      display: "block"
45    }
46  }
47});
48
49const Bug = ({ bug, classes }) => (
50  <main className={classes.main}>
51    <div className={classes.header}>
52      <span className={classes.title}>{bug.title}</span>
53      <span className={classes.id}>{bug.humanId}</span>
54
55      <Typography color={"textSecondary"}>
56        <Author author={bug.author} />
57        <span> opened this bug </span>
58        <Date date={bug.createdAt} />
59      </Typography>
60    </div>
61
62    <div className={classes.container}>
63      <div className={classes.timeline}>
64        <TimelineQuery id={bug.id} />
65      </div>
66      <div className={classes.sidebar}>
67        <Typography variant={"subheading"}>Labels</Typography>
68        <ul className={classes.labelList}>
69          {bug.labels.map(l => (
70            <li className={classes.label}>
71              <Label label={l} key={l} />
72            </li>
73          ))}
74        </ul>
75      </div>
76    </div>
77  </main>
78);
79
80Bug.fragment = gql`
81  fragment Bug on Bug {
82    id
83    humanId
84    status
85    title
86    labels
87    createdAt
88    author {
89      email
90      name
91    }
92  }
93`;
94
95export default withStyles(styles)(Bug);