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