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