1import React from 'react';
  2
  3import Button from '@material-ui/core/Button';
  4import { makeStyles } from '@material-ui/core/styles';
  5import ArrowBackIcon from '@material-ui/icons/ArrowBack';
  6
  7import BugTitleForm from 'src/components/BugTitleForm/BugTitleForm';
  8import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn';
  9import Label from 'src/components/Label';
 10
 11import { BugFragment } from './Bug.generated';
 12import CommentForm from './CommentForm';
 13import TimelineQuery from './TimelineQuery';
 14
 15/**
 16 * Css in JS Styles
 17 */
 18const useStyles = makeStyles((theme) => ({
 19  main: {
 20    maxWidth: 1000,
 21    margin: 'auto',
 22    marginTop: theme.spacing(4),
 23  },
 24  header: {
 25    marginLeft: theme.spacing(3) + 40,
 26    marginRight: theme.spacing(2),
 27  },
 28  container: {
 29    display: 'flex',
 30    marginBottom: theme.spacing(1),
 31    marginRight: theme.spacing(2),
 32    marginLeft: theme.spacing(2),
 33  },
 34  timeline: {
 35    flex: 1,
 36    marginTop: theme.spacing(2),
 37    marginRight: theme.spacing(2),
 38    minWidth: 400,
 39  },
 40  sidebar: {
 41    marginTop: theme.spacing(2),
 42    flex: '0 0 200px',
 43  },
 44  sidebarTitle: {
 45    fontWeight: 'bold',
 46  },
 47  labelList: {
 48    listStyle: 'none',
 49    padding: 0,
 50    margin: 0,
 51  },
 52  label: {
 53    marginTop: theme.spacing(1),
 54    marginBottom: theme.spacing(1),
 55    '& > *': {
 56      display: 'block',
 57    },
 58  },
 59  noLabel: {
 60    ...theme.typography.body2,
 61  },
 62  commentForm: {
 63    marginLeft: 48,
 64  },
 65  backButton: {
 66    position: 'sticky',
 67    marginTop: theme.spacing(1),
 68    top: '80px',
 69    backgroundColor: '#574142',
 70    color: '#fff',
 71    '&:hover': {
 72      backgroundColor: '#610B0B',
 73    },
 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
 90      <div className={classes.container}>
 91        <div className={classes.timeline}>
 92          <TimelineQuery id={bug.id} />
 93          <IfLoggedIn>
 94            {() => (
 95              <div className={classes.commentForm}>
 96                <CommentForm bug={bug} />
 97              </div>
 98            )}
 99          </IfLoggedIn>
100        </div>
101        <div className={classes.sidebar}>
102          <span className={classes.sidebarTitle}>Labels</span>
103          <ul className={classes.labelList}>
104            {bug.labels.length === 0 && (
105              <span className={classes.noLabel}>None yet</span>
106            )}
107            {bug.labels.map((l) => (
108              <li className={classes.label} key={l.name}>
109                <Label label={l} key={l.name} />
110              </li>
111            ))}
112          </ul>
113          <Button
114            variant="contained"
115            className={classes.backButton}
116            aria-label="back"
117            href="/"
118          >
119            <ArrowBackIcon />
120            Back to List
121          </Button>
122        </div>
123      </div>
124    </main>
125  );
126}
127
128export default Bug;