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