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