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