1import makeStyles from '@mui/styles/makeStyles';
 2
 3import { BugFragment } from './Bug.generated';
 4import LabelChange from './LabelChange';
 5import Message from './Message';
 6import SetStatus from './SetStatus';
 7import SetTitle from './SetTitle';
 8import { TimelineItemFragment } from './TimelineQuery.generated';
 9
10const useStyles = makeStyles((theme) => ({
11  main: {
12    '& > *:not(:last-child)': {
13      marginBottom: theme.spacing(2),
14    },
15  },
16}));
17
18type Props = {
19  ops: Array<TimelineItemFragment>;
20  bug: BugFragment;
21};
22
23function Timeline({ bug, ops }: Props) {
24  const classes = useStyles();
25
26  return (
27    <div className={classes.main}>
28      {ops.map((op, index) => {
29        switch (op.__typename) {
30          case 'BugCreateTimelineItem':
31            return <Message key={index} op={op} bug={bug} />;
32          case 'BugAddCommentTimelineItem':
33            return <Message key={index} op={op} bug={bug} />;
34          case 'BugLabelChangeTimelineItem':
35            return <LabelChange key={index} op={op} />;
36          case 'BugSetTitleTimelineItem':
37            return <SetTitle key={index} op={op} />;
38          case 'BugSetStatusTimelineItem':
39            return <SetStatus key={index} op={op} />;
40        }
41
42        console.warn('unsupported operation type ' + op.__typename);
43        return null;
44      })}
45    </div>
46  );
47}
48
49export default Timeline;