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