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