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