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    marginTop: theme.spacing(2),
 63    marginLeft: 48,
 64  },
 65}));
 66
 67type Props = {
 68  bug: BugFragment;
 69};
 70
 71function Bug({ bug }: Props) {
 72  const classes = useStyles();
 73
 74  return (
 75    <main className={classes.main}>
 76      <div className={classes.header}>
 77        <BugTitleForm bug={bug} />
 78      </div>
 79
 80      <div className={classes.container}>
 81        <div className={classes.timeline}>
 82          <TimelineQuery bug={bug} />
 83          <IfLoggedIn>
 84            {() => (
 85              <div className={classes.commentForm}>
 86                <CommentForm bug={bug} />
 87              </div>
 88            )}
 89          </IfLoggedIn>
 90        </div>
 91        <div className={classes.sidebar}>
 92          <span className={classes.sidebarTitle}>Labels</span>
 93          <ul className={classes.labelList}>
 94            {bug.labels.length === 0 && (
 95              <span className={classes.noLabel}>None yet</span>
 96            )}
 97            {bug.labels.map((l) => (
 98              <li className={classes.label} key={l.name}>
 99                <Label label={l} key={l.name} />
100              </li>
101            ))}
102          </ul>
103        </div>
104      </div>
105    </main>
106  );
107}
108
109export default Bug;