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