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';
 12import LabelMenu from './labels/LabelMenu';
 13
 14/**
 15 * Css in JS Styles
 16 */
 17const useStyles = makeStyles((theme) => ({
 18  main: {
 19    maxWidth: 1000,
 20    margin: 'auto',
 21    marginTop: theme.spacing(4),
 22  },
 23  header: {
 24    marginRight: theme.spacing(2),
 25    marginLeft: theme.spacing(3) + 40,
 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  rightSidebar: {
 47    marginTop: theme.spacing(2),
 48    flex: '0 0 200px',
 49  },
 50  rightSidebarTitle: {
 51    fontWeight: 'bold',
 52  },
 53  labelList: {
 54    listStyle: 'none',
 55    padding: 0,
 56    margin: 0,
 57    display: 'flex',
 58    flexDirection: 'row',
 59    flexWrap: 'wrap',
 60  },
 61  label: {
 62    marginTop: theme.spacing(0.1),
 63    marginBottom: theme.spacing(0.1),
 64    marginLeft: theme.spacing(0.25),
 65    marginRight: theme.spacing(0.25),
 66  },
 67  noLabel: {
 68    ...theme.typography.body2,
 69  },
 70  commentForm: {
 71    marginTop: theme.spacing(2),
 72    marginLeft: 48,
 73  },
 74}));
 75
 76type Props = {
 77  bug: BugFragment;
 78};
 79
 80function Bug({ bug }: Props) {
 81  const classes = useStyles();
 82
 83  return (
 84    <main className={classes.main}>
 85      <div className={classes.header}>
 86        <BugTitleForm bug={bug} />
 87      </div>
 88      <div className={classes.container}>
 89        <div className={classes.timeline}>
 90          <TimelineQuery bug={bug} />
 91          <IfLoggedIn>
 92            {() => (
 93              <div className={classes.commentForm}>
 94                <CommentForm bug={bug} />
 95              </div>
 96            )}
 97          </IfLoggedIn>
 98        </div>
 99        <div className={classes.rightSidebar}>
100          <span className={classes.rightSidebarTitle}>
101            <LabelMenu bug={bug} />
102          </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} maxWidth="25ch" />
110              </li>
111            ))}
112          </ul>
113        </div>
114      </div>
115    </main>
116  );
117}
118
119export default Bug;