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