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);