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