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