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: 1200,
 21    margin: 'auto',
 22    marginTop: theme.spacing(4),
 23  },
 24  header: {
 25    marginRight: theme.spacing(2),
 26    marginLeft: theme.spacing(3) + 205,
 27  },
 28  title: {
 29    ...theme.typography.h5,
 30  },
 31  id: {
 32    ...theme.typography.subtitle1,
 33    marginLeft: theme.spacing(1),
 34  },
 35  container: {
 36    display: 'flex',
 37    marginBottom: theme.spacing(1),
 38    marginRight: theme.spacing(2),
 39    marginLeft: theme.spacing(2),
 40  },
 41  timeline: {
 42    flex: 1,
 43    marginTop: theme.spacing(2),
 44    marginRight: theme.spacing(2),
 45    minWidth: 400,
 46  },
 47  leftSidebar: {
 48    marginTop: theme.spacing(2),
 49    marginRight: theme.spacing(2),
 50  },
 51  rightSidebar: {
 52    marginTop: theme.spacing(2),
 53    flex: '0 0 200px',
 54  },
 55  rightSidebarTitle: {
 56    fontWeight: 'bold',
 57  },
 58  labelList: {
 59    listStyle: 'none',
 60    padding: 0,
 61    margin: 0,
 62  },
 63  label: {
 64    marginTop: theme.spacing(1),
 65    marginBottom: theme.spacing(1),
 66    '& > *': {
 67      display: 'block',
 68    },
 69  },
 70  noLabel: {
 71    ...theme.typography.body2,
 72  },
 73  commentForm: {
 74    marginLeft: 48,
 75  },
 76  backButton: {
 77    position: 'sticky',
 78    top: '80px',
 79    backgroundColor: '#574142',
 80    color: '#fff',
 81    '&:hover': {
 82      backgroundColor: '#610B0B',
 83    },
 84  },
 85}));
 86
 87type Props = {
 88  bug: BugFragment;
 89};
 90
 91function Bug({ bug }: Props) {
 92  const classes = useStyles();
 93
 94  return (
 95    <main className={classes.main}>
 96      <div className={classes.header}>
 97        <BugTitleForm bug={bug} />
 98      </div>
 99      <div className={classes.container}>
100        <div className={classes.leftSidebar}>
101          <Button
102            variant="contained"
103            className={classes.backButton}
104            aria-label="back to issue list"
105            href="/"
106          >
107            <ArrowBackIcon />
108            Back to List
109          </Button>
110        </div>
111        <div className={classes.timeline}>
112          <TimelineQuery id={bug.id} />
113          <IfLoggedIn>
114            {() => (
115              <div className={classes.commentForm}>
116                <CommentForm bug={bug} />
117              </div>
118            )}
119          </IfLoggedIn>
120        </div>
121        <div className={classes.rightSidebar}>
122          <span className={classes.rightSidebarTitle}>Labels</span>
123          <ul className={classes.labelList}>
124            {bug.labels.length === 0 && (
125              <span className={classes.noLabel}>None yet</span>
126            )}
127            {bug.labels.map((l) => (
128              <li className={classes.label} key={l.name}>
129                <Label label={l} key={l.name} />
130              </li>
131            ))}
132          </ul>
133        </div>
134      </div>
135    </main>
136  );
137}
138
139export default Bug;