1import { makeStyles } from '@material-ui/core/styles';
 2import React from 'react';
 3
 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};
21
22function Timeline({ ops }: Props) {
23  const classes = useStyles();
24
25  return (
26    <div className={classes.main}>
27      {ops.map((op, index) => {
28        switch (op.__typename) {
29          case 'CreateTimelineItem':
30            return <Message key={index} op={op} />;
31          case 'AddCommentTimelineItem':
32            return <Message key={index} op={op} />;
33          case 'LabelChangeTimelineItem':
34            return <LabelChange key={index} op={op} />;
35          case 'SetTitleTimelineItem':
36            return <SetTitle key={index} op={op} />;
37          case 'SetStatusTimelineItem':
38            return <SetStatus key={index} op={op} />;
39        }
40
41        console.warn('unsupported operation type ' + op.__typename);
42        return null;
43      })}
44    </div>
45  );
46}
47
48export default Timeline;