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