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