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