1import React from 'react';
 2
 3import { makeStyles } from '@material-ui/core/styles';
 4
 5import LabelChange from './LabelChange';
 6import Message from './Message';
 7import SetStatus from './SetStatus';
 8import SetTitle from './SetTitle';
 9import { TimelineItemFragment } from './TimelineQuery.generated';
10
11const useStyles = makeStyles(theme => ({
12  main: {
13    '& > *:not(:last-child)': {
14      marginBottom: theme.spacing(2),
15    },
16  },
17}));
18
19type Props = {
20  ops: Array<TimelineItemFragment>;
21};
22
23function Timeline({ 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 'CreateTimelineItem':
31            return <Message key={index} op={op} />;
32          case 'AddCommentTimelineItem':
33            return <Message key={index} op={op} />;
34          case 'LabelChangeTimelineItem':
35            return <LabelChange key={index} op={op} />;
36          case 'SetTitleTimelineItem':
37            return <SetTitle key={index} op={op} />;
38          case 'SetStatusTimelineItem':
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;