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: 1000,
 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  sidebarTitle: {
 45    fontWeight: 'bold',
 46  },
 47  labelList: {
 48    listStyle: 'none',
 49    padding: 0,
 50    margin: 0,
 51  },
 52  label: {
 53    marginTop: theme.spacing(1),
 54    marginBottom: theme.spacing(1),
 55    '& > *': {
 56      display: 'block',
 57    },
 58  },
 59  noLabel: {
 60    ...theme.typography.body2,
 61  },
 62  commentForm: {
 63    marginLeft: 48,
 64  },
 65}));
 66
 67type Props = {
 68  bug: BugFragment;
 69};
 70
 71function Bug({ bug }: Props) {
 72  const classes = useStyles();
 73  return (
 74    <main className={classes.main}>
 75      <div className={classes.header}>
 76        <span className={classes.title}>{bug.title}</span>
 77        <span className={classes.id}>{bug.humanId}</span>
 78
 79        <Typography color={'textSecondary'}>
 80          <Author author={bug.author} />
 81          {' opened this bug '}
 82          <Date date={bug.createdAt} />
 83        </Typography>
 84      </div>
 85
 86      <div className={classes.container}>
 87        <div className={classes.timeline}>
 88          <TimelineQuery id={bug.id} />
 89          <div className={classes.commentForm}>
 90            <CommentForm bugId={bug.id} />
 91          </div>
 92        </div>
 93        <div className={classes.sidebar}>
 94          <span className={classes.sidebarTitle}>Labels</span>
 95          <ul className={classes.labelList}>
 96            {bug.labels.length === 0 && (
 97              <span className={classes.noLabel}>None yet</span>
 98            )}
 99            {bug.labels.map(l => (
100              <li className={classes.label} key={l.name}>
101                <Label label={l} key={l.name} />
102              </li>
103            ))}
104          </ul>
105        </div>
106      </div>
107    </main>
108  );
109}
110
111export default Bug;